How to deploy and host react app on Apache server

Anurag
June 14, 2019
142 views
2 votes
3 Answers

I have created a dashboard by using “React js” for Frontend and “Node js” for Backend. Now the project is completed, I need to deploy and host this project on Apache server.
I have tried by running the “npm run build” then copying all the files of build folder to the server but still its not running.

Error: The requested URL /Dashboard was not found on this server

So can anyone help me out with this ? Because I am new to these whole web development stuff.
If anyone tell me what are the configurations needed to make this happen, it will be helpful a lot.

package.json

{
  "name": "eclaims",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "alert-node": "^1.2.4",
    "await": "^0.2.6",
    "axios": "^0.18.0",
    "browser-history": "^1.0.1",
    "canvasjs": "^1.8.1",
    "chart.js": "^2.8.0",
    "cors": "^2.8.5",
    "express-redirect": "^1.2.2",
    "history": "^4.9.0",
    "http-serve": "^1.0.1",
    "mdbreact": "^4.14.0",
    "oracledb": "^3.1.2",
    "passport": "^0.4.0",
    "passport-local": "^1.0.0",
    "react": "^16.8.6",
    "react-background-image-loader": "0.0.5",
    "react-bootstrap": "^0.32.4",
    "react-canvas-js": "^1.0.1",
    "react-chartjs-2": "^2.7.6",
    "react-dom": "^16.8.6",
    "react-dropdown": "^1.6.4",
    "react-dropdown-button": "^1.0.11",
    "react-native": "^0.59.8",
    "react-router": "^5.0.0",
    "react-router-bootstrap": "^0.25.0",
    "react-router-dom": "^4.3.1",
    "react-router-redirect": "^1.0.1",
    "react-scripts": "2.1.8",
    "react-select": "^2.4.3",
    "reactstrap": "^8.0.0",
    "redirect": "^0.2.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

I also tried by creating the “.htaccess” file:

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

But still no luck.

Answers

- johnsing
- June 18, 2019 at 8:21 pm
- 0 votes
0
I’ve followed certain steps from this post from Reddit and I can attest this works for making SPAs run in Apache web server with proper routing.

To quote:
1) In the apache2.conf located in etc/apache2/ I turned AllowOverride to All. I also added Servername localhost in the file. (I somehow skipped this last sentence, but still it worked fine in the end)
```
<Directory /var/www/>
    Options Indexes FollowSymLinks
    AllowOverride All
    Require all granted
</Directory>
```
2) In the hosts.debian.tmpl file found in /etc/cloud/templates I added 127.0.0.1 <yourdomain.com> to the file where the other ips of the similiarity are.
```
127.0.0.1 yourdomain.com
```
3) I ran sudo a2enmod rewrite. Then I restarted the apache server via service apache2 restart. This turns on mod_rewrite.

Lastly inside of my project folder /var/www/html , along side my index.html file I created a .htaccess file and added in the following:
```
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule ^.*$ / [L,QSA]
```
Assuming you’ve run npm run build and then copied all the contents inside the build folder to your public directory, this should work.

When I first started web dev, I wasn’t really sure I made the VirtualHost config right, so what I usually did was first to make a dummy index.html with, say, Hello World example. When I’ve confirmed that I’m able to see Hello World in the browser (which means I got the VirtualHost config right), I dump the contents of the build folder to where the dummy index.html was.
Login or Signup to reply.

- movcmpret
- October 5, 2020 at 4:23 pm
- 0 votes
0
My Solution:

Apache:

I am running an Apache Server with multiple React-Apps, that are accessible by Aliases, as e.g. /abc/app/ or xyz/app/. For that paths, i adjusted the <Directory>...</Directory> area inside my virtual hosts config:
```
<VirtualHost *:443>
RewriteEngine On

    Alias /abc/app "/var/www/abc"
    Alias /xyz/app "/var/www/xyz"

    <Directory "/var/www/abc">
      Options Indexes FollowSymLinks
      AllowOverride All
      Require all granted
     </Directory>


    <Directory "/var/www/xyz">
      Options Indexes FollowSymLinks
      AllowOverride All
      Require all granted
     </Directory>

    [...]

</VirtualHost *:443>
```
Additionally, I added the following into /var/www/abc/.htaccess according to the React Docs:
```
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
```
React Router > 4:

But most importantly I adjusted my package.json and .env files. If you use environment files, you can add the following lines (obv adjusted with your path) to your production or release environment files:
```
PUBLIC_URL=https://link.to.your.page/abc/app/
REACT_APP_ROOT_PATH=/abc/app
```
Don’t rename PUBLIC_URL. You can change everything after REACT_APP_

Delete the homepage line from your package.json

Alternatively, if you don’t work with .env files, you might adjust your homepage line in the package.json like so:
```
 "homepage":"link.to.your.page/abc/app/"
```
In your index.js, or where ever you use BrowserRouter or Router, you alter your code like so:
```
 let PATH = process.env.REACT_APP_ROOT_PATH // Or, if you prefer it hard coded "/abc/app"
 <BrowserRouter basename={PATH} > <App/> </BrowserRouter>
```
Login or Signup to reply.