we need to know your netlify site name. Example: gifted-antelope-58b104.netlify.app
DNS issues? Tell us the custom domain, tell us the error message! We can’t help if we don’t know your domain.
Build problems? Link or paste the FULL build log & build settings screenshot
The better the post - the faster the answer.
Is there an issue with my file format on my github repo? Do I have to separate my backend and front files into two different repos? I would hope to keep my react “client” folder where I have already, but nothing I do seems to work. Here a link to my github repo: https://github.com/darienmiller88/Task-Scheduler
This is what my settings look like. When I click “Edit settings”, it auto fills the publish directory with the path client/build/.
Checking your repository and your configuration I can see a couple of problems.
#1
Your Base directory looks like it should be set to client not client/build.
Netlify installs the dependencies of the package.json that it finds in the base directory. You’re pointing to a directory that doesn’t contain a package.json and thus react-scripts isn’t being installed.
#2
When you encounter the error:
Could not find a required file.
Name: index.html
Searched in: /client/public
This is because there is no index.html file in the client/public folder, and it appears to be a requirement of the Create React App as seen here:
#3
It looks like your Publish directory would need to be set to client/build.
If you’re building this output on your own machine and do not need it to be built on Netlify, then you could set it as the Publish directory and not run a Build command.
Hey Nathan, thanks for responding. It seems like changing my base directory to client/ allowed the deployment to pass thankfully, but the link still doesn’t seem to work as a “Page not found” error message is present. Here is the build log:
1:14:23 AM: Waiting for other deploys from your team to complete. Check the queue: https://app.netlify.com/teams/darienmiller88/builds
1:14:50 AM: Build ready to start
1:14:51 AM: build-image version: c5b01a919d3e16af69445c5de0cacb49efbb1a23 (focal)
1:14:51 AM: build-image tag: v4.4.0
1:14:51 AM: buildbot version: 9deea8f876b3228119111d3a654f519dd1866bfe
1:14:52 AM: Fetching cached dependencies
1:14:52 AM: Starting to download cache of 25.7MB
1:14:52 AM: Finished downloading cache in 686.310794ms
1:14:52 AM: Starting to extract cache
1:14:53 AM: Finished extracting cache in 363.000783ms
1:14:53 AM: Finished fetching cache in 1.055371279s
1:14:53 AM: Starting to prepare the repo for build
1:14:53 AM: Preparing Git Reference refs/heads/master
1:14:54 AM: Parsing package.json dependencies
1:14:54 AM: Different build dir detected, going to use the one specified in the Netlify configuration file: 'client' versus 'client/' in the Netlify UI
1:14:54 AM: Different publish path detected, going to use the one specified in the Netlify configuration file: 'client' versus '' in the Netlify UI
1:14:54 AM: Starting build script
1:14:55 AM: Installing dependencies
1:14:55 AM: Python version set to 2.7
1:14:55 AM: Downloading and installing node v16.13.0...
1:14:55 AM: Downloading https://nodejs.org/dist/v16.13.0/node-v16.13.0-linux-x64.tar.xz...
1:14:56 AM: Computing checksum with sha256sum
1:14:56 AM: Checksums matched!
1:14:59 AM: Now using node v16.13.0 (npm v8.1.0)
1:14:59 AM: Started restoring cached build plugins
1:14:59 AM: Finished restoring cached build plugins
1:14:59 AM: Attempting ruby version 2.7.2, read from environment
1:15:00 AM: Using ruby version 2.7.2
1:15:01 AM: Using PHP version 8.0
1:15:01 AM: Started restoring cached node modules
1:15:01 AM: Finished restoring cached node modules
1:15:01 AM: Installing NPM modules using NPM version 8.1.0
1:15:11 AM: npm WARN deprecated flatten@1.0.3: flatten is deprecated in favor of utility frameworks such as lodash.
1:15:11 AM: npm WARN deprecated har-validator@5.1.5: this library is no longer supported
1:15:12 AM: npm WARN deprecated uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
1:15:13 AM: npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
1:15:14 AM: npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
1:15:15 AM: npm WARN deprecated sane@1.4.1: some dependency vulnerabilities fixed, support for node < 10 dropped, and newer ECMAScript syntax/features added
1:15:18 AM: npm WARN deprecated natives@1.1.6: This module relies on Node.js's internals and will break at some point. Do not use it, and update to graceful-fs@4.x.npm WARN deprecated eslint-loader@1.6.0: This loader has been deprecated. Please use eslint-webpack-plugin
1:15:18 AM: npm WARN deprecated extract-text-webpack-plugin@1.0.1: Deprecated. Please use https://github.com/webpack-contrib/mini-css-extract-plugin
1:15:19 AM: npm WARN deprecated html-webpack-plugin@2.24.0: out of support
1:15:20 AM: npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
1:15:20 AM: npm WARN deprecated circular-json@0.3.3: CircularJSON is in maintenance only, flatted is its successor.
1:15:21 AM: npm WARN deprecated chokidar@1.7.0: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
1:15:21 AM: npm WARN deprecated babel-eslint@7.1.1: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.
1:15:24 AM: npm WARN deprecated @babel/polyfill@7.12.1: 🚨 This package has been deprecated in favor of separate inclusion of a polyfill and regenerator-runtime (when needed). See the @babel/polyfill docs (https://babeljs.io/docs/en/babel-polyfill) for more information.
1:15:24 AM: npm WARN deprecated svgo@0.7.2: This SVGO version is no longer supported. Upgrade to v2.x.x.
1:15:24 AM: npm WARN deprecated github@0.2.4: 'github' has been renamed to '@octokit/rest' (https://git.io/vNB11)
1:15:29 AM: npm WARN deprecated core-js@2.6.12: core-js@<3.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.
1:15:32 AM: added 1202 packages, and audited 1203 packages in 30s
1:15:32 AM: 74 packages are looking for funding
1:15:32 AM: run `npm fund` for details
1:15:32 AM: 51 vulnerabilities (12 low, 18 moderate, 17 high, 4 critical)
1:15:32 AM: To address issues that do not require attention, run:
1:15:32 AM: npm audit fix
1:15:32 AM: To address all issues (including breaking changes), run:
1:15:32 AM: npm audit fix --force
1:15:32 AM: Run `npm audit` for details.
1:15:32 AM: NPM modules installed
1:15:32 AM: Started restoring cached go cache
1:15:32 AM: Finished restoring cached go cache
1:15:32 AM: go version go1.16.5 linux/amd64
1:15:32 AM: go version go1.16.5 linux/amd64
1:15:32 AM: Installing missing commands
1:15:32 AM: Verify run directory
1:15:34 AM:
1:15:34 AM: ────────────────────────────────────────────────────────────────
1:15:34 AM: Netlify Build
1:15:34 AM: ────────────────────────────────────────────────────────────────
1:15:34 AM:
1:15:34 AM: ❯ Version
1:15:34 AM: @netlify/build 18.20.1
1:15:34 AM:
1:15:34 AM: ❯ Flags
1:15:34 AM: baseRelDir: true
1:15:34 AM: buildId: 6180c92fab599f5a4c32e071
1:15:34 AM: deployId: 6180c92fab599f5a4c32e073
1:15:34 AM:
1:15:34 AM: ❯ Current directory
1:15:34 AM: /opt/build/repo/client
1:15:34 AM:
1:15:34 AM: ❯ Config file
1:15:34 AM: No config file was defined: using default values.
1:15:34 AM:
1:15:34 AM: ❯ Context
1:15:34 AM: production
1:15:34 AM:
1:15:34 AM: ────────────────────────────────────────────────────────────────
1:15:34 AM: 1. Build command from Netlify app
1:15:34 AM: ────────────────────────────────────────────────────────────────
1:15:34 AM:
1:15:34 AM: $ CI= npm run build
1:15:34 AM: > client@0.1.0 build
1:15:34 AM: > react-scripts build
1:15:35 AM: Creating an optimized production build...
1:15:36 AM: (node:1435) Warning: Accessing non-existent property 'cat' of module exports inside circular dependency
1:15:36 AM: (Use `node --trace-warnings ...` to show where the warning was created)
1:15:36 AM: (node:1435) Warning: Accessing non-existent property 'cd' of module exports inside circular dependency
1:15:36 AM: (node:1435) Warning: Accessing non-existent property 'chmod' of module exports inside circular dependency
1:15:36 AM: (node:1435) Warning: Accessing non-existent property 'cp' of module exports inside circular dependency
1:15:36 AM: (node:1435) Warning: Accessing non-existent property 'dirs' of module exports inside circular dependency
1:15:36 AM: (node:1435) Warning: Accessing non-existent property 'pushd' of module exports inside circular dependency
1:15:36 AM: (node:1435) Warning: Accessing non-existent property 'popd' of module exports inside circular dependency
1:15:36 AM: (node:1435) Warning: Accessing non-existent property 'echo' of module exports inside circular dependency
1:15:36 AM: (node:1435) Warning: Accessing non-existent property 'tempdir' of module exports inside circular dependency
1:15:36 AM: (node:1435) Warning: Accessing non-existent property 'pwd' of module exports inside circular dependency
1:15:36 AM: (node:1435) Warning: Accessing non-existent property 'exec' of module exports inside circular dependency
1:15:36 AM: (node:1435) Warning: Accessing non-existent property 'ls' of module exports inside circular dependency
1:15:36 AM: (node:1435) Warning: Accessing non-existent property 'find' of module exports inside circular dependency
1:15:36 AM: (node:1435) Warning: Accessing non-existent property 'grep' of module exports inside circular dependency
1:15:36 AM: (node:1435) Warning: Accessing non-existent property 'head' of module exports inside circular dependency
1:15:36 AM: (node:1435) Warning: Accessing non-existent property 'ln' of module exports inside circular dependency
1:15:36 AM: (node:1435) Warning: Accessing non-existent property 'mkdir' of module exports inside circular dependency
1:15:36 AM: (node:1435) Warning: Accessing non-existent property 'rm' of module exports inside circular dependency
1:15:36 AM: (node:1435) Warning: Accessing non-existent property 'mv' of module exports inside circular dependency
1:15:36 AM: (node:1435) Warning: Accessing non-existent property 'sed' of module exports inside circular dependency
1:15:36 AM: (node:1435) Warning: Accessing non-existent property 'set' of module exports inside circular dependency
1:15:36 AM: (node:1435) Warning: Accessing non-existent property 'sort' of module exports inside circular dependency
1:15:36 AM: (node:1435) Warning: Accessing non-existent property 'tail' of module exports inside circular dependency
1:15:36 AM: (node:1435) Warning: Accessing non-existent property 'test' of module exports inside circular dependency
1:15:36 AM: (node:1435) Warning: Accessing non-existent property 'to' of module exports inside circular dependency
1:15:36 AM: (node:1435) Warning: Accessing non-existent property 'toEnd' of module exports inside circular dependency
1:15:36 AM: (node:1435) Warning: Accessing non-existent property 'touch' of module exports inside circular dependency
1:15:36 AM: (node:1435) Warning: Accessing non-existent property 'uniq' of module exports inside circular dependency
1:15:36 AM: (node:1435) Warning: Accessing non-existent property 'which' of module exports inside circular dependency
1:15:42 AM: Compiled successfully.
1:15:42 AM: File sizes after gzip:
1:15:42 AM: 66.22 KB (+240 B) build/static/js/main.76049abf.js
1:15:42 AM: 1.16 KB build/static/css/main.c56eb3cd.css
1:15:42 AM: The project was built assuming it is hosted at the server root.
1:15:42 AM: To override this, specify the homepage in your package.json.
1:15:42 AM: For example, add this to build it for GitHub Pages:
1:15:42 AM: "homepage": "http://myname.github.io/myapp",
1:15:42 AM: The build folder is ready to be deployed.
1:15:42 AM: You may serve it with a static server:
1:15:42 AM: npm install -g serve
1:15:42 AM: serve -s build
1:15:43 AM:
1:15:43 AM: (build.command completed in 8.9s)
1:15:43 AM:
1:15:43 AM: ────────────────────────────────────────────────────────────────
1:15:43 AM: 2. Deploy site
1:15:43 AM: ────────────────────────────────────────────────────────────────
1:15:43 AM:
1:15:43 AM: Starting to deploy site from 'client'
1:15:43 AM: Creating deploy tree
1:15:43 AM: Creating deploy upload records
1:15:43 AM: 0 new files to upload
1:15:43 AM: 0 new functions to upload
1:15:43 AM: Site deploy was successfully initiated
1:15:43 AM:
1:15:43 AM: (Deploy site completed in 389ms)
1:15:43 AM:
1:15:43 AM: ────────────────────────────────────────────────────────────────
1:15:43 AM: Netlify Build Complete
1:15:43 AM: ────────────────────────────────────────────────────────────────
1:15:43 AM:
1:15:43 AM: (Netlify Build completed in 9.3s)
1:15:43 AM: Starting post processing
1:15:43 AM: Post processing - HTML
1:15:44 AM: Post processing - header rules
1:15:44 AM: Caching artifacts
1:15:44 AM: Started saving node modules
1:15:44 AM: Finished saving node modules
1:15:44 AM: Post processing - redirect rules
1:15:44 AM: Started saving build plugins
1:15:44 AM: Finished saving build plugins
1:15:44 AM: Started saving pip cache
1:15:44 AM: Finished saving pip cache
1:15:44 AM: Started saving emacs cask dependencies
1:15:44 AM: Post processing done
1:15:44 AM: Finished saving emacs cask dependencies
1:15:44 AM: Started saving maven dependencies
1:15:44 AM: Finished saving maven dependencies
1:15:44 AM: Started saving boot dependencies
1:15:44 AM: Finished saving boot dependencies
1:15:44 AM: Started saving rust rustup cache
1:15:44 AM: Finished saving rust rustup cache
1:15:44 AM: Started saving go dependencies
1:15:44 AM: Finished saving go dependencies
1:15:44 AM: Site is live ✨
1:15:46 AM: Build script success
1:16:13 AM: Finished processing build request in 1m21.901951088s
Here is the link to it: https://lucid-heyrovsky-1133cf.netlify.app/
Do I have to update the build folder? There was an issue of an incorrect react-router-dom version being used that netlify complained about, and upon fixing that, I didn’t re-build the build folder when the deployment was successful.
Okay, so I’m making progress now! I added the client/build path to the Publish Directory. I see the / deployed successfully, but attempting to visit the other routes results in a 404 page. How can I over come this? Locally, client side routing works just fine. For reference, my other routes are /set-reminder, /signup, and /signin.
If the other routes were static files built to client/build/set-reminder.html or client/build/set-reminder/index.html (for example), they would just work.
If you’re using dynamic routes in your Single Page Application (SPA) then you’ll want to add a _redirects (or netlify.toml) redirect rule that tells all of the paths to load the root file.
This is definitely a single page application, so I added both a _redirects and netlify.toml file to my build folder, but nothing seemed to changed, non / routes still return a 404. They should go in the build folder right?
The _redirects file would go in the client/build folder.
The netlify.toml would go in the client folder.
You don’t need both, but you can have both.
The redirects engine will process the first matching rule it finds, reading from top to bottom. Rules in the _redirects file are always processed first, followed by rules in the Netlify configuration file.
The important thing is not that the files exist though, (which is important), but also that it contains the right rule, which would be…
If you are building the site, the _redirects file needs to go into the public directory (where the index.html resides.) This is copied to the build directory as part of the build process.
If you are deploying the client/build directory rather than building from the client directory, then yes, you would put the _redirects file in that directory.
@colemay is entirely correct, your particular build is taking files from the client/public input folder and copying them to the client/build output folder, (and is erasing anything else in the client/build folder as it does so).
So to get the _redirects file into the client/build folder (which because it is the Publish directory is where Netlify expects it to be), you actually need to put the file into your client/public folder and allow the build process to copy it over.
Alright, so I added the _redirects file to my public folder, rebuilt the build folder, and the link finally works now! Routing works perfectly now. Thank you @coelmay and @nathanmartin for the help, this was very valuable!
