Deploy successful but site is giving 404 error

Support
1
  • Name of the site : https://scribblegame.netlify.app
  • Error : Looks like you’ve followed a broken link or entered a URL that doesn’t exist on this site.
  • build log :
    12:05:49 PM: Build ready to start
    12:05:51 PM: build-image version: 195fbe127e5c374d9c4758652cb62e3b8936a395 (focal)
    12:05:51 PM: build-image tag: v4.6.0
    12:05:51 PM: buildbot version: 43c70c62bfed821cfaaabbb50f00238dd4bdd2d6
    12:05:52 PM: Fetching cached dependencies
    12:05:52 PM: Failed to fetch cache, continuing with build
    12:05:52 PM: Starting to prepare the repo for build
    12:05:52 PM: No cached dependencies found. Cloning fresh repo
    12:05:52 PM: git clone GitHub - harsha-penugonda/ssw555tmscrumbledores-army2022Spring: Deployed at
    12:05:58 PM: Preparing Git Reference pull/19/head
    12:06:00 PM: Parsing package.json dependencies
    12:06:00 PM: Different publish path detected, going to use the one specified in the Netlify configuration file: ‘canvas_game’ versus ‘’ in the Netlify UI
    12:06:01 PM: Starting build script
    12:06:01 PM: Installing dependencies
    12:06:01 PM: Python version set to 2.7
    12:06:02 PM: Downloading and installing node v16.14.2…
    12:06:02 PM: Downloading https://nodejs.org/dist/v16.14.2/node-v16.14.2-linux-x64.tar.xz…
    12:06:02 PM: Computing checksum with sha256sum
    12:06:02 PM: Checksums matched!
    12:06:05 PM: Now using node v16.14.2 (npm v8.5.0)
    12:06:05 PM: Started restoring cached build plugins
    12:06:05 PM: Finished restoring cached build plugins
    12:06:05 PM: Attempting ruby version 2.7.2, read from environment
    12:06:06 PM: Using ruby version 2.7.2
    12:06:07 PM: Using PHP version 8.0
    12:06:07 PM: Started restoring cached node modules
    12:06:07 PM: Finished restoring cached node modules
    12:06:07 PM: Installing NPM modules using NPM version 8.5.0
    12:06:48 PM: added 1405 packages, and audited 1406 packages in 41s
    12:06:48 PM: 169 packages are looking for funding
    12:06:48 PM: run npm fund for details
    12:06:48 PM: 8 vulnerabilities (6 moderate, 2 high)
    12:06:48 PM: To address issues that do not require attention, run:
    12:06:48 PM: npm audit fix
    12:06:48 PM: To address all issues (including breaking changes), run:
    12:06:48 PM: npm audit fix --force
    12:06:48 PM: Run npm audit for details.
    12:06:48 PM: NPM modules installed
    12:06:49 PM: Started restoring cached go cache
    12:06:49 PM: Finished restoring cached go cache
    12:06:49 PM: go version go1.16.5 linux/amd64
    12:06:49 PM: go version go1.16.5 linux/amd64
    12:06:49 PM: Installing missing commands
    12:06:49 PM: Verify run directory
    12:06:50 PM: ​
    12:06:50 PM: ────────────────────────────────────────────────────────────────
    12:06:50 PM: Netlify Build
    12:06:50 PM: ────────────────────────────────────────────────────────────────
    12:06:50 PM: ​
    12:06:50 PM: ❯ Version
    12:06:50 PM: @netlify/build 26.5.1
    12:06:50 PM: ​
    12:06:50 PM: ❯ Flags
    12:06:50 PM: baseRelDir: true
    12:06:50 PM: buildId: 623f39dd5f93420008f618a8
    12:06:50 PM: deployId: 623f39dd5f93420008f618aa
    12:06:50 PM: ​
    12:06:50 PM: ❯ Current directory
    12:06:50 PM: /opt/build/repo/canvas_game
    12:06:50 PM: ​
    12:06:50 PM: ❯ Config file
    12:06:50 PM: No config file was defined: using default values.
    12:06:50 PM: ​
    12:06:50 PM: ❯ Context
    12:06:50 PM: deploy-preview
    12:06:50 PM: ​
    12:06:50 PM: ────────────────────────────────────────────────────────────────
    12:06:50 PM: 1. Build command from Netlify app
    12:06:50 PM: ────────────────────────────────────────────────────────────────
    12:06:50 PM: ​
    12:06:50 PM: $ npm run build
    12:06:50 PM: > canvas_game@0.1.0 build
    12:06:50 PM: > react-scripts build
    12:06:52 PM: Creating an optimized production build…
    12:07:01 PM: Compiled successfully.
    12:07:01 PM:
    12:07:01 PM: File sizes after gzip:
    12:07:01 PM: 87.75 kB build/static/js/main.5b9fdc7f.js
    12:07:01 PM: 1.78 kB build/static/js/787.e1ce8304.chunk.js
    12:07:01 PM: 1.48 kB build/static/css/main.b060e5bd.css
    12:07:01 PM: The project was built assuming it is hosted at /.
    12:07:01 PM: You can control this with the homepage field in your package.json.
    12:07:01 PM: The build folder is ready to be deployed.
    12:07:01 PM: You may serve it with a static server:
    12:07:01 PM: npm install -g serve
    12:07:01 PM: serve -s build
    12:07:01 PM: Find out more about deployment here:
    12:07:01 PM: Deployment | Create React App
    12:07:01 PM: ​
    12:07:01 PM: (build.command completed in 10.8s)
    12:07:01 PM: ​
    12:07:01 PM: ────────────────────────────────────────────────────────────────
    12:07:01 PM: 2. Deploy site
    12:07:02 PM: Creating deploy upload records
    12:07:01 PM: ────────────────────────────────────────────────────────────────
    12:07:01 PM: ​
    12:07:01 PM: Starting to deploy site from ‘canvas_game’
    12:07:01 PM: Creating deploy tree
    12:07:02 PM: 6 new files to upload
    12:07:02 PM: 0 new functions to upload
    12:07:02 PM: Site deploy was successfully initiated
    12:07:02 PM: Starting post processing
    12:07:02 PM: ​
    12:07:03 PM: Post processing - HTML
    12:07:02 PM: (Deploy site completed in 1.4s)
    12:07:02 PM: ​
    12:07:02 PM: ────────────────────────────────────────────────────────────────
    12:07:02 PM: Netlify Build Complete
    12:07:02 PM: ────────────────────────────────────────────────────────────────
    12:07:02 PM: ​
    12:07:03 PM: Post processing - header rules
    12:07:02 PM: (Netlify Build completed in 12.3s)
    12:07:03 PM: Caching artifacts
    12:07:03 PM: Started saving node modules
    12:07:03 PM: Finished saving node modules
    12:07:03 PM: Post processing - redirect rules
    12:07:03 PM: Started saving build plugins
    12:07:03 PM: Finished saving build plugins
    12:07:03 PM: Started saving pip cache
    12:07:04 PM: Post processing done
    12:07:03 PM: Finished saving pip cache
    12:07:03 PM: Started saving emacs cask dependencies
    12:07:03 PM: Finished saving emacs cask dependencies
    12:07:03 PM: Started saving maven dependencies
    12:07:03 PM: Finished saving maven dependencies
    12:07:03 PM: Started saving boot dependencies
    12:07:03 PM: Finished saving boot dependencies
    12:07:03 PM: Started saving rust rustup cache
    12:07:03 PM: Finished saving rust rustup cache
    12:07:03 PM: Started saving go dependencies
    12:07:03 PM: Finished saving go dependencies
    12:07:04 PM: Build script success
    12:07:06 PM: Site is live :sparkles:
    12:07:37 PM: Finished processing build request in 1m45.332646969s
2

Hey @harsha

You have correctly configured the base directory for the build

But not the publish directory

As mentioned in Netlify’s CRA documentation and CRA’s Netlify documentation the publish directory is build *(in your case it will also have canvas_game prepended to it.)

Screen Shot 2022-03-27 at 8.00.19 am
Screen Shot 2022-03-27 at 8.00.19 am1810×1160 161 KB

3

After making the suggested changes 404 error was gone but now it is showing in empty page with the below source code.

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8"/>
      <link rel="icon" href="/ssw555tmscrumbledores-army2022Spring/favicon.ico"/>
      <meta name="viewport" content="width=device-width,initial-scale=1"/>
      <meta name="theme-color" content="#000000"/>
      <meta name="description" content="Web site created using create-react-app"/>
      <link rel="apple-touch-icon" href="/ssw555tmscrumbledores-army2022Spring/logo192.png"/>
      <link rel="manifest" href="/ssw555tmscrumbledores-army2022Spring/manifest.json"/>
      <title>Canvas App</title>
      <script defer="defer" src="/ssw555tmscrumbledores-army2022Spring/static/js/main.5416ac65.js"></script>
      <link href="/ssw555tmscrumbledores-army2022Spring/static/css/main.a9508171.css" rel="stylesheet">
   </head>
   <body>
      <noscript>You need to enable JavaScript to run this app.</noscript>
      <div id="root"></div>
   </body>
</html>

Any thoughts? I tried different browsers but its the same

4

You have the homepage attribute set in the package.json @harsha

"homepage": "http://harsha-penugonda.github.io/ssw555tmscrumbledores-army2022Spring",

React will use this value, or the path (i.e. ssw555tmscrumbledores-army2022Spring) as the location the site is deployed too. This is required when using GitHub Pages, but not Netlify.

For Netlify deploys, you can remove the homepage attribute entirely.

5

Thank you for that it helped!!!