DEV Community

loading...

Netlify Deployment config settings for craco react apps.

jtwray profile image James 'Tucker' Wray ・4 min read

Recently I discovered a new build tool 'craco'.
[Create React App Config Override].
Craco allows you to customize create react app without ejecting (Adding less for those super convenient cascading stylesheets anyone?). This meant new things were possible with create react app which wouldn't previously have been possible without making some sacrifices.
For example:
-sacrificing future dependency update coverage
-donating the time and energy for some serious research and custom configurations to the webpack setup/ other cogs and pulleys cra takes care of for us.

From my understanding ejecting a create react app means losing all future automatic updates to your application's dependencies. The future automatic updates thing doesnt sound too terribly bad, more of a headache and a development time tax I'd prefer not to pay. Just another thing in the back of my mind taking up space. I feel like a few scripts might be written to update thwm on your own. I mean you know the scripts exist out there already. How else are the updates pushed out to us currently. Its just taking time to find them or create your own versions.

I digress...
Adding 'LESS' to my react application sounds like a winning idea and when I bumped into this craco thing wandering through the interwebs one weekend I was all for giving it a try.

As with all of my web adventures ... there were some bumpy roads ahead.

While converting my Netlify Deployment from an npm create react app to a craco create react app, I ran into some hangups.
The following writeup will hopefully shed some light on your dark situation and save you some time and build hours on the console.
here goes...


key |

_______________________________________________|

TLDR

Netlify Build Settings UI

package.json

netlify.toml

errors


TLDR |

_______________________________________________|

This was the solution:

|-------------------|--------------------|
| Base directory | ./ |
| Build command | CI= npm run build |
| Publish directory | ./build |
|-------------------|--------------------|


Netlify UI Build Settings UI |

_______________________________________________|

My problem was in the Netlify Build Settings UI.

I was incorrectly using UI= craco build for my build script. Netlify's build-bot didn't recognize the craco dependency. It does however recognize yarn or npm.
The final correct build step configuration was to just stick with 'npm run build' and have that call 'craco build', "underneath the hood".

Invalid Configuration:

|-------------------|--------------------|
| Base directory | ./ |
| Build command | CI= craco build |
| Publish directory | ./build |
|-------------------|--------------------|

  • isnt recognized by the build-bot

Valid Configuration:

|-------------------|--------------------|
| Base directory | ./ |
| Build command | CI= npm run build |
| Publish directory | ./build |
|-------------------|--------------------|

  • but is recognized

package.json scripts |

_______________________________________________|

  • simply replace all "react-scripts" with "craco" at least the start, build, & test scripts
  • "react-scripts start" would become "craco start"

e.g.:

"scripts": {

     "start": "craco start",
     "build": "craco build", 
     "start:proxy": "REACT_APP_PROXY=true craco start",
     "test": "craco test --env=jest-environment-jsdom-sixteen",
     "eject": "react-scripts eject",
     "prettier": "prettier --write \"**/*.+(js|jsx|json|css|md)\"",
     "coverage": "npm test -- --coverage --watchAll=false",
     "lint": "eslint 'src/**/*.{js,jsx}' --fix",
     "format": "prettier --write 'src/**/*.{js,jsx,css,scss}'",
     "storybook": "start-storybook",
     "deploy-storybook": "storybook-to-ghpages"
   }, 
Enter fullscreen mode Exit fullscreen mode

netlify.toml to allow react router redirects|

_______________________________________________|

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200
Enter fullscreen mode Exit fullscreen mode

errors from Netlify Build Logs |

_______________________________________________|


11:27:54 AM: $ CI=craco build
11:27:54 AM: bash: build: command not found
11:27:54 AM: ​
11:27:54 AM: ────────────────────────────────────────────────────────────────
11:27:54 AM:   "build.command" failed                                        
11:27:54 AM: ────────────────────────────────────────────────────────────────
11:27:54 AM: ​
11:27:54 AM:   Error message
11:27:54 AM:   Command failed with exit code 127: CI=craco build
11:27:54 AM: ​
11:27:54 AM:   Error location
11:27:54 AM:   In Build command from Netlify app:
11:27:54 AM:   CI=craco build
11:27:54 AM: ​
11:27:54 AM:   Resolved config
11:27:54 AM:   build:
11:27:54 AM:     command: CI=craco build
11:27:54 AM:     commandOrigin: ui
11:27:54 AM:     environment:
11:27:54 AM:       - REACT_APP_CLIENT_ID
11:27:54 AM:       - REACT_APP_GOOGLE_API
11:27:54 AM:       - REACT_APP_HEREAPI
11:27:54 AM:       - REACT_APP_MAPBOX_TOKEN
11:27:54 AM:       - REACT_APP_PS_ID
11:27:54 AM:       - SKIP_PREFLIGHT_CHECK
11:27:54 AM:   redirects:
11:27:55 AM:     - from: /*
      status: 200
      to: /index.html
Caching artifacts

Enter fullscreen mode Exit fullscreen mode

7:32:03 PM: ────────────────────────────────────────────────────────────────
7:32:03 PM:   1. Build command from Netlify app                             
7:32:03 PM: ────────────────────────────────────────────────────────────────
7:32:03 PM: ​
7:32:03 PM: $ craco build
7:32:05 PM: Creating an optimized production build...
7:33:26 PM: Failed to compile.
7:33:26 PM: 
7:33:26 PM: src/redux/reducers/rootReducer.js
7:33:26 PM:   Line 28:37:  Missing semicolon  semi
7:33:26 PM:   Line 36:38:  Missing semicolon  semi
7:33:26 PM: src/route_views/discover/searchlistings/listings/ListingCard.js
7:33:26 PM:   Line 48:73:  Missing semicolon  semi
7:33:26 PM: src/route_views/discover/searchlistings/listings/SingleListingView.js
7:33:26 PM:   Line 3:72:   Missing semicolon  semi
7:33:26 PM:   Line 7:53:   Missing semicolon  semi
7:33:26 PM:   Line 8:25:   Missing semicolon  semi
7:33:26 PM:   Line 9:22:   Missing semicolon  semi
7:33:26 PM:   Line 11:33:  Missing semicolon  semi
7:33:26 PM: src/route_views/discover/suggested_listings/SuggestedListings.js
7:33:26 PM:   Line 38:23:  Missing semicolon  semi
7:33:26 PM: src/utils/CalendarRangePicker.js
7:33:26 PM:   Line 15:3:   Missing semicolon  semi
7:33:26 PM:   Line 16:91:  Missing semicolon  semi
7:33:26 PM:   Line 20:27:  Missing semicolon  semi
7:33:26 PM: Search for the keywords to learn more about each error.
7:33:26 PM: ​
7:33:26 PM: ────────────────────────────────────────────────────────────────
7:33:26 PM:   "build.command" failed                                        
7:33:26 PM: ────────────────────────────────────────────────────────────────
7:33:26 PM: ​
7:33:26 PM:   Error message
7:33:26 PM:   Command failed with exit code 1: craco build
7:33:26 PM: ​
7:33:26 PM:   Error location
7:33:26 PM:   In Build command from Netlify app:
7:33:26 PM:   craco build
7:33:26 PM: ​
7:33:26 PM:   Resolved config
7:33:26 PM:   build:
7:33:26 PM:     command: craco build
7:33:26 PM:     commandOrigin: ui
7:33:26 PM:     environment:
7:33:26 PM:       - REACT_APP_CLIENT_ID
7:33:26 PM:       - REACT_APP_GOOGLE_API
7:33:26 PM:       - REACT_APP_HEREAPI
7:33:26 PM:       - REACT_APP_MAPBOX_TOKEN
7:33:26 PM:       - REACT_APP_PS_ID
7:33:26 PM:   redirects:
7:33:26 PM:     - from: /*
      status: 200
      to: /index.html
Caching artifacts

Enter fullscreen mode Exit fullscreen mode

Discussion (0)

pic
Editor guide