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.

have you bundled your webpack before deployment? Something like: "deploy": "webpack --config webpack.config.production.js && [deployment script here]" — corvid
– corvid, Commented Jun 7, 2016 at 14:47
or for that matter just webpack from the comand line ? That spits out a bundle.js file — azium
– azium, Commented Jun 7, 2016 at 14:49

corvid · Accepted Answer · 2016-06-07 14:53:14Z

5

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

answered Jun 7, 2016 at 14:53

corvid

11.3k12 gold badges71 silver badges135 bronze badges

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

1 Comment

neelima Over a year ago

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

Collectives™ on Stack Overflow

Deploying react app with webpack

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related