How to deploy a React App on Apache web server

I have created a basic React App from https://www.tutorialspoint.com/reactjs/reactjs_jsx.htm here , I want to run this test code on Apache based server, I know that I need to create a distributable build but I am not able to figure out how to do that and couldnt find clear instructions.

I have seen this post React,js on Apache server but it doesn't have anything more than few guidelines

Answers:

Go to your project root directory cd example /home/ubuntu/react-js
Build your project first npm run build
check your build directory gracefully all the files will be available in the build folder.

asset-manifest.json

favicon.ico

manifest.json

robots.txt

static assets

index.html

precache-manifest.ddafca92870314adfea99542e1331500.js service-worker.js

4.copy the build folder to your apache server i.e /var/www/html

sudo cp -rf build /var/www/html

go to sites-available directory

cd /etc/apache2/sites-available/
open 000-default.conf file

sudo vi 000-default.conf and rechange the DocumentRoot path

enter image description here
Now goto apache conf.

cd /etc/aapche2

sudo vi apache2.conf

add the given snippet

<Directory /var/www/html>

            Options Indexes FollowSymLinks

            AllowOverride All

            Require all granted

    </Directory>

make a file inside /var/www/html/build

sudo vi .htaccess

Options -MultiViews
    
RewriteEngine On
    
RewriteCond %{REQUEST_FILENAME} !-f

RewriteRule ^ index.html [QSA,L]

9.sudo a2enmod rewrite

10.sudo systemctl restart apache2

restart apache server

sudo service apache2 restart

thanks, enjoy your day

As well described in React's official docs, If you use routers that use the HTML5 pushState history API under the hood, you just need to below content to .htaccess file in public directory of your react-app.

Options -MultiViews
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.html [QSA,L]

And if using relative path update the package.json like this:

"homepage": ".",

Note: If you are using [email protected]^4, you can root <Link> using the basename prop on any <Router>.

import React from 'react';
import BrowserRouter as Router from 'react-router-dom';
...
<Router basename="/calendar"/>
<Link to="/today"/>

How to deploy a React App on Apache web server

Answers:

Tags

Recent Questions

Top Questions