The configuration settings for a create-react-app on Netlify are: Build Command: npm run build and Publish Directory: ./build

Modern Cloud Hosting

One of the most exciting parts of web development is that you can get your creation in front of anyone in the world (providing they have a connected device) in a matter of minutes, seconds in many cases. This cross-platform, cross-border availability in incredible, and gets easier and easier as time goes on. Back in my day, a.k.a. for all the websites I've built prior to this year, I simply built the site on my computer, popped open Cyberduck (and FTP GUI I've had installed since... college maybe?), and literally drag and drop my website onto my Hostgator server.

This worked fine, but missed out on so many of the benefits of modern web workflows, notably:

• using git for version control, to keep track in minute details every new feature and breaking change
• using GitHub for team collaboration, open-sourced edits, cloud storage of files, and with Netlify: one click CI/CD (continuous integration, continuous deployment)
• hosting sites built with more complicated frameworks and servers

Even better, nearly all of newer cloud hosting solutions offer free versions, so it's very easy to toss something up just to try it out. This is especially helpful for seeing how sites look on actual mobile apps, and for having friends and colleagues help check your site's cross-browser compatibility. There are so many options, each with tis own strengths and weaknesses. Some popular options include GitHub Pages and Vercel, and I've personally had success using Render, Heroku and Netlify.

Netlify Setup

Netlify does a lot of things right; the design is clean and modern, the UI is friendly and pretty straightforward, despite being a pretty technical process that their target demographic will be brand new to many of its users. They provide lots of helpful advice, along with full page articles walking you through various issues. That being said, their common setup configurations does not explicitly include the information needed for deploying a simple create-react-app project. I understand now they give some general advice on setting up JavaScript SPAs, however my first time trying to deploy I didn't know:

1. what SPA even meant
2. what my build settings were, or how they would even work if I knew what they were
3. publish settings.... same deal. I thought i was publishing to Netlify!

So, dear reader, having stumbled my way through several deploys and eventually getting everything up and running (and assisting my buddy JC in launching his portfolio), I thought I would provide you with some answers! Note to future self that will certainly be referencing this blog post: you're doing great! 😉

Create-React-App Netlify Configuration

• Build Command: npm run build
• Publish Directory: ./build

Common Errors (and Some Fixes)

I ran into a whole bunch of various errors, so hopefully it'll be helpful for me to list out the top offenders and then outline how I fixed them.

• Your Code Compiles With Warnings, Deploy Failed

10:36:13 PM: Treating warnings as errors because process.env.CI = true.
10:36:13 PM: Most CI servers set it automatically.
10:36:13 PM: Failed to compile.

If your deploy fails with that message (you can click on the deploy status message on Netlify.com to see the logs), it's because those yellow warnings that React was giving you in the dev tools are being taken VERY seriously by Netlify's compiler. For me, my little React-Tac-Toe game was compiling with both the unused vars and React Hook useEffect has a missing dependency warnings. Using CI='' npm run build instead of the normal npm run build tells Netlify to chill, and to just build it anyways.

To fix, use Build Command: CI='' npm run build

• Deploy Failed, Can't Find Your package.json Because Your App is in a Child Folder

1:49:32 PM: npm ERR! enoent ENOENT: no such file or directory, open '/opt/build/repo/package.json'
1:49:32 PM: npm ERR! enoent This is related to npm not being able to find a file.

This error has plagued me several times, and was also the main issue preventing JC's deployment this afternoon. The problem occurs when you have you .git repository on the floor of your project folder, but your package.json (and likely your entire create-react-app) inside a sub folder, and not on the same level as that hidden git file. These are two main reasons this problematic folder structure pops up in my experience:

• you start a new project using mkdir MY_APP, cd MY_APP into it, run git init to setup git tracking, and then run `npx create-react-app MY_CREATE_REACT_APP, which will build the spinning aqua atom in a child folder
• this gets even more confusing to debug when you're simply looking at your files using ls, which does not show hidden files. .git is a hidden file, so you must use ls -a or similar to see where your local git repo is actually living

**FOLDER STRUCTURE CAUSING ERROR**
- MY_APP
     - .git
     - MY_CREATE_REACT_APP          <---BAD NEWS!
          - App.js
          - package.json
         (more files...)

**FIXED FOLDER STRUCTURE**
- MY_APP
     - .git
     - App.js
     - package.json
     (more files...)

I'm including the entire error message here, so that future-me can easily find this post by googling my error message lol.

1:49:32 PM: $ npm run build
1:49:32 PM: npm ERR! code ENOENT
1:49:32 PM: npm ERR! syscall open
1:49:32 PM: npm ERR! path /opt/build/repo/package.json
1:49:32 PM: npm ERR! errno -2
1:49:32 PM: npm ERR! enoent ENOENT: no such file or directory, open '/opt/build/repo/package.json'
1:49:32 PM: npm ERR! enoent This is related to npm not being able to find a file.
1:49:32 PM: npm ERR! A complete log of this run can be found in:
1:49:32 PM:   "build.command" failed                                       
1:49:32 PM:   Command failed with exit code 254: npm run build
1:49:32 PM:   Error location
1:49:32 PM:   In Build command from Netlify app:
1:49:32 PM:   npm run build
1:49:35 PM: Build failed due to a user error: Build script returned non-zero exit code: 2
1:49:35 PM: Failed during stage 'building site': Build script returned non-zero exit code:

To fix, move all your React files from the inner folder to the outer folder.

• cd your way into the parent folder of MY_APP
• extract your regular files: mv MY_APP/MY_CREATE_REACT_APP/* MY_APP/
• extract your hidden files (those starting with a .) mv YOUR_PROJECT_FOLDER/PROBLEMATIC_INNER_FOLDER/.* YOUR_PROJECT_FOLDER/
• Confirm everything looks good with an ls -a
• Finally, don't forget to delete the (now duplicate) inner folder and its files

Since deployment on Heroku, Netlify, and many other services is git-based, it's important that your app knows where it is in relation to the local git repo. By default, it will expect the package.json to be in the same folder (not a sub-folder) as your .git repo.

Summary

Well, there was a lot of error messages! Hopefully some of this helped, and if not please let me know in the comments! I'm trying to keep track of these types of issues and include them (and the solutions I find) as I encounter them. Currently I'm having an issue with the GitHub integrated continuous deployment of my Jr Dev Flashcards app, which is using Tailwind and some craco commands in the package.json. Strangely, I can manually deploy the app using the Netlify CLI, it's simply the GitHub auto deploy that isn't working. Let me know if you have a solution here!