So I have an Angular and Node.js app that I'm hosting on Heroku. I want to be able to run this app on localhost for testing but also have it work on Heroku. So I decided to use an environment variable to define the URL of the app for API calls.
So in environment.ts I have
export const environment = {
production: false,
apiURL: 'https://localhost:8080/'
};
And in environment.prod.ts I have:
export const environment = {
production: true,
apiURL: 'myHerokuURL'
};
So when I run on heroku I want the production URL to be used. How can I do this?
To run locally I do, nodemon server.js then ng serve.
However on Heroku I need to do something like ng serve --env=prod but not sure how to do it.
These should help
Option 1
If you are using angular-cli, then
ng build --prod
will do the trick. Then you can copy everything from .dist folder to your server folder
Option 2
you can use http-server to serve your app . To install http-server
npm install http-server -g
and after going to your project folder
http-server ./dist
it will serve all the files in your folder. you can check the terminal what ip-address and port you can use to access the application. Now open up your browser and type
ip-adress:port/index.html
Source: how to deploy angular2 app built using angular-cli
Hope it helps.
In your package.json add
"heroku-postbuild": "ng build --configuration=production"
instead of
"postinstall": "ng build --aot --prod"
This will trigger only one (production) build on heroku. If you leave your current setup you can see in your heroku app logs that you first build everything with --prod but then it just makes normal build.
Related
I am trying to deploy an Angular PWA on Heroku, but I can't seem to figure it out.
The deployed app works great, however no service worker is registered according to LightHouse, therefore it is not a PWA.
Here is the process I am using to deploy :
Run ng build --prod in the angular project
Copy the dist/myapp folder next to my server.js file
Commit and push to heroku.
Before pushing, running npm run start or http-server dist/myapp works just fine locally, a service worker is registered and the app is installable.
Here is my start command in package.json and my post-deploy command in ecosystem.config.js:
"start": "pm2-runtime start ecosystem.config.js --env production"
'post-deploy' : 'npm install && pm2 reload ecosystem.config.js --env production',
Note: It uses node.js and express to load an Angular project using this method : app.use(express.static(path.join(__dirname, 'dist/myapp')));
Does anyone have an idea as to why it does not register a service worker on Heroku ?
I have a React App that works beautifully over HTTPS using a .env.production file containing:
HTTPS=true
SSL_CRT_FILE=/etc/ssl/certs/mycert.crt
SSL_KEY_FILE=/etc/ssl/private/mykey.key
the package.json file contains:
"scripts": {
"start": "env-cmd -f .env.production react-scripts start",
"build:production": "env-cmd -f .env.production react-scripts build"
}
when I do:
npm start
everything works, and I can access my server over HTTPS from anywhere. Now, this is the funny thing, now I do:
npm run build:production
which also works fine, and I get:
The build folder is ready to be deployed.
You may serve it with a static server:
serve -s build
Now, this is what fails:
1) When I use the serve command above, the environment variables in the .env.production file are not picked up! Why?
2) If I pass the environment variables manually as in:
HTTPS=true SSL_CRT_FILE=/etc/ssl/certs/mycert.crt SSL_KEY_FILE=/etc/ssl/private/mykey.key PORT=8580 serve -s build
Only the PORT variable seems to be picked up, but the server now runs on HTTP. Any ideas why?!
When you run npm start, a development server is started for you under the hood that is configured to pick up the SSL_CRT_FILE, SSL_KEY_FILE and HTTPS env vars automatically.
serve doesn't do that, you need to let it know with these CLI flags:
serve -s build --listen 8580 --ssl-cert "/etc/ssl/certs/mycert.crt" --ssl-key "/etc/ssl/private/mykey.key"
I’m a newbie to web programming.I’ve followed a tutorial to create a simple web application with Angular CLI, then it is said that I can run the app locally using the command npm start.
It worked and my app was running on localhost:4200.
What npm start do to run my app?
I also wonder that what kind of server was being used to host my app, because I did not create any web server (E.g: Nodejs server, etc).
Is there any way to customize this server such as changing the port number?
P.s: I am using Angular 6
When you run your app using npm start, npm will try to find the configuration file package.json in your app folder.If it exists, the command specified in the start property of the scripts object will be run. In your case, the command is probably ng serve.
Then, it will use webpack-dev-server to start a local webserver. In angular.json, the folder path of the builder used to run the local server is specified in the builder property of the serve object.
Go to the builder folder, open the schema.json. You will see the default port which is 4200 is specified in this file.
The easiest way to change the port is to use ng serve with the port option. For example, if you want to run your app using port 5000, use ng serve --port 5000. You can either run this command directly on cmd or specify it in the start property of the scripts object.
When you are running the command npm start, the npm will run the command mentioned in packages.json file
In that file, we will be having various scripts such as start, build, test etc
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
Those scripts will have the command to trigger the angular CLI actions.
Basically npm start is an alias name of these script commands. You can change or create your own set of scripts.
As you already installed the npm, the nodejs gets installed in your machine. The angular CLI will use node server to run your application.
By default the port number is 4200, you can customize the port you wish to run.
Another option is to run ng serve command with the --port option e.g
ng serve --port 5050 (i.e for port 5050)
Alternatively, the command: ng serve --port 0, will auto assign an available port for use.
You can update the script in packages.json based on your needs.
I have a reactjs app deployed on AWS Elastic Beanstalk environment that used Cognito for authentication. I need to make my front-end code DEV configurable using environment variables with database and Cognito.
Does anyone know how to achieve that?
I don't think you can read any ENV vars from your client side reactjs app, instead you'll need a server side technology to do that. Elastic Beanstalk lets you enter the environment variables for each environment using the management panel. Add your ENV var and these variables will be attached to the process.env object
const config = {};
config.db = {
database : process.env.DB_HOST || 'your-db-host'
database : process.env.DB_USER || 'your-db-user'
database : process.env.DB_PASSWORD || 'your-db-pwd'
};
export default config;
I am using create-react-app and here is my build script
"build": "sh -ac '. ./.env.${REACT_APP_ENV}; react-scripts build'",
"build:prod": "REACT_APP_ENV=prod npm run-script build",
"build:staging": "REACT_APP_ENV=staging npm run-script build",
It requires you to have files like .env.prod and .env.staging files in your root folder to set the environment variables for their respective environments , you can add other scripts as well for example to add something for local environment i would add
"build:local": "REACT_APP_ENV=local npm run-script build"
In package.json and then add .env.local file in root folder that has my all my local specific env. variables.
Run the build command for CRA as
npm run build:local
(for build with local env. variables)
I'm trying to deploy my first node app to heroku. I have set up a Procfile with the following code
web: node ./app/server.js
but when I deploy to heroku and check the logs I see the error Error: Cannot find module '/app/server.js'.
On local it works fine. I have the following in my package.json nested under scripts
"start": "nodemon ./app/server.js
Nodemon is a utility that will monitor for any changes in your source and automatically restart your server. Perfect for development.
While using nodemon its better to maintain script commands for dev and production as follows:
"scripts": {
"start": "node ./app/server.js",
"dev": "nodemon ./app/server.js"
}
To determine how to start your app, The deployment server( Heroku) first looks for a Procfile. If no Procfile exists for a Node.js app, It will attempt to start a default web process via the start script in your package.json.
If you use nodemon in script, It'll internally try to run node server.js but in your case start file present in app/server.js. To avoid these issues it's better to use two separate script commands for dev and production. So that while running locally you can use npm dev command.