Search code examples
node.jsreactjsnetlify

Continuous deployment of a react app on netlify rendering blank page

I just finished a continuous deployment from Github on netlify. With these setting:

Build Command: npm build
Publish Directory: devit/public/

It deployed without any errors, on visiting the site it was blank. Complete Deploy log :

4:10:30 AM: Build ready to start
4:10:32 AM: build-image version: ca811f47d4c1cbd1812d1eb6ecb0c977e86d1a1d
4:10:32 AM: build-image tag: v3.3.20
4:10:32 AM: buildbot version: 78b5536ab4f742c26705d3e953381b9cde6e22ef
4:10:32 AM: Fetching cached dependencies
4:10:32 AM: Starting to download cache of 88.5MB
4:10:33 AM: Finished downloading cache in 724.248229ms
4:10:33 AM: Starting to extract cache
4:10:35 AM: Finished extracting cache in 2.554192297s
4:10:35 AM: Finished fetching cache in 3.297079366s
4:10:35 AM: Starting to prepare the repo for build
4:10:36 AM: Preparing Git Reference refs/heads/master
4:10:37 AM: Different publish path detected, going to use the one specified in the Netlify configuration file: 'devit/public' versus 'devit/public/' in the Netlify UI
4:10:37 AM: Starting build script
4:10:37 AM: Installing dependencies
4:10:37 AM: Python version set to 2.7
4:10:38 AM: Started restoring cached node version
4:10:40 AM: Finished restoring cached node version
4:10:41 AM: v12.18.0 is already installed.
4:10:41 AM: Now using node v12.18.0 (npm v6.14.4)
4:10:41 AM: Started restoring cached build plugins
4:10:41 AM: Finished restoring cached build plugins
4:10:41 AM: Attempting ruby version 2.7.1, read from environment
4:10:42 AM: Using ruby version 2.7.1
4:10:43 AM: Using PHP version 5.6
4:10:43 AM: 5.2 is already installed.
4:10:43 AM: Using Swift version 5.2
4:10:43 AM: Started restoring cached go cache
4:10:43 AM: Finished restoring cached go cache
4:10:43 AM: go version go1.14.4 linux/amd64
4:10:43 AM: go version go1.14.4 linux/amd64
4:10:43 AM: Installing missing commands
4:10:43 AM: Verify run directory
4:10:44 AM: ​
4:10:44 AM: ┌─────────────────────────────┐
4:10:44 AM: │        Netlify Build        │
4:10:44 AM: └─────────────────────────────┘
4:10:44 AM: ​
4:10:44 AM: ❯ Version
4:10:44 AM:   @netlify/build 2.0.27
4:10:44 AM: ​
4:10:44 AM: ❯ Flags
4:10:44 AM:   deployId: 5f0547367d92cb55b46de080
4:10:44 AM:   mode: buildbot
4:10:44 AM: ​
4:10:44 AM: ❯ Current directory
4:10:44 AM:   /opt/build/repo
4:10:44 AM: ​
4:10:44 AM: ❯ Config file
4:10:44 AM:   No config file was defined: using default values.
4:10:44 AM: ​
4:10:44 AM: ❯ Context
4:10:44 AM:   production
4:10:44 AM: ​
4:10:44 AM: ┌───────────────────────────────────┐
4:10:44 AM: │ 1. Build command from Netlify app │
4:10:44 AM: └───────────────────────────────────┘
4:10:44 AM: ​
4:10:44 AM: $ npm build
4:10:44 AM: ​
4:10:44 AM: (build.command completed in 274ms)
4:10:44 AM: ​
4:10:44 AM: ┌─────────────────────────────┐
4:10:44 AM: │   Netlify Build Complete    │
4:10:44 AM: └─────────────────────────────┘
4:10:44 AM: ​
4:10:44 AM: (Netlify Build completed in 298ms)
4:10:44 AM: Caching artifacts
4:10:44 AM: Started saving build plugins
4:10:44 AM: Finished saving build plugins
4:10:44 AM: Started saving pip cache
4:10:44 AM: Finished saving pip cache
4:10:44 AM: Started saving emacs cask dependencies
4:10:44 AM: Finished saving emacs cask dependencies
4:10:44 AM: Started saving maven dependencies
4:10:44 AM: Finished saving maven dependencies
4:10:44 AM: Started saving boot dependencies
4:10:44 AM: Finished saving boot dependencies
4:10:44 AM: Started saving go dependencies
4:10:44 AM: Finished saving go dependencies
4:10:44 AM: Build script success
4:10:44 AM: Starting to deploy site from 'devit/public'
4:10:44 AM: Creating deploy tree 
4:10:45 AM: Creating deploy upload records
4:10:45 AM: 0 new files to upload
4:10:45 AM: 0 new functions to upload
4:10:45 AM: Starting post processing
4:10:45 AM: Post processing - HTML
4:10:46 AM: Post processing - redirect rules
4:10:46 AM: Post processing - header rules
4:10:46 AM: Post processing done
4:10:46 AM: Site is live
4:10:56 AM: Finished processing build request in 24.126985051s

I also checked the browser console, and found this: https://i.sstatic.net/1nqt1.png

GitHub repository : https://github.com/kelvinyelyen/dev.it_blog

Solution

  • npm build does not run your build script, it builds an npm package, which doesn't do anything useful for a website. You'd also have to use the devit directory.

    Setting the build command to npm run build --prefix devit should fix the issue.