0

I have developed a very simple demo Todo List app (Express + React), according to Brad Traversy's YT tutorial and successfully deployed this app to Heroku, where it is up and running. However, when I deployed the same exact code to IBM Cloud, I only got a blank screen with a sentence Invalid Host header.

Some more context:

  • I've used create-react-app in the root of my project
  • There is a proxy between the server and the React client

  • I'm deploying a production version that serves the static files:

    // Serve static assets if in production
if (process.env.NODE_ENV === 'production') {
  app.use(express.static('client/build'))

  app.get('*', (req, res) => {
    res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'))
  })
}

  • Build and Deploy phases in my Deployment Pipeline in IBM Cloud pass with no problem

I have googled and tried to solve this using the approach the official create-react-app docs suggest:

HOST=mypublicdevhost.com
DANGEROUSLY_DISABLE_HOST_CHECK=true

Some people asked a similar question on Stack Overflow, too:

None of the answers helped, however.

I've come to a conclusion that it is an IBM Cloud-specific issue. Does anyone know the possible cause of this? Are there any limitations IBM Cloud has that prevents my app from loading correctly?

Any help will be appreciated.

EDIT:

The script for the Build phase:

export PATH=/opt/IBM/node-v6.7.0/bin:$PATH
npm install
npm run build

The script for the Deploy phase:

cf push "${CF_APP}"
PhiNessa
  • 11
  • 5
  • How did you push? What is your manifest file? IBM Cloud domain or custom domain? – data_henrik Oct 15 '18 at 10:51
  • I used `cf push` to put my app on IBM Cloud. After that I configured a toolchain in IBM Cloud and connected the app to its github repo. So, anytime there is a commit to the master branch, the Build phase is triggered. I added the scripts into my post. As for the manifest file, I don't have it actually - am I supposed to have one? It is IBM Cloud domain. – PhiNessa Oct 18 '18 at 09:03

2 Answers2

0

A working solution is to use http-proxy-middleware to manually set up the proxy. Please see an explanation here: deploying create-react-app to heroku with express backend returns invalid host header in browser

Here is a minimal working example: https://github.com/sehailey/proxytest and here is that example deployed: https://proxytest2.herokuapp.com/

Sarah Hailey
  • 494
  • 5
  • 19
  • I deleted the `proxy` from my `package.json` and instead tried to configure the proxy manually, as you suggested. That solved the issue with the production version but, for some reason, didn't configure the proxy for development at all. Any idea how I can setup the proxy when the `setupProxy.js` is not working? (I use the same exact code as you) – PhiNessa Oct 19 '18 at 16:50
  • For me, the proxy doesn't work when I delete `proxy` from `package.json` + add the `setupProxy.js` file. It only works when `proxy` is set. Why is that? I don't understand how it can work for you and I would really like to make it working... @sarah – PhiNessa Oct 22 '18 at 12:54
0

If you are in production mode and have a domain, make a file in your root client directory named .env.production. Inside this file write this

HOST=yourdomain.com

No need to write any code, this is the right way to get rid of this error.

Docs

koshur
  • 124
  • 1
  • 9