Question

163

How to deploy a React App on Apache web server

rated 0 times [ 164] [ 1] / answers: 1 / hits: 177232 / 7 Years ago, sat, february 25, 2017, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

sam

Add To Favorites

Follow

Total Points: 711

Total Questions: 96

Total Answers: 107

Location: Burkina Faso

Member since Thu, Dec 23, 2021

2 Years ago

answered 7 Years ago jackelyn · Accepted 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.