2

So I'm obviously a beginner with React, this may be rambling and I and may be crucified, but I've been banging my head against a wall for the last week or so trying to build a hello world app from scratch using React on Cloud9. I've read the official docs, and followed this guide (and half a dozen others) contained within to no avail. Using create-react-app does actually work, but I'd like to know what's going on under the hood. I tried simply ejecting the app I made with CRA, but naturally as soon as I ejected it it stopped working.

I've cloned about 5 or 6 react boilerplates off Github, but none of them produce apps I can actually view in Cloud9, even those specifically configured for C9. Almost all use webpack-dev-server, but even when I specifically flag it to use $IP, $PORT, $C9_HOSTNAME etc. like any other app I've deployed and it successfully compiles and tells me it's running, previewing the app or navigating to the URL returns a blank page or "Invalid Host Header." Does anyone know what could be causing this?

John Rotenstein
  • 241,921
  • 22
  • 380
  • 470
Chris B.
  • 5,477
  • 1
  • 12
  • 30

2 Answers2

1

To fix the invalid host header issue, add this to your webpack config file:

devServer: {
  disableHostCheck: true
}

If you are still using create-react-app, then you should not be having that issue.

Joel
  • 1,564
  • 7
  • 12
  • 20
maxadorable
  • 1,290
  • 1
  • 10
  • 24
0

Install all node modules required and create a 'myapp' as a project:

npm init react-app myapp

cd myapp

In order to start the app you need to set the process in environment port so go to package.json and change script.start to:

"start": "set PORT=process.env.PORT && react-scripts start"

Then do npm start, should work fine.

TT.
  • 15,774
  • 6
  • 47
  • 88
Prashant Basnet
  • 11
  • 1