create-react-app npm run build command

问题:

I have a built a small React application with create-react-app, and it runs fine from the local server after running npm start. OK so far.

However, when I run npm run build, the process appears to execute correctly (creates build folder, which contains the bundled js file and the index.html file), but when I open index.html in my browser it renders nothing. What am I missing?

---

Aside: I also tried uploading it to a remote server and when I went to the URL the browser came back with...

Forbidden: You don't have permission to access / on this server.

...if anyone has any idea how to resolve this I'd also appreciate it.

回答1:

However, when I run npm run build, the process appears to execute correctly (creates build folder, which contains the bundled js file and the html.index file), but when I open index.html in my browser it renders nothing. What am I missing?

When you run npm run build, it prints the relevant instructions:

You can’t just open index.html because it is supposed to be served with a static file server.
This is because most React apps use client-side routing, and you can’t do that with file:// URLs.

In production, you can use Nginx, Apache, Node (e.g. Express), or any other server to serve static assets. Just make sure that if you use client-side routing, you serve index.html for any unknown request, like /*, and not just for /.

In development, you can use pushstate-server for this. It works with client-side routing well. This is exactly what the printed instructions suggest you to do.

I also tried uploading it to a remote server and when I went to the URL the browser came back with Forbidden: You don't have permission to access / on this server.

You need to upload the contents of the build folder, not the build folder itself. Otherwise the server can’t find your index.html because it is inside build/index.html, and so it fails. If your server doesn’t detect a top-level index.html, please refer to your server’s documentation on configuring files served by default.

回答2:

Here You can solve this problem in 2 possible ways.

1.Change the routing history to "hashHistory" instead of browserHistory in the place of

 <Router history={hashHistory} >
   <Route path="/home" component={Home} />
   <Route path="/aboutus" component={AboutUs} />
 </Router>

Now build the app using the command

sudo npm run build

Then place the build folder in your var/www/ folder, Now the application is working fine with addition of # tag in each and every url. like

localhost/#/home localhost/#/aboutus

Solution 2 : Without # tag using browserHistory,

Set your history = {browserHistory} in your Router,Now build it using sudo npm run build.

You need to create the "conf" file to solve the 404 not found page, the conf file should be like this.

open your terminal type the below commands

cd /etc/apache2/sites-available ls nano sample.conf Add the below content in it.

 <VirtualHost *:80>
    ServerAdmin admin@0.0.0.0
    ServerName 0.0.0.0
    ServerAlias 0.0.0.0
    DocumentRoot /var/www/html/

    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined
    <Directory "/var/www/html/">
            Options Indexes FollowSymLinks
            AllowOverride all
            Require all granted
    </Directory>
</VirtualHost>

Now you need to enable the sample.conf file by using the following command

cd /etc/apache2/sites-available
sudo a2ensite sample.conf

then it will ask you to reload the apache server,using sudo service apache2 reload or restart

then open your localhost/build folder and add the .htaccess file with content of below.

   RewriteEngine On
   RewriteBase /
   RewriteCond %{REQUEST_FILENAME} !-f
   RewriteCond %{REQUEST_FILENAME} !-d
   RewriteCond %{REQUEST_FILENAME} !-l
   RewriteRule ^.*$ / [L,QSA]

Now the app is working normally.

Note: change 0.0.0.0 ip to your local ip address.

I hope it is helpful to others.

回答3:

I tried to run the same command and react app was also showing white screen. main js file was taking the relative path to the file and showing error when I open js file in new browser "Your file was not found" I make it to absolute path and its working fine.

回答4:

you can't run the production build by clicking on index.html, you have to modify your script like bellow.

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "deploy": "serve -s build"
  }

after running npm run-script build, run npm run-script deploy, you will get some thing like this, this is where you can load your production build.

npm install -g serve before run npm run-script deploy.

回答5:

'Web Server for Chrome' extension is super easy to use. Install it and set the directory to the ~/my-react-app/build/

回答6:

1. cd to your build folder,
2. python -m SimpleHTTPServer 8080 to start a server on port 8080,
3. go to address localhost:8080/index.html in your browser.

回答7:

After building your application through create-react-app create-react-app

Run command npm run build After that run command npm install -g serve & finally serve -s build

More detailed information can be found from here create-react-app-deployment