Netlify deployment not displaying page content

Support
,
1

I have simple Javascript project that builds correctly locally, and I get this result

Local build image

However, when I deploy it on netlify or run netlify deploy locally I get the image below from the draft URL

netlify deployment

In my netlify.toml file I have the following configuration

[build]
  command = "npm run build"
  publish = "dist"

[dev]
  command = "yarn start"
  targetPort = 3000
  port = 8888
  publish = "dist"

What could be the issue leading to that problem?

2

Hi @Benmuiruri, welcome and thanks for posting.
It will be difficult to debug by just looking at an image of the draft URL.
If possible can you share the repository of your project and the deployed URL?
Thanks.

3

Hi @clarnx , sure. Here is the link to the repository GitHub - Benmuiruri/stream-it-movie-library: Browse a list of your favorite movies and tv shows on the Steam-It Movie Database. and the live link https://stream-it-movie-library.netlify.app/

4

Hi @Benmuiruri

Thanks for the links.
Looking at the page source I see

<script defer="" src="/stream-it-capstone/bundle.js"></script>

This issue with this is the src attribute, more specifically, the /stream-it-capstone/ path. The project is deployed at the site root (/) and not on the /stream-it-capstone/ path.

The fix for this is to remove the homepage key and value from the package.json as React uses this to build for relative paths.

1 Like
5

HI @coelmay , thanks for the suggestion. I have removed the homepage key and value, ran npm run build. However it is still the same output when I run netlify deploy.

6

You need to also remove the publicPath key from webpack.config.js

7

Thaanks Coel, that worked. Could you offer a simple explanation of the logic? So that I understand what happened ?

8

The publicPath set the value (in this case /stream-it-capstone/) as the location where the site is hosted. This works when you want to host multiple React (or other framework sites) on various sub-paths of the same domain. It tells the script that all the assets required are at (or below) that sub-path, and not the domain root.

In your case though, you are hosting the site at the domain root (/) thus this value is not needed.

2 Likes