My app builds and works fine locally but not on Netlify

Support
1

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!

2

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!

3

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

4

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.

5

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
6

A post was split to a new topic: React video app freezing when deployed to Netlify

7

means just we have to npm update?

8

i am having same issue in forkify project please help

9

Hi , glad you found us :wave:t6: before we can help you, we need a little more information on the issues you are facing.

First, have you looked through this resource? It is a compilation of all of our build and deploy resources. This is a good starting point.

If you have worked through those guides and are still encountering issues please share the following information:

  • the name of your build instance: “example-jones.netlify.com”
  • what you have already tried
  • any error messages you have received in your terminal window or in the developer console