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.
Related
I would like to deploy my react app to IIS and I tried a step by step guide.
I already tried a create-react-app and I already added a new website but when I run It says:
this site can't reach
.
I tried that way but some steps are not understood.=>create-react-app on IIS 10
I am newbie and May I know step by step if possible.
Thanks.
I suggest you could try belwo steps to host a reasct app on the IIS.
If you don't have the react app, I suggest you could install the npm and generate a react app for testing.
1.Open cmd and locate a folder by using cd yourfoldername
2.Run below command to add the package
npm i -g create-react-app
3.Run below command to create the react app in the folder, wait for creating the application
create-react-app my-app
Build the project to production folder.
npm run build
5.Open IIS management console and create a new web sites and use the build path as the physical path. for example: D:\ReactAppTest\my-app\build
Notice: You should pay attention to your port number.
Then you could use that port number to access your react application. For example:
http://localhost:9965/
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 created a ReactJS application using Create-React-App, and wanted to deploy it on a Linux server. I followed a tutorial that showed how to do so very simply by installing pm2 and serve, then after running the command:
npm run build
I ran the command that actually hosted the application:
pm2 serve build
Now the problem is whenever I visit a url that is not the base one, or click reload from browser while I'm on a page other than home page, I get 404 not found error.
I understand the previous command is meant to serve a single page only. My question is: is there a way to make the url for example http://myserver:port/a go to Route a in my app? Or at least go to http://myserver:port/ ?
I already have Nginx installed on the same server, as I am using it to host a Flask Python app, but I'm very new to all this and I am looking for a simple way that works, as I faced some difficulties to get the Python app hosted.
Please note that I am only using React, no Redux, express, or any Database, if that is of any relevance. I am also using BrowserRouter inside my app.
pm2 serve has a Single-Page-Application Mode (https://pm2.keymetrics.io/docs/usage/expose/#serving-spa-redirect-all-to-indexhtml)
From the docs:
To automatically redirect all queries to the index.html use the --spa option:
pm2 serve build --spa
Or if using ecosystem.config.js file:
module.exports = {
script: "serve",
env: {
PM2_SERVE_PATH: 'build',
PM2_SERVE_PORT: 8080,
PM2_SERVE_SPA: 'true',
PM2_SERVE_HOMEPAGE: '/index.html'
}
}
I use Vue.js, "npm run build" command generates static files into dist folder, the pm2 command looks like this:
pm2 --name <appName> serve --spa <staticFolder> <port>
pm2 serve build just serves build folder statically. So http://myserver:port/a will request file named 'a' in build folder. If it doesnt find it, it returns 404
To make ur server able to handle other routes, you cannot use pm2 serve. Instead you should start your flask server through pm2. You may take a look at How to run a python script like pm2 for nodejs
I have written a small application in AngularJS, which works fine on my local environment, now I'm deploying to Heroku. But Heroku can't find my app. I must be missing a vital part needed to specify the build and deployment details. So what is needed to run an angular app on Heroku?
Here's what i've done so far:
Used NPM to create a package.json file in the root of my project
created a Procfile in the root of my package, specifying my app :
web node app.js
added an angular buildpack to Heroku (https://github.com/nknj/heroku-buildpack-yo-angular.git works great)
when I use the Heroku CLI, for example heroku restart to refresh my dyno (and bear in mind i am running this from WITHIN the project root folder, so I shouldn't have to specify app name) I get the following error:
▸ Error: No app specified
▸ Usage: heroku restart [DYNO] --app APP
▸ We don't know which app to run this on.
▸ Run this command from inside an app folder or specify which app to use with --app APP
▸
▸ https://devcenter.heroku.com/articles/using-the-cli#app-commands
Heroku can't find my app. Why? How does one tell Heroku how to bootstrap the app?
Thanks.
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.