Nginx config for nodejs static missing something?

Sites and web apps
#1

Every time we setup a vue3 app with a nodejs static site on cleavr we need to modify the nginx config to add /index.html to try_files as follows

  location / {
    include cleavr-conf/diabetes-wise-pro-demo.builtbyupshift.dev/*.conf.pre;
    try_files $uri $uri/ /index.html =404;
    include cleavr-conf/diabetes-wise-pro-demo.builtbyupshift.dev/*.conf.post;
  }

Without it, requests to vue route urls other than / result in a 404.

Are we doing something wrong?

Thanks!

1 Like
#2

I haven’t run into this particular issue - at least not when starting a vue3 app either via npm init vue@latest or with a new Nuxt3 app via npx nuxi init nuxt-app.

If you have an public repo, let me know and I can give it a try.

#3

I was getting 404 error on every path when you directly paste the url to browser, except at index (home page). Thank you for sharing this, adding /index.html into it fixed my issue.

#4

I think, you misunderstood the concept of static sites.
The term means that routing is static and the server will only deliver actual files.

What you describe is a single page application (SPA) which does not provide files that match the URL by their names. It is meant for static site generators where every URL path is build by static files and folders like Gatsby does, for example.

Although I see the pain in your case, nodejs static does exactly what it should.