CODEWITHSUNDEEP
node.jsreactjs
sterix24
sterix24

Reputation: 2400

How do I prepare these react files for hosting?

I've been ask to take on a react project by a client and I'm struggling to understand how to prepare the files for hosting. I've used npm / webpack before, and I can see in the package.json the following:

"main": "index.js",
  "scripts": {
    "dev": "webpack --mode development --config server.config.js && webpack --mode development && nodemon server.js",
    "watch": "webpack --mode development --watch",
    "start": "webpack --mode production --config server.config.js && node server.js",
    "heroku-postbuild": "webpack --mode production"
  },

Also within the webpack.config.js file I have this:

output: {
    path: path.join(__dirname, "dist"),
    filename: "bundle.js"
  },

I've run 'npm run heroku-postbuild'. This has led to a dist folder that gets created, which I expected would create the necessary compiled files to host on the server, however when I look in that directory all I get is a single 'bundle.js' file along with fonts and image assets.

What's confusing me is that there are zero generated HTML files.

Since I've not hosted a react site before, I'm not sure if this is what should be expected and if so, how do I set up hosting for this?

Thanks

Upvotes: 1

Views: 32

Answers (1)

Jim O'Brien
Jim O'Brien

Reputation: 2552

By default, webpack does not create an index.html file for you. There are two main routes you can go:

  1. Create your own index.html by hand, which loads your bundle.js with a <script> tag. Place this in a folder called public (or static -- the name isn't important), and then copy this into your dist folder at build time. This is easier in the short term.
  2. Use the HtmlWebpackPlugin, which will generate an index.html file for you automatically, as part of the webpack build process. This is probably easier in the long run.

Upvotes: 1

Related Questions