I am working on an Angular front end site built with the Yoeman Angular package. The project is being hosted in Heroku using the Node.js build pack.
Heroku builds the project without errors, it runs Gulp and Bower to install dependencies. After the startup scripts have been executed and the project compiled, the index page loads with no problem but any other page that is not the homepage (like the login page for example) will fall into a “Cannot GET /login” message.
This seems to be a common problem as I have read many posts on how to resolve the Angular routing on Heroku. These are all the actions that I have taken without any success at the moment:
Creating a Node.js web server in Express (I have tried many flavours of this script)
var gzippo = require('gzippo');
var express = require('express');
var morgan = require('morgan');
var app = express();
app.use(morgan('dev'));
app.use(gzippo.staticGzip("" + __dirname + "/dist"));
app.use('/bower_components', express.static(__dirname + '/bower_components'));
app.listen(process.env.PORT || 5000);
Commenting the dist folder in .gitignore for Heroku to work with it. The dist folder gets push into Git.
Creating the env variables NODE_ENV: true, NODE_PATH: true, NPM_CONFIG_PRODUCTION: false
The site runs perfectly locally when running the dist files as stand-alone on an Apache server or with the Node.js script above.
I would appreciate any comments that would help me resolve this issue on Heroku and Angular. Thanks in advance.
I guess after all this time you were already able to fix this (or you moved on to something else).
In any case, and for anyone running into similar issues, I created a public repo with an Angular2 + Express app that's already configured for deployment on Heroku.
https://github.com/pabloruiz55/Angular-Express-Heroku
I can't fully answer this question as I'm missing info like what errors you are running into, but hopefully, taking a look at my starter project anyone can figure it out.
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'd like to run a react app served by an express server. Even though it's not the solution, the effect what I'd like to earn is app.use("/", "react-scripts start"), so if the server gets a request at "/", it starts the react app, and serves it's files.
I read about the solution of building the app, and serve bundle.js, or just adding a proxy with the server's URL to the client app's package.json, but that's not what I want, and haven't found anything similar to the effect I'd like to earn.
I'm not sure what react-scripts start does, and how it's working, but the reason why I need it is that I don't want to restart the whole server, and wait until the app builds every time I change something in the front-end.
Any ideas?
react-scripts start sets up the development environment and starts a server along with hot module reloading. Basically, create-react-app helps you kick off your project without going into the intricacies of WebPack configurations.
Run react-scripts build to build your project files into build folder & then, you can create a server.js file that uses Express to serve your build folder.
server.js
const path = require('path');
const express = require('express');
const app = express();
const publicPath = path.join(__dirname, 'build');
app.use(express.static(publicPath));
app.get('*', (req, res) => {
res.sendFile(path.join(publicPath, 'index.html'));
});
app.listen(3000, () => {
console.log('Server is up!');
});
run node server.js to start your server.
What exactly is the outcome you're trying to achieve? Using create-react-app (for which react-scripts is a utility), or webpack in general, the app must always be rebuilt at some point for the changes to be seen, since JSX is not browser-compatible and must be transpiled to regular JS. Also, it's not necessary to restart the server if you're only making changes to the front end.
Running react-scripts start basically runs webpack-dev-server (WDS) which is built into CRA's configuration. WDS does not actually build the project in the sense of outputting build files, but it still must build it in-memory to be able to even display the changes at all. On a normal application, rebuilding through WDS shouldn't take more than a handful of seconds, and that's about the fastest feedback loop you're going to get for seeing changes manifest.
If you're running an Express server alongside a CRA app, I'd recommend looking into concurrently and nodemon, the former of which will allow you to run your server and React client with one command, and the latter of which will automatically restart your server for you (only when back end changes are made, a front end change will not trigger a server restart).
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
I am serving a react application on an express server deployed to Heroku. Locally I can easily see my favicon. When deployed it is not showing up. I am getting a status 200 on the file but when I click preview it is showing this as the src:https://reactportfoliodh.herokuapp.com//favicon.ico. For the life of me I cannot figure out why it is showing two forward slashes. To make matters worse another person says they CAN see it. I have already tried emptying my cache and tried multiple computers...Anyone?
I'm not sure if this will help you, but here's how I handled adding the favicon to my React/Express app...
First of all, install the serve-favicon and path NPM modules
$ npm install --save serve-favicon && npm install --save path
In your main Express server file (index.js, in my case), add the following:
const express = require("express"),
path = require("path"),
app = express(),
favicon = require("serve-favicon")
app.use(favicon(path.join(__dirname, "public", "images", "favicons", "favicon.ico")))
The app.use() line should point to the directory where your icon is located - in my case, it is in public/images/favicons/favicon.ico.
And that's it - no need to include it in your index.html - it should be available throughout your app.
I build my app using sudo grunt build. There are no errors. The dist folder is built and the app works great using sudo grunt serve:dist. When I try to deploy to heroku for the first time, it fails using yo angular-fullstack:heroku from project root.
I receive the following error:
Initializing deployment repo
Creating heroku app and setting node environment
Creating myapp... done, stack is cedar-14
https://myapp.herokuapp.com/ | https://git.heroku.com/myapp.git
{ [Error: Command failed: ! No app specified.
! Run this command from an app folder or specify which app to use with --app APP.
] killed: false, code: 1, signal: null }`
I have also tried following the manual build instructions on http://davemax.com/heroku-deploy-yeoman-angular-app/ and https://devcenter.heroku.com/articles/getting-started-with-nodejs. When I deploy the app using these methods, the url shows a heroku error page.
My server is an HTTPS server, so I am not sure if that is interfering with anything.
from app.js:
var options = {
pfx: fs.readFileSync(__dirname + '/server.pfx'),
passphrase: 'password'
};
// Setup server
var app = express();
var server = require('https').createServer(options, app);
I am using the latest version of generator-angular-fullstack: version 2.0.13. I am also using the latest version of the heroku toolbelt: version 3.28.2. I'm on a linux machine, ubuntu.
I am using generator-angular-fullstack for my website and it works perfectly.
I use git bash and I have my heroku account (https://devcenter.heroku.com/articles/authentication)
Always I use:
$grunt build
$grunt buildcontrol:heroku
I want to be your help.