CODEWITHSUNDEEP
javascriptreactjswebpack
Kal
Kal

Reputation: 1774

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

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:

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?

Upvotes: 2

Views: 1584

Answers (1)

Adeel Imran
Adeel Imran

Reputation: 13956

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

Upvotes: 2

Related Questions