Build Command for React

Hi.
I’m new to React and Netlify,

In Create Site I’m no part 3. * Build options, and deploy!:

What’s the Build command and Publish directory for react?

Basic build settings

If you’re using a static site generator or build tool, we’ll need these settings to build your site. Learn more in the docs

Build command

Publish directory

hi @acrainier1,

are you 1. using a static site generator such as gatbsy, hugo, or similar to build your site? Or 2. do you just have a react-backed-app that you are creating “by hand”?

You only need a build command if you are using a tool to generate your pages that has to run before they can be viewed. Does that make sense?

Hi Perry. Thanks for the reply.

It’s a npx create-react-app (vs code). I get these messages:

7:20:47 PM: Build ready to start

7:20:54 PM: build-image version: 6b66e79d54a8f76b01392124644c3052ac0d32ef

7:20:54 PM: build-image tag: v3.3.6

7:20:54 PM: buildbot version: 2ba6f2db8150441c8469e6ae3ab3561a2c9d03fa

7:20:54 PM: Fetching cached dependencies

7:20:55 PM: Failed to fetch cache, continuing with build

7:20:55 PM: Starting to prepare the repo for build

7:20:55 PM: No cached dependencies found. Cloning fresh repo

7:20:55 PM: git clone https://github.com/acrainier1/jpnProject

7:21:01 PM: Preparing Git Reference refs/heads/master

7:21:03 PM: No build command found, continuing to publishing

7:21:03 PM: Starting to deploy site from ‘/’

7:21:05 PM: Failing build: Failed to deploy site

7:21:05 PM: failed during stage ‘deploying site’: Invalid filename ‘frontend_react_app/node_modules/es5-ext/string/#/repeat/is-implemented.js’. Deployed filenames cannot contain # or ? characters

7:21:05 PM: Finished processing build request in 10.751747372s

Hi, @acrainier1, would you please test adding your build command to the settings here?

https://app.netlify.com/sites/peaceful-ride-f14728/settings/deploys#build-settings

If that doesn’t resolve the issue, please let us know.

Thanks Luke. So I was able to deploy but still no website.

https://peaceful-ride-f14728.netlify.com/

This is the react app on github. jpnProject/frontend_react_app is the directory inside where all the React stuff is (src/, package.json etc…)

Hi, @acrainier1. I believe the issue is that the content for the site is found under “public”. I added this as the publish directory and then triggered a new deploy.

The base URL is returning HTML now, but additional assets on that page return a 404. However, with index.html now loading there is more information and a new issue to troubleshoot. It’s getting closer to a working site though.

If there are other questions, please reply anytime.

I appreciate the help. Changed name to japanprime.netlify.com

(1) From which branch did you redeploy? Master?
feature/middle-end is most up-to-date but any will do.

(2) I see the build/ folder and the public/ folder have similar files. Should we be using build/?

can you link or paste your most recent build log please?

https://app.netlify.com/sites/japanprime/deploys/5e6f41732b256a733b1c264a

alright, so your site has some things that are flagged by the linter but it does build, so, this is likely a build settings issue. can you post a screenshot of your build settings please?

Build settings

Repository:

Base directory:
frontend_react_app

Build command:
npm run build

Publish directory:
frontend_react_app/ build

Deploy log visibility:
Public logs
Anyone with a deploy detail URL will be able to access the logs.
Private logs
Only site administrators will be able to access the logs.

ok cool. can you also share your package.json too please?

1 Like

Hi, @acrainier1, it looks like you have it working now. It seems I gave incorrect information about the publish directory needing to be “public”. I think the correct setting is “build” and I see you have already made that change.

The only other thing that comes to mind is that many single page apps (SPAs) require a redirect rule to send all quests to the main page which handles routing in javascript. There is more about that SPA rule here:

​Please let us know if there are other questions. That is an awesome website too, by the way! :+1:

1 Like

Thanks Luke and Perry. It’s working.

1 Like