Deploying react app with webpack

Question

I am doing a tutorial on React and I have made a youtube clone based on react. Now I wanted to upload this to my domain (hosted at one.com) but it doesn't work because bundle.js can't be found. Rather obvious since the app requires to run "npm start".

I've been googling and found that I somehow need to deploy the app by writing a deploy configuration for webpack, but I can't get it to work.

I've never understood this and I'd like to ask: how do I deploy a javascript/nodejs/webpack website to a server? Am I on the right track?

My project is based on this starter: https://github.com/StephenGrider/ReduxSimpleStarter

EDIT: So I've managed to get a bundle.js file by typing the following in cmd:

webpack ./src/index.js bundle.js

Uploaded that to the server

Now the problem is that it's looking for bundle and style in the root of the website.

Solution

Try bundling your application before running any deployment script. A package.json might have a script like this:

{
  "name": "youtube-clone",
  "scripts": {
    "package": "webpack --config webpack.config.production.js --progress --colors",
    "deploy": "npm run package && [your deployment script]"
  }
}

So then you would have a file structure like this:

.
├── src/
├── .gitignore   <= make sure your build files are ignored on source
├── package.json
├── webpack.config.development.js
└── webpack.config.production.js

Where one of your configs would be created for production and one for development

Comments

[neelima]

I am a new bee to react.Cloud you explain for this "deploy": "npm run package && [your deployment script]"?.