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

@Tryliom

This comment has been minimized.

Copy link

@Tryliom Tryliom commented Jun 28, 2018

But with that we can use with multiple domain ? On my web server I use 3 other sub-domain but when I change the Apache, it override all

@Ethaan

This comment has been minimized.

Copy link

@Ethaan Ethaan commented Oct 4, 2018

I got the same issue as Tryliom, did someone know what to do?

@danijel2017

This comment has been minimized.

Copy link

@danijel2017 danijel2017 commented Jan 11, 2019

That httpd conf content is not correct.
Please use this.

<IfModule mod_rewrite.c>
    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
</IfModule>
@HarieshJay

This comment has been minimized.

Copy link

@HarieshJay HarieshJay commented Mar 31, 2019

Does anyone know why running React on Apache gives me just a blank screen? I'm not even running something I made, just the demo that is created from create-react-app and then npm build.

Here is my web browser:
https://imgur.com/a/IDlSqMW

The error says that there is a problem in my manifest file. Here are the contents of it.

{
  "short_name": "React App",
  "name": "Create React App Sample",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}
@oliverll1

This comment has been minimized.

Copy link

@oliverll1 oliverll1 commented Jun 11, 2019

Does anyone know why running React on Apache gives me just a blank screen? I'm not even running something I made, just the demo that is created from create-react-app and then npm build.

Here is my web browser:
https://imgur.com/a/IDlSqMW

The error says that there is a problem in my manifest file. Here are the contents of it.

{
  "short_name": "React App",
  "name": "Create React App Sample",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

im assuming you added the homepage in the package.json before making the build for example:

"homepage": "http://localhost/build/",

@srbin25

This comment has been minimized.

Copy link

@srbin25 srbin25 commented Aug 4, 2019

@milnomada

This comment has been minimized.

Copy link

@milnomada milnomada commented Nov 4, 2019

Works great. Thanks for sharing.

@rahulbhadhoriya

This comment has been minimized.

Copy link

@rahulbhadhoriya rahulbhadhoriya commented Feb 13, 2020

Does anyone know why running React on Apache gives me just a blank screen? I'm not even running something I made, just the demo that is created from create-react-app and then npm build.

Here is my web browser:
https://imgur.com/a/IDlSqMW

The error says that there is a problem in my manifest file. Here are the contents of it.

{
  "short_name": "React App",
  "name": "Create React App Sample",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

did you find any solution for this?

@ontariokwasi

This comment has been minimized.

Copy link

@ontariokwasi ontariokwasi commented Apr 9, 2020

Does anyone know why running React on Apache gives me just a blank screen? I'm not even running something I made, just the demo that is created from create-react-app and then npm build.
Here is my web browser:
https://imgur.com/a/IDlSqMW
The error says that there is a problem in my manifest file. Here are the contents of it.

{
  "short_name": "React App",
  "name": "Create React App Sample",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

did you find any solution for this?

You should follow these steps:

  1. make sure to add "homepage": "http://domain.com/path-where-to-host-app/" to your package.json file
  2. Build the project: npm run build
  3. copy the content of the build folder to your server directory "path-where-to-host-app"
  4. visit your app url : http://domain.com/path-where-to-host-app/ - your page content should display
@Miodragt

This comment has been minimized.

Copy link

@Miodragt Miodragt commented Apr 9, 2020

Does anyone know why running React on Apache gives me just a blank screen? I'm not even running something I made, just the demo that is created from create-react-app and then npm build.

Here is my web browser:
https://imgur.com/a/IDlSqMW

The error says that there is a problem in my manifest file. Here are the contents of it.

{
  "short_name": "React App",
  "name": "Create React App Sample",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

the Icon must stored to public folder or delopmment folder there is all other files of your app. Part who you called start_url get absolute path and this is good. But in package.json file You must write some like this for develop "home":"." or on your host "home":"YourHost"

@bartolomeu

This comment has been minimized.

Copy link

@bartolomeu bartolomeu commented May 5, 2020

I've the changes in the /etc/httpd/conf/httpd.conf
but I needed to run

sudo a2enmod rewrite

to install the rewrite module on apache2

try avoid AllowOverride All
More details about why avoid in https://httpd.apache.org/docs/2.4/en/howto/htaccess.html

@Pegatron96

This comment has been minimized.

Copy link

@Pegatron96 Pegatron96 commented Jul 7, 2020

Thank you so much it work for me

@infinitbility

This comment has been minimized.

Copy link

@infinitbility 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

This comment has been minimized.

Copy link

@Zill-Saqee Zill-Saqee commented Aug 10, 2020

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

@bartolomeu

This comment has been minimized.

Copy link

@bartolomeu 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

This comment has been minimized.

Copy link

@Risyandi Risyandi commented Dec 6, 2020

Thanks, for sharing all. it's helpful.

@Miodragt

This comment has been minimized.

Copy link

@Miodragt 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

This comment has been minimized.

Copy link

@MagnesiaReal 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

This comment has been minimized.

Copy link

@srbin25 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

This comment has been minimized.

Copy link

@lorecast 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

This comment has been minimized.

Copy link

@venkatesh-candela venkatesh-candela commented Jan 26, 2021

Thank you so much
it perfectly worked for me

@AndrejGajdos

This comment has been minimized.

Copy link

@AndrejGajdos 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.

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