How do I set up AWS Cloud9 to run an existing JavaScript app with webpack-dev-server (in development mode)?

Question

I am trying to get my fairly typical JavaScript (React) app to run in dev mode on AWS Cloud9. I successfully cloned my repo (using https ugh), installed my npm packages, and can run scripts in the console. However, I don't know how to run and access the app in dev mode. There are a plethora of docs but they all seem to dance around the running part. My guess is I need to somehow set a custom host and port, but I also need to find what URL to use to see the app running.

Here is my devServer config:

devServer: {
  // Display only errors to reduce the amount of output.
  stats: "errors-only",
  host, // Defaults to `localhost`
  port, // Defaults to 8080
  overlay: {
    errors: true,
    warnings: true,
  },
}

Answer 1

If anyone comes across this, I wanted to share my solution because I know how frustrating this can be:

First, create a script in your package.json file:

"start": "webpack-dev-server --open"

Then, add the following to your Webpack config file:

devServer: {
    contentBase: path.join(__dirname, 'dist'),
    host: '0.0.0.0',
    port: 8080,
    compress: true,
  }

Then, open the terminal in AWS Cloud 9, and run the script:

npm start

Finally, click on the link in the terminal: "Project is running at http://0.0.0.0:8080/" and your app will show in a new window.

**If it doesn't work, don't forget to allow port 80 on your Cloud 9 Security Group: https://docs.aws.amazon.com/AWSEC2/latest/UserGuide/working-with-security-groups.html#adding-security-group-rule

If you want to view the project in the preview pane, you can add the following to your devServer config:

disableHostCheck: true,

However, it's important to note that when set to true, this option bypasses host checking. THIS IS NOT RECOMMENDED as apps that do not check the host are vulnerable to DNS rebinding attacks.

Answer 2

1) First thing you need to do is to run react app on port 8080. You can do this by setting environment variable PORT to 8080 and then just starting react dev server from AWS Cloud9 terminal.

export PORT=8080
npm start

For details look at this discussion on GitHub.

2) After starting your application you can preview it by clicking Preview -> Preview Running Application at the top of AWS Cloud9.

For more details check this AWS Cloud9 doc