My app builds and works fine locally but not on Netlify

site name: https://jm-forkify.netlify.app/
site API-id: 97ad3084-0993-47a2-aa5e-f03f4caecc5c

Hey,

So this is my first time deploying on netlify and I’ve just got a simple SPA with webpack. I’ve followed all the docs on here and set my build to ‘npm run build’ as well as added a _redirects.txt file to handle 404s as per the doc. Yet my build never succeeds and as far as I can tell I can’t see any feedback as to why.

If I add '/dist/index.html/ to the url it all works as intended. I’ve set the base directory to numerous variations ‘’, ‘./’, etc same as the publish directory which for me is ‘dist’, yet the site is still not working. Any advice or a point in the right direction is much appreciated, thanks!

hi there,

For redirects, the file is just _redirects not _redirects.txt (no file ending) so the latter won’t work.

I’m not sure at the moment where the issue is occurring that you are describing, but

This Support Guide contains a ton of useful debugging tips that can likely help you solve your problem :slight_smile:

If you are still having problems, please provide as much information as you can on what you have already tried, what your build settings are, your package.json, etc. Thanks!

Hey Perry, thanks for the heads up on the _redirects file extension issue.

I think the problem is where Netlify is looking for the index.html file, as I just created a new one at the root of the folder with a simple h1 ‘Hello World’ and it displays as it should. With webpacker it compiles everything and creates the files in the ‘dist’ folder, this is where my ‘index.html’ and ‘bundle.js’ files live but when I change the settings to look in that folder on my base directory it doesn’t effect it all.

My package.json:

{
  "name": "forkify",
  "version": "1.0.0",
  "description": "forkify project",
  "main": "index.js",
  "scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production && mv _redirects dist",
"start": "webpack-dev-server --mode development --open"
  },
  "author": "John Marsden",
  "license": "ISC",
  "devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.6.1",
"html-webpack-plugin": "^3.0.7",
"webpack": "^4.2.0",
"webpack-cli": "^2.0.12",
"webpack-dev-server": "^3.1.1"
  },
  "dependencies": {
"axios": "^0.18.0",
"babel-polyfill": "^6.26.0",
"fractional": "^1.0.0",
"uniqid": "^4.1.1"
  }
}

And my build on here is:

Base directory: ./
Build command: npm run build
Publish directory: ./dist

Hi, @john.marsden24, I’m seeing most builds failing here. The build system will only publish successful deploys.

If the builds are working locally but not in the builds with our service, I would next check to see if the version of node the build system uses matches the version you use on the local system. This is the version in the logs for the most recent build:

8:51:40 AM: Now using node v10.21.0 (npm v6.14.4)

Instructions for setting the node version in the build system can be found here. If this doesn’t resolve the issue, please let us know.

EDIT:

Thanks for that Luke, now I could find the actual deploy logs I found the issue, an out of date webpack-cli package. Supposedly a few people were having the issue when they changed the syntax during a newer release, a simple update to a newer version got it all fixed.

1 Like