# Deploying a Create-React-App to Netlify > 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](https://docs.netlify.com/configure-builds/common-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](https://jctech.blog/)), 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` ![proper build settings on netlify GUI](https://cdn.hashnode.com/res/hashnode/image/upload/v1617764561317/j2vTrlnPq.png) ### 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](https://blog.benhammond.tech/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` ![view deploy logs by clicking each deployment row](https://cdn.hashnode.com/res/hashnode/image/upload/v1617764608097/3901zyLQd.png) - #### 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 ``` text **FOLDER STRUCTURE CAUSING ERROR** - MY_APP - .git - MY_CREATE_REACT_APP <---BAD NEWS! - App.js - package.json (more files...) ``` ``` text **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](https://blog.benhammond.tech/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!