How to deploy a React App on Apache web server

I have created a basic React App from 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

9 Answers

Firstly, in your react project go to your package.json and adjust this line line of code to match your destination domain address + folder:

"homepage": "", 

Secondly, go to terminal in your react project and type:

npm run build 

Now, take all files from that newly created build folder and upload them into your_folder_name, with filezilla in subfolder like this:

public_html/your_folder_name 

Check in the browser!

Ultimately was able to figure it out , i just hope it will help someone like me.
Following is how the web pack config file should look like check the dist dir and output file specified. I was missing the way to specify the path of dist directory

const webpack = require('webpack'); const path = require('path'); var config = { entry: './main.js', output: { path: path.join(__dirname, '/dist'), filename: 'index.js', }, devServer: { inline: true, port: 8080 }, resolveLoader: { modules: [path.join(__dirname, 'node_modules')] }, module: { loaders: [ { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader', query: { presets: ['es2015', 'react'] } } ] }, } module.exports = config; 

Then the package json file

{ "name": "reactapp", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "webpack --progress", "production": "webpack -p --progress" }, "author": "", "license": "ISC", "dependencies": { "react": "^15.4.2", "react-dom": "^15.4.2", "webpack": "^2.2.1" }, "devDependencies": { "babel-core": "^6.0.20", "babel-loader": "^6.0.1", "babel-preset-es2015": "^6.0.15", "babel-preset-react": "^6.0.15", "babel-preset-stage-0": "^6.0.15", "express": "^4.13.3", "webpack": "^1.9.6", "webpack-devserver": "0.0.6" } } 

Notice the script section and production section, production section is what gives you the final deployable index.js file ( name can be anything )

Rest fot the things will depend upon your code and components

Execute following sequence of commands

npm install

this should get you all the dependency (node modules)

then

npm run production

this should get you the final index.js file which will contain all the code bundled

Once done place index.html and index.js files under www/html or the web app root directory and that's all.

1. Go to your project root directory, e.g.: cd /home/ubuntu/react-js.
2. Build your project first: npm run build.
3. Check your build directory, all of the following 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

5. Go to sites-available directory:

   cd /etc/apache2/sites-available/

6. Open the 000-default.conf file:

sudo vi 000-default.conf and rechange the DocumentRoot path to /var/www/html/build.

7. Now go to the Apache configuration.

cd /etc/apache2

sudo vi apache2.conf

Add the following snippet:

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

8. 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. Restart Apache server:

   sudo service apache2 restart

Before making the npm build,
1) Go to your React project root folder and open package.json.
2) Add "homepage" attribute to package.json

• if you want to provide absolute path

  "homepage": "", "name": "react-app", "version": "1.1.0", 

• if you want to provide relative path

  "homepage": "./", "name": "react-app", 

  Using relative path method may warn a syntax validation error in your IDE. But the build is made without any errors during compilation.

3) Save the package.json , and in terminal run npm run-script build
4) Copy the contents of build/ folder to your server directory.

PS: It is easy to use relative path method if you want to change the build file location in your server frequently.

As said in the post, React is a browser based technology. It only renders a view in an HTML document.

To be able to have access to your "React App", you need to:

1. Bundle your React app in a bundle
2. Have Apache pointing to your html file in your server, and allowing access externally.

You might have all the informations here: for the Apache server, and here to make your javascript bundle

You can run it through the Apache proxy, but it would have to be running in a virtual directory (e.g. ).

This may seem sort of redundant but if you have other pages that are not part of your React app (e.g. PHP pages), you can serve everything via port 80 and make it apear that the whole thing is a cohesive website.

1.) Start your react app with npm run, or whatever command you are using to start the node server. Assuming it is running on

2.) Edit httpd-proxy.conf and add:

ProxyRequests On ProxyVia On <Proxy *> Order deny,allow Allow from all </Proxy> ProxyPass /myreactapp ProxyPassReverse /myreactapp 

3.) Restart Apache

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 add 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 react-router@^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"/> 

First, add a pom.xml and make it a maven project and then build it. It will create a War file for you in the target folder after that you can deploy it wherever you want.

pom.xml "> 4.0.0 it.megadix create-react-app-servlet 0.0.1-SNAPSHOT war

<properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> <npm.output.directory>build</npm.output.directory> </properties> <build> <finalName>${project.artifactId}</finalName> <plugins> <!-- Standard plugin to generate WAR --> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-war-plugin</artifactId> <version>2.1.1</version> <configuration> <webResources> <resource> <directory>${npm.output.directory}</directory> </resource> </webResources> <webXml>${basedir}/web.xml</webXml> </configuration> </plugin> <plugin> <groupId>org.codehaus.mojo</groupId> <artifactId>exec-maven-plugin</artifactId> <version>1.3.2</version> <executions> <!-- Required: The following will ensure `npm install` is called before anything else during the 'Default Lifecycle' --> <execution> <id>npm install (initialize)</id> <goals> <goal>exec</goal> </goals> <phase>initialize</phase> <configuration> <executable>npm</executable> <arguments> <argument>install</argument> </arguments> </configuration> </execution> <!-- Required: The following will ensure `npm install` is called before anything else during the 'Clean Lifecycle' --> <execution> <id>npm install (clean)</id> <goals> <goal>exec</goal> </goals> <phase>pre-clean</phase> <configuration> <executable>npm</executable> <arguments> <argument>install</argument> </arguments> </configuration> </execution> <!-- Required: This following calls `npm run build` where 'build' is the script name I used in my project, change this if yours is different --> <execution> <id>npm run build (compile)</id> <goals> <goal>exec</goal> </goals> <phase>compile</phase> <configuration> <executable>npm</executable> <arguments> <argument>run</argument> <argument>build</argument> </arguments> </configuration> </execution> </executions> <configuration> <environmentVariables> <CI>true</CI> <!-- The following parameters create an NPM sandbox for CI --> <NPM_CONFIG_PREFIX>${basedir}/npm</NPM_CONFIG_PREFIX> <NPM_CONFIG_CACHE>${NPM_CONFIG_PREFIX}/cache</NPM_CONFIG_CACHE> <NPM_CONFIG_TMP>${project.build.directory}/npmtmp</NPM_CONFIG_TMP> </environmentVariables> </configuration> </plugin> </plugins> </build> <profiles> <profile> <id>local</id> <activation> <activeByDefault>true</activeByDefault> </activation> <build> <plugins> <plugin> <groupId>org.codehaus.mojo</groupId> <artifactId>exec-maven-plugin</artifactId> <configuration> <environmentVariables> <PUBLIC_URL> <REACT_APP_ROUTER_BASE>/${project.artifactId}</REACT_APP_ROUTER_BASE> </environmentVariables> </configuration> </plugin> </plugins> </build> </profile> <profile> <id>prod</id> <build> <plugins> <plugin> <groupId>org.codehaus.mojo</groupId> <artifactId>exec-maven-plugin</artifactId> <configuration> <environmentVariables> <PUBLIC_URL> <REACT_APP_ROUTER_BASE>/${project.artifactId}</REACT_APP_ROUTER_BASE> </environmentVariables> </configuration> </plugin> </plugins> </build> </profile> </profiles> 

Note:- If you find a blank page after running your project then clear your cache or restart your IDE.

First install apache2 with sudo apt install apache2 then run commend blow in proj dir

npm run build 

or

yarn run build 

then

sudo cp -rf build/* /var/www/html/mySite; cd /etc/apache2/sites-available/; sudo cp 000-default.conf mySite.conf; sudo nano /mySite.conf 

in this file add/uncomment these lines

ServerName myDomin.com ServerAlias DocumentRoot /var/www/html/mySite 

after appache configurations you should add your domin to your system so

sudo nano /etc/hosts 

in this file add your VPS IP address for example if your ip address is 192.168.1.1 so

127.0.0.1 localhost myDomin.com 192.168.1.1 myDomin.com 

now set your name servers in your VPS by your own if you know how or just use cloudflare or similar things.

note: If you want use in localhost just run this cp build/* /var/www/html/ && sudo systemctl restart apache2