How to deploy a React App on Apache web server

Question

I have created a basic React App from https   www tutorialspoint com reactjs reactjs jsx htm 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

User · Answer

You can run it through the Apache proxy  but it would have to be running in a virtual directory  e g  http   mysite something myreactapp     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 http   127 0 0 1 8080  2   Edit httpd-proxy conf and add      ProxyRequests On ProxyVia On  lt Proxy   gt    Order deny allow   Allow from all    lt  Proxy gt   ProxyPass  myreactapp http   127 0 0 1 8080  ProxyPassReverse  myreactapp  http   127 0 0 1 8080       3   Restart Apache

User · Answer

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 http   maven apache org xsd maven-4 0 0 xsd            4 0 0     it megadix     create-react-app-servlet     0 0 1-SNAPSHOT     war   lt properties gt       lt project build sourceEncoding gt UTF-8 lt  project build sourceEncoding gt       lt npm output directory gt build lt  npm output directory gt   lt  properties gt    lt build gt       lt finalName gt   project artifactId  lt  finalName gt       lt plugins gt           lt  -- Standard plugin to generate WAR -- gt           lt plugin gt               lt groupId gt org apache maven plugins lt  groupId gt               lt artifactId gt maven-war-plugin lt  artifactId gt               lt version gt 2 1 1 lt  version gt               lt configuration gt                   lt webResources gt                       lt resource gt                           lt directory gt   npm output directory  lt  directory gt                       lt  resource gt                   lt  webResources gt                   lt webXml gt   basedir  web xml lt  webXml gt               lt  configuration gt           lt  plugin gt            lt plugin gt               lt groupId gt org codehaus mojo lt  groupId gt               lt artifactId gt exec-maven-plugin lt  artifactId gt               lt version gt 1 3 2 lt  version gt               lt executions gt                   lt  -- Required  The following will ensure  npm install  is called                      before anything else during the  Default Lifecycle  -- gt                   lt execution gt                       lt id gt npm install  initialize  lt  id gt                       lt goals gt                           lt goal gt exec lt  goal gt                       lt  goals gt                       lt phase gt initialize lt  phase gt                       lt configuration gt                           lt executable gt npm lt  executable gt                           lt arguments gt                               lt argument gt install lt  argument gt                           lt  arguments gt                       lt  configuration gt                   lt  execution gt                   lt  -- Required  The following will ensure  npm install  is called                      before anything else during the  Clean Lifecycle  -- gt                   lt execution gt                       lt id gt npm install  clean  lt  id gt                       lt goals gt                           lt goal gt exec lt  goal gt                       lt  goals gt                       lt phase gt pre-clean lt  phase gt                       lt configuration gt                           lt executable gt npm lt  executable gt                           lt arguments gt                               lt argument gt install lt  argument gt                           lt  arguments gt                       lt  configuration gt                   lt  execution gt                    lt  -- Required  This following calls  npm run build  where  build  is                      the script name I used in my project  change this if yours is                          different -- gt                   lt execution gt                       lt id gt npm run build  compile  lt  id gt                       lt goals gt                           lt goal gt exec lt  goal gt                       lt  goals gt                       lt phase gt compile lt  phase gt                       lt configuration gt                           lt executable gt npm lt  executable gt                           lt arguments gt                               lt argument gt run lt  argument gt                               lt argument gt build lt  argument gt                           lt  arguments gt                       lt  configuration gt                   lt  execution gt                lt  executions gt                lt configuration gt                   lt environmentVariables gt                       lt CI gt true lt  CI gt                       lt  -- The following parameters create an NPM sandbox for CI -- gt                       lt NPM CONFIG PREFIX gt   basedir  npm lt  NPM CONFIG PREFIX gt                       lt NPM CONFIG CACHE gt   NPM CONFIG PREFIX  cache lt  NPM CONFIG CACHE gt                       lt NPM CONFIG TMP gt   project build directory  npmtmp lt  NPM CONFIG TMP gt                   lt  environmentVariables gt               lt  configuration gt           lt  plugin gt       lt  plugins gt   lt  build gt    lt profiles gt       lt profile gt           lt id gt local lt  id gt           lt activation gt               lt activeByDefault gt true lt  activeByDefault gt           lt  activation gt           lt build gt               lt plugins gt                   lt plugin gt                       lt groupId gt org codehaus mojo lt  groupId gt                       lt artifactId gt exec-maven-plugin lt  artifactId gt                        lt configuration gt                           lt environmentVariables gt                               lt PUBLIC URL gt http   localhost 8080   project artifactId  lt  PUBLIC URL gt                               lt REACT APP ROUTER BASE gt    project artifactId  lt  REACT APP ROUTER BASE gt                           lt  environmentVariables gt                       lt  configuration gt                   lt  plugin gt               lt  plugins gt           lt  build gt       lt  profile gt        lt profile gt           lt id gt prod lt  id gt           lt build gt               lt plugins gt                   lt plugin gt                       lt groupId gt org codehaus mojo lt  groupId gt                       lt artifactId gt exec-maven-plugin lt  artifactId gt                        lt configuration gt                           lt environmentVariables gt                               lt PUBLIC URL gt http   my-awesome-production-host   project artifactId  lt  PUBLIC URL gt                               lt REACT APP ROUTER BASE gt    project artifactId  lt  REACT APP ROUTER BASE gt                           lt  environmentVariables gt                       lt  configuration gt                   lt  plugin gt               lt  plugins gt           lt  build gt       lt  profile gt   lt  profiles gt      Note - If you find a blank page after running your project then clear your cache or restart your IDE

User · Answer

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

User · Answer

Go to your project root directory cd example  home ubuntu react-js Build your project first npm run build check your build directory gracefully all the 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    go to sites-available directory   cd  etc apache2 sites-available  open 000-default conf file   sudo vi 000-default conf and rechange the DocumentRoot path  enter image description here Now goto apache conf   cd  etc aapche2  sudo vi apache2 conf  add the given snippet    x000D   x000D   lt Directory  var www html gt  x000D   x000D              Options Indexes FollowSymLinks x000D   x000D              AllowOverride All x000D   x000D              Require all granted x000D   x000D       lt  Directory gt  x000D   x000D   x000D     make a file inside  var www html build  sudo vi  htaccess    x000D   x000D  Options -MultiViews x000D       x000D  RewriteEngine On x000D       x000D  RewriteCond   REQUEST FILENAME   -f x000D   x000D  RewriteRule   index html  QSA L  x000D   x000D   x000D    9 sudo a2enmod rewrite  10 sudo systemctl restart apache2   restart apache server   sudo service apache2 restart  thanks  enjoy your day

User · Answer

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

User · Answer

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    Bundle your React app in a bundle Have Apache pointing to your html file in your server  and allowing access externally    You might have all the informations here  https   httpd apache org docs trunk getting-started html for the Apache server  and here to make your javascript bundle https   www codementor io tamizhvendan beginner-guide-setup-reactjs-environment-npm-babel-6-webpack-du107r9zr

User · Answer

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    http   hostName com appLocation    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

User · Answer

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 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   quot homepage quot    quot   quot    Note  If you are using react-router  4  you can root  lt Link gt  using the basename prop on any  lt Router gt   import React from  react   import BrowserRouter as Router from  react-router-dom        lt Router basename  quot  calendar quot   gt   lt Link to  quot  today quot   gt

[javascript] How to deploy a React App on Apache web server

Examples related to javascript

Examples related to apache

Examples related to reactjs