Gatsby build on Nginx not loading js on build

Posted January 29, 2019 4.8k views
NginxUbuntu 18.04

I have a static site made with Gatsby and WP for the backend. I have the same git deployed on Netlify and it works great. When it comes to deploy it on any Ubuntu like server i have always the same problem.
Here is what I have done:

I have the same problem on all environments. What am I missing?

Thanks a lot,

These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.

Submit an Answer
2 answers

Hey F.

It looks like your images and JS are not loaded because of relative URL issues:

  1. The nginx document root is /var/www - _so when someone loads nginx looks for files in /var/www
  2. Your site is two directories down, at: /var/www/ so you correctly had to add / to the external URL to get to your Gatsby public root.
  3. However, Gatsby doesn’t know about those two subdirectories, and renders out links to JS and Images like this: <script src="/1-b0f05c4bb642dc46906c.js" async=""> ^ That URL is referencing a nonexistent JS file at AKA /var/www/1-b0f05c4bb642dc46906c.js

To Fix: Move your nginx document root from /var/www/ to /var/www/ by updating your nginx config and reloading nginx. Instructions here:

by Melissa Anderson
On Ubuntu, by default, the Nginx web server stores its documents in /var/www/html, which is typically located on the root filesystem with rest of the operating system. Sometimes, though, it’s helpful to move the document root to another location, such as a separate mounted...

Thanks for your answer! Looking forward to try this!