How to deploy a React App on Apache web server
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": "https://yourwebsite.com/your_folder_name/",
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!
- Go to your project root directory, e.g.:
cd /home/ubuntu/react-js
. - Build your project first:
npm run build
. - 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
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 the
000-default.conf
file:
sudo vi 000-default.conf
and rechange the DocumentRoot path to /var/www/html/build
.
- 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>
Make a file inside
/var/www/html/build
:sudo vi .htaccess
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
Restart Apache server:
sudo service apache2 restart
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.