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:
Invalid Host header when running Create React App on localhost subdomain
"Invalid Host Header" in When running React App
How do I fix an Invalid Host Header error when deploying my react app to Heroku?
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}"
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/
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
Related
I have worked on VS Code to develop a react application that is using JSON server for backend. I wish to share the progress of my project with my team members so that they can access the project on their browser. I just want to generate a index.html file that I can share with others.
Build your react project first with npm run build.
Create one express server
const express = require("express");
const bodyParser = require("body-parser");
const app = express();
app.use(bodyParser.json());
app.listen(process.env.PORT, async () => {
console.log("listening on port " + process.env.PORT);
});
Now serve your build folder as static file
const path = require("path");
app.use(express.static(path.join(__dirname, "build")));
Now go to http://localhost:<<PORT>> and check if your website is running properly.
Now you can use ngrok to show demo to your friends.
ngrok will allow you to host your site for some hours without any cost.
https://ngrok.com/download
then run ngrok http <<PORT>> and you can share this https url with your friends.
Index.html and react app have different ways to deploy. If it is index.html
use Github pages and you will get an URL to share with anyone.
If you use API endpoint:
Push the code in Github and anyone will clone and check the app.
Or npm run build and drag and drop the build app in Netlify or connect with Github repo.
If you don't use the API endpoint:
Deploy your backend code in Heroku or another hosting site.
You will get an endpoint after deploying in Heroku.
Use the endpoint in your frontend instead of JSON data.
Then deploy your front-end app [after building the app by npm run build]in Netlify, Vercel,... or other platforms and share the URL with anyone
I have create created a react app for ticket management and for connect with backend i have defined proxy in package.json as shown in the figure. this is finely working in local host. when i publish to github page, it not able to connect to backend and get 404 error since the proxy in package.json is not considering now. So how i define a proxy as like in the packag.json to github page i have hosted
github ripo: https://github.com/pranavmappoli/supportdesk
hosted page: https://pranavmappoli.github.io/supportdesk/
backend URL: https://pranavhelpdesk.herokuapp.com/
how could i resolve this issue other than putting the path in .env file
The webpack proxy is designed to be used as a hack during development.
In production you are supposed to configure CORS on the API or deploy the app to the same origin as it so you don't need a proxy.
An an alternative (not one I'd recommend) you could build a production ready proxy. If you do that then it will need to support CORS and cannot be hosted on Github pages which only support statics files.
My team is working on an NodeJS app with a ReactJS frontend that needs to be deployed on our Ubuntu server. It runs fine locally and it used to run fine on the server until we added a Router/Switch structure into the App.js. Now we get 404 and 502 errors and I'm thinking of adding some GitHub action to automate the deployment process with npm run build and all. Ideally, every time we push to GitHub, the app on the server should update without someone having to tunnel in and type something manually. Can anyone suggest a ready-made YAML file for that purpose? How would we trigger it on our Ubuntu server? Would we run it under nginx (like now) or apache?
I am new to using Reactjs, I just finished a project for a client and I need to upload it to a domain on GoDaddy. I ran npm run build already and I now have a build folder. I'm just not sure how to proceed. Can somebody please help me?
A domain name is not enough, you need to host your application somewhere. You can use netlify or zeit (both have free tiers) to deploy your application. After deploying the app you can link your domain to navigate to the application.
There's a few options, but heres a simple one to get you up and running quick. Upload to github repo and link your github account to netlify. In the netlify account deploy your project which will show at a random netlify domain. Change the nameservers in netlify to point to your godaddy domain and your app is live.
I am currently trying to deploy the default react web app to Azure and I am encountering an issue where though I deploy the contents of my build folder to the azure hosted /site/wwwroot folder I end up on the following page when going to my hosted address: https://[project_name].azurewebsites.net/
Landing Page :
I intend to deploy the default create-react-app react application so that I may have the process down for when I deploy my real site.
The process I have followed is pretty much exactly what is mentioned in this article https://medium.com/#to_pe/deploying-create-react-app-on-microsoft-azure-c0f6686a4321
Create the default React App with create-react-app
Run "npm run build" to get the build folder
Go into the Azure React Portal and create a new Web App ***
FTP / Git deploy the contents of the local build folder into the Azure website's /site/wwwroot/ folder
For overkill I added the below web.config file to handle future routes, but have also tried without this step
In the end my Azure site's contents look like this
Folder contents :
At this point when I try to access the Azure site I get the "Hey, Node developers!" page which implies my code is not deployed. Any thoughts as to why this might be the case?
*** I have a hunch that during the configuring of the Azure Web Api something is not set up correctly perhaps because I select Node 10.14 as my Runtime stack simply because that is the version of Node that I have installed and am using with my local React app.
Thank you folks for your time.
Another approach is to configure Azure Linux Web App Service to run a startup command to serve your React app in "Settings > General settings > Startup Command":
pm2 serve /home/site/wwwroot/ --no-daemon
Remember to change the path to your build path (The path to your index.html file).
If you use react-router and wants to make any direct access on custom routes be handled by index.html you need to add --spa option on the same command.
pm2 serve /home/site/wwwroot/ --no-daemon --spa
Using --spa option pm2 will automatically redirect all queries to the index.html and then react router will do its magic.
You can find more information about it in pm2 documentation: https://pm2.keymetrics.io/docs/usage/pm2-doc-single-page/#serving-spa-redirect-all-to-indexhtml
I've coped with the same problem recently: React router direct links not working on Azure Web App Linux
You have created a Linux App Service - your web.config won't work because there is no IIS.
If you don't select node as the runtime stack, your app will work for the most part because it serves the files like a static web host. However I would suggest to keep the runtime stack as node and add the following file to your deployment in the wwwroot folder:
ecosystem.config.js
module.exports = {
apps: [
{
script: "npx serve -s"
}
]
};
https://burkeknowswords.com/this-is-how-to-easily-deploy-a-static-site-to-azure-96c77f0301ff
There's an extremely simple way to overcome this problem, and although it is not perfect, it works both on AWS, Microsoft Azure, and probably any other hosting:
Just point the error document to: index.html
I found it out here:
https://stackoverflow.com/a/52343542/3231884
Disclaimer: This solution is not perfect and impacts SEO. Google doesn't rank well sites that throw 404s.