How to serve static files with nginx after using npm run build with webpack

Question

after generating a development build with npm run build i get the message saying "Tip: built files are meant to be served over an HTTP server. Opening index.html over file:// won't work."

What is the best way to do this with nginx? Currently to test it i am using an npm module called serve.

Also, if i got to my homepage at mydomain.com and search for a user, everything works like it is supposed to, redirecting me to mydomain.com/users/brad but if i then do a url search formydomain.com/users/brad i get a not found error, any help is appreciated!

Answer 1

In my case, when I have to serve static content with nginx, it often looks like :

   location /static {
       alias $myroot/staticfiles;
   }

Also, if you haven't already, read the NginX guide to Serving Static Content .

Answer 2

If your are familiar with the Docker technology i would recommend to use a Docker Nginx Container and add your static content from the Webpack Buildflow to your container (this can be automated with a build server). Have a look at the following Docker Image from Nginx: https://hub.docker.com/_/nginx/ .

Otherwise you have to install nginx on your Server where you host your Homepage. For this have a look at your Server OS and reach out to the web for a detailed nginx setup for your server. Without any configurations nginx will serve the static content on Linux-like server from /usr/share/nginx/html

If you only have FTP Access to your server you can transfer your built files via FTP/SFTP to a specific folder eg /myHomepage and then your static content is server from yourdomain.de/myHompage.