create-react-app npm run build command

Question

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.

Answer 1

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

Answer 2

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.

Answer 3

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.