How to deploy a react app that does not have index.html on an apache server for production

Question

I have a React App that does not have an index.html page. My very first react app so please consider my level of expertise.

There are many answers here but not when there is no index html entry point.

I am running this app already successfully on apache on XAMPP for development on localhost:7000 (no index.html). This works fine because my webpack loads a bundle js in memory. I use the command "server": "node app.js", to run the hot loaded local server.

Here is a part of my webpack config.

  module.exports = {
  entry: './src/main.js',
  output: {
    path: join(__dirname, '/dist/js/'),
    filename: 'bundle.js',
    publicPath: '/',
  },

What I have so far:

I have configured webpack to write a single bundle js file into my dist/js folder
I have all images stored in dist/images folder
I added all above folders and bundle js into root of XAMPP (htdocs) folder.

Here is my directory structure that worked for Dev:

config
dist
node_modules
routes (contains all routes for the App)
src (Has all components and entry is main.js)
styles (Has scss but it gets compiled into a single dist/styles/style.css)
views (Has all handle bar files for views)
-app.js (Main entry with express and webpack config references)
-app-routes (routes for the app)
-env,js(Has environment variables such as database connection details, port)
-webpack.config.js
-nodemon.json
-package.json

After yarn run prod, I get a dist folder as below

images (all images for app)
js (contains bundle.js file)
styles (contains compiled style.css)

What files should I add to htdocs root folder?

Adeel Imran · Accepted Answer · 2018-09-18 04:25:45Z

2

In your webpack.config.js in your plugins add this

Somewhere at top do this.

var HtmlWebpackPlugin = require('html-webpack-plugin');

And in your plugins add this

plugins: [
  new HtmlWebpackPlugin({
    template: './src/index.html',
    filename: './index.html'
  }),
],

What this will do is create an index.html file and inject your .js & .css files if any into the html file

You can read more on this webpack plugin to generate a dynamic index.html file Webpack HTML Plugin Docs

answered Sep 18, 2018 at 4:25

Adeel Imran

14k8 gold badges66 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kal Over a year ago

Thanks - I do not have any html file ..template: './src/index.html',.. I am using handlebars and the title of page, etc are built using handlebars.

Adeel Imran Over a year ago

Well I need to see your code configuration for that, but if it is just an apache server. Just generate the dynamic index.html file and let it do the work. Handlebars are probably going to over complicate your code.

Collectives™ on Stack Overflow

How to deploy a react app that does not have index.html on an apache server for production

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related