Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Host react application on Apache server

Host react application on Apache server

Step 1 : Create your app

$ npm install -g create-react-app 
$ create-react-app my-app

Step 2 : Build it for production

$ cd my-app
$ npm run build

Step 3 : deploy

  • copy and paste everything in build folder to your server
  • edit /etc/httpd/conf/httpd.conf
<Directory "/var/www/html">
    ...
    AllowOverride All
    ...
</Directory>
  • create a “.htaccess” file in html directory and add this snippet :
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

or edit /etc/httpd/conf/httpd.conf

<Directory "/var/www/html">
    #
    # Possible values for the Options directive are "None", "All",
    # or any combination of:
    #   Indexes Includes FollowSymLinks SymLinksifOwnerMatch ExecCGI MultiViews
    #
    # Note that "MultiViews" must be named *explicitly* --- "Options All"
    # doesn't give it to you.
    #
    # The Options directive is both complicated and important.  Please see
    # http://httpd.apache.org/docs/2.4/mod/core.html#options
    # for more information.
    #
    Options Indexes FollowSymLinks

    #
    # AllowOverride controls what directives may be placed in .htaccess files.
    # It can be "All", "None", or any combination of the keywords:
    #   Options FileInfo AuthConfig Limit
    #
    AllowOverride All

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

    #
    # Controls who can get stuff from this server.
    #
    Require all granted
</Directory>

Reference

Host react application on Apache server

@infinitbility
Copy link

infinitbility commented Aug 9, 2020

Created Document on Deploy React Application on apache and also discuss on some issues

https://infinitbility.com/deploy-react-application-on-ubuntu-apache

@Zill-Saqee
Copy link

Zill-Saqee commented Aug 10, 2020

can anybody guide regarding adding ssl to react app on apache server?

@bartolomeu
Copy link

bartolomeu commented Aug 26, 2020

It's just add SSL to apache, react doesn't influence on SSL

*PS.: By the way take care to React make only safe requests (in HTTPS servers) to avoid lose the "safety icon" on browser

@Risyandi
Copy link

Risyandi commented Dec 6, 2020

Thanks, for sharing all. it's helpful.

@Miodragt
Copy link

Miodragt commented Dec 7, 2020

But, exists one more problem. This is port there setup React app. Default is port 3000, but Apache work on port 80, and in configuration for Apache server must set Proximity how you can show React app.

@MagnesiaReal
Copy link

MagnesiaReal commented Jan 8, 2021

Created Document on Deploy React Application on apache and also discuss on some issues

https://infinitbility.com/deploy-react-application-on-ubuntu-apache

it's working, thankyou

@srbin25
Copy link

srbin25 commented Jan 19, 2021

You can see my repository https://github.com/srbin25/Express-react-app , where you can add more componetes in react app and if you run npm start you gete all app on port 80. After command npm init you must make node - express server file like me. There get
// config port of server
const port = process.env.PORT || 80;

And when you run npm start you can get all file who you can copy on your host. But, for image or other file like this you must get here src links for him. Like is img src="http://localhost/path-where-is-your-file/name.ext" .
In this example local host there your need files is folder dist like root folder. That say code from file webpack.config.js
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},

@lorecast
Copy link

lorecast commented Jan 23, 2021

Created Document on Deploy React Application on apache and also discuss on some issues

https://infinitbility.com/deploy-react-application-on-ubuntu-apache

Thank you so much it works for me

@venkatesh-candela
Copy link

venkatesh-candela commented Jan 26, 2021

Thank you so much
it perfectly worked for me

@AndrejGajdos
Copy link

AndrejGajdos commented May 11, 2021

@Miodragt React uses port 3000 for dev mode. For production, you need to build the project, which generates your index.html with .js bundle and other assets. Then, you can make it available through Apache virtualhost and port 80/443.

@jiro2017
Copy link

jiro2017 commented Dec 16, 2021

If you are reading this and it hasn't work for you, all you need to do is to change "private": true to "private": false in your package.json file before you run npm run build and remove the "homepage" object in your package.json as it is no longer necessary.

@denrolya
Copy link

denrolya commented Feb 19, 2022

Can somebody please explain me how to save query string between reloads?

@saiful-shaakil
Copy link

saiful-shaakil commented Sep 9, 2022

Created Document on Deploy React Application on apache and also discuss on some issues

https://infinitbility.com/deploy-react-application-on-ubuntu-apache

Hello,
I'm trying to host my react app on Namecheap (which eventually uses apache server, knew from google). I'm also facing problem with blank page. How can I fix this? And where should I run those commands which you shared on your documentation? Any idea?

@Miodragt
Copy link

Miodragt commented Sep 10, 2022

@RawrBear
Copy link

RawrBear commented Nov 19, 2022

RewriteEngine On # If an existing asset or directory is requested go to it as it is RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR] RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d RewriteRule ^ - [L] # If the requested resource doesn't exist, use index.html RewriteRule ^ /index.html

Thank you! This worked perfectly!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment