Create React App build does not work correctly

Question

Hi I am new developer at CRA. I have a project and I had created it with create react app. When I use run npm run build, It can not set home page which has only a button for test. I added react-router-dom and homepage:"./" in my package.json. In localhost I can use and see everything correctly but when try it with npm run build , I can't reach anything and build shows me empty page. What should I do? Do you have an advice to me ? I dont know anything whether everything works correctly.

App.Tsx:

 import React from 'react';
    import { Route, Switch,BrowserRouter } from 'react-router-dom';
    import HomeDashboard from './containers/Home' 
    
    function App() {
      return (
        <div className="App">
          <BrowserRouter>
          <Switch>
            <Route exact path="/home" component={HomeDashboard}></Route>
            <Route exact path="/" component={HomeDashboard}></Route>
          </Switch>
          </BrowserRouter>
        </div>
      );
    }
    export default App;

package.json :

 {
      "name": "test",
      "version": "0.1.0",
      "private": true,
      "homepage": "./",
      "dependencies": {
        "@types/react-dom": "^16.9.8",
        "@types/react-router-dom": "^5.1.5",
        "react": "^16.13.1",
        "react-dom": "^16.13.1",
        "react-router-dom": "^5.2.0",
        "react-scripts": "3.4.3",
        "typescript": "^3.9.7"
      },
      "scripts": {
        "build": "react-scripts build",
      },
      "eslintConfig": {
        "extends": "react-app"
      },
      
    }

build folder:

I think this is because you need to serve it to see it properly — marsnebulasoup
– marsnebulasoup, Commented Sep 29, 2020 at 12:34
Try installing serve with npm install -g serve and then serve your build directory with serve -s build — marsnebulasoup
– marsnebulasoup, Commented Sep 29, 2020 at 12:36

Philip Feldmann · Accepted Answer · 2020-09-29 12:57:26Z

4

This is expected. Your built index.html refers to all javascript and css files by an absolute link, which will not work if you just open it on your machine. You have to serve it from a server. Locally you could use the serve npm package for that:

npm install -g serve
cd ./build
serve .

edited Sep 29, 2020 at 12:57

answered Sep 29, 2020 at 12:37

Philip Feldmann

8,5037 gold badges47 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Emre Sert Over a year ago

There is no folder like dist i did not see on my directory. Why?

Philip Feldmann Over a year ago

Sorry, in your case it's called build

Tasos · Accepted Answer · 2020-09-29 13:15:22Z

1

The npm run build command simply compiles your react application to pure html, javascript, css.
It does not serve it on your localhost or somewhere else. You can see the built app by opening the /build/index.html with a browser, but this may not work due to realtive paths, routing and cors policies.

You can follow the instructions in the docs and use serve to serve it: https://create-react-app.dev/docs/deployment/

edited Sep 29, 2020 at 13:15

answered Sep 29, 2020 at 12:38

Tasos

2,06516 silver badges19 bronze badges

1 Comment

Emre Sert Over a year ago

Thank you for document. I will follow it in deployment process.

Noud · Accepted Answer · 2022-01-29 08:08:14Z

0

A little late to the party.
I ran into the same problem trying to deploy the application on gh-pages.
This solution worked for me.

Added to my package.json:

"homepage": "https://{username}.github.io/projectname/",

Added basename to the Router component (BrowserRouter as Router):

<Router basename="/projectname">

edited Jan 29, 2022 at 8:08

answered Jan 29, 2022 at 8:02

Noud

1459 bronze badges

Collectives™ on Stack Overflow

Create React App build does not work correctly

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related