Develop Reference

NGINX With Vue 3 Vite SPA - Returning Blank White Page

I have the following NGINX config
events {
worker_connections 1024;
}
http {
server {
listen 80;
server_name localhost;
location / {
root C:/test;
index index.html;
try_files $uri $uri/ /index.html;
}
location /display/outbound {
alias C:/test/display/outbound;
index index.html;
try_files $uri $uri/ /display/outbound/index.html;
}
location /display/outbound/api/ {
proxy_pass http://localhost:52000/api/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
# Serve .js and .css files with the correct MIME type
types {
text/html html;
application/javascript js;
text/css css;
}
# Serve static assets
location /assets/ {
alias C:/test/display/outbound/assets/;
}
# Serve favicon
location /favicon.ico {
alias C:/test/display/outbound/favicon.ico;
}
}
}
There are three aspects, the http://localhost route returns a static html page with just a h1 element. This works fine
A Vue 3 Vite SPA, served at http://localhost/display/outbound - From what I can tell, the files are being served correctly, as I can see the contents in the network tab of dev tools. I also have no console errors. However, I am just seeing a blank white page.
When serving the Vue 3 app from http://localhost it works with no issues.
A reverse proxy to my API - This worked fine when hosting my Vue app from http://localhost
Is anybody able to point me in the right direction. I have tried numerous things now, none of which seem to work.
When changing my vite.config.js file and adding
base: '/display/outbound/',
It serves the app, I can see the pages etc, but the JS breaks and I get the Filter is not a function error. This doesn't happen when serving from http://localhost
I am at a loss on how to proceed. I have tried several variations of my config file, all with the same results. The files are being served, no errors, but blank white page.
Edit - My file structure is as follows
C:/test - Root directory
C:/test/index.html - The static html page at
http://localhost - Can access fine
C:/test/display/outbound - Contains Vue 3 project with the favicon and index.html, also assets
subfolder
C:/test/display/outbound/assets - Contains the Vue 3 JS,
CSS and other files
Edit 2 - Added pictures of the DOM
Thanks in advance! If more info is needed, please let me know.

So, I managed to resolve this by adding
base: '/display/outbound/',
to my Vite.config.ts file.
This has now presented me with another issue however, which I have raised at Vue 3 Vite SPA Served on NGINX at Sub Root Location - Filter is Not a Function Error

How can I get around caching policy when using Laravel to generate CSS and Javascript?

I am using Laravel to generate files for what would otherwise be inline JS and CSS.
The web.php configuration is:
Route::get('/js/words.js', function() {
$words = Word::get();
return response()->view('words', compact('words'))->header('Content-Type', 'text/javascript');
});
When I deploy this to the server initially everything is fine. But then, when I add a simple CSS/JS caching policy to the Nginx configuration, the generated CSS/JS breaks.
The Nginx configuration is:
location ~* \.(css|js)$ {
expires 30d;
}
Does anybody else do this to avoid inline CSS/JS, and if so, how do you enable caching without breaking the generated files?

I've used it like this
location ~* \.(?:css|js)$ {
expires 365d;
access_log off;
add_header Cache-Control "public";
}
and make sure to restart the nginx server
sudo systemctl restart nginx

Kubernetes, Nginx, SPA hosted on a shared domain

I'm working on a project thats hosted on kubernetes, theres an ingress configured so that going to the domain root (lets call it example.com) directs to an nginx service hosting an spa thats already running. certain api paths /v1, /v2 etc point to different api services.
We are adding a second SPA that will be hosted under example.com/ui
I should probably mention this SPA is built using lit element (web components), but gets pre-processed(minified/transpiled/etc) and hosted via nginx rather than using polymer-serve or something similar. The processing is done via rollupjs and tailwind-cli(for the css). Also the site using routing, so other routes example.com/ui/someOtherRoute define user views in the SPA but would just return the index.html from the server.
I started with an nginx config I use for all of my other SPAs however it's set up to use the root domain.
server {
listen 80;
listen [::]:80 default ipv6only=on;
root /usr/share/nginx/html;
index index.html;
server_name _; # all hostnames
location / {
try_files $uri /index.html;
}
add_header Access-Control-Allow-Origin *;
}
So we have a situation where if the uri doesn't have /ui it wont get routed to my nginx server
When something does contain /ui I want to check for matching files otherwise serve the index.html
I don't have much experience with nginx but have been researching potential solutions.
currently I'm trying to leverage the alias feature as such:
location /ui/ {
alias /usr/share/nginx/html;
try_files $uri /index.html;
}
My understanding is that using the alias will strip the "/ui" from the search path so that a request of example.com/ui/somefile.css would look up files as if it was example.com/somefile.css
However I also found an old bug thats still open here
Stating that leveraging try_files $uri isn't effected by the alias. so the try_files command must still use the /ui in its file look up.
I also tried leveraging the html base tag in my index but that started adding /ui/ui to all of my css and js script requests.
I may be way off on my understanding here but any guidance would be great. I have limited control over what can be changed in the kuberenetes ingress, but I have complete control over the ngix container and the SPA code base.
We have a fallback plan of adding a separate sub domain for the new ui app, which will work and we've done many times before. I'm just really stuck in my head on this because I'm sure it can be solved as is and I'd really like to figure it out.

Nginx ignoring /api location directive with react-router 4, except in firefox private browsing

I have a React app that is served via nginx, and a nodejs api server behind nginx reverse proxy. The nginx configuration looks like this:
location / {
try_files $uri /index.html;
add_header Cache-Control public;
}
location /api/ {
proxy_pass http://localhost:8000;
proxy_http_version 1.1;
}
In firefox private browsing, things work as expected: when I page refresh/redirect to domain.com/api, the request gets proxied to the node server.
However, in non-private firefox and chrome (incognito + not), any page refresh/redirect to domain.com/api will load the react app and treat the /api as a react-router route. The strange thing is, if I clear cookies/history and direct my browser to domain.com/api, I will correctly be proxied to the node server. The issue only occurs after I have loaded the react app once before.
This is driving me crazy, any ideas? I was thinking about downgrading react-router to version 3, but that would require some refactoring and I don't know if that would solve things.

I fixed it for now by removing registerServiceWorker() from create-react-app boilerplate.

Best ways to configure nginx to serve yeoman angular generator files?

I am quite new to configuring production servers to serve UI. I always wrote my code and someone else did the deployment. But I wish to move to the next stage now. Having said that, I wrote my UI code starting from yeoman-angular-generator and I wish to deploy it on my production Amazon ec2 instance.
I configured nginx on the instance and setup route53 and I am able to serve default 'Welcome to nginx' page from mydomain.com. What I wish to do is to serve my UI from mydomain.com. I tried to write a server block with location '/' pointing to my index.html from my dist folder. But it is not working.

I usually set up something like this:
server {
listen 80;
server_name your.project.com
location / {
try_files $uri /index.html;
root /path/to/project/dist/;
}
}