cloudviewer

Angular Application in Heroku

#Step 1 https://cloudviewer.herokuapp.com/cloudviewer/

Setup Your Angular Application

ng new loudpicviewer

Launch Application
cd loudpicviewer
ng serve
http://localhost:4200.

Step 2

Create its GitHub repo and Push
git remote add origin <new_github_repository_url>
git add .
git commit -m "first commit"
git push -u origin master

Then check your App on github

Step 3

The following are production-ready steps to easily and properly deploy your app on production server.

Ensure you have the latest version of angular cli and angular compiler cli.
Install them into your application by running this commands in your terminal:

npm install @angular/cli@latest @angular/compiler-cli --save-dev

check ng --version

In your package.json, copy from devDependencies to dependencies
"@angular/cli": "^8.3.0",
"@angular/compiler": "~8.2.3",

Create postinstall script in package.json
Under “scripts”, add a postinstall command like so:
"postinstall": "ng build --aot -prod"
Or
"heroku-postbuild": "ng build --prod"

Add Node and NPM engines
You will need to add the Node and NPM engines that Heroku will use to run your application.
"engines": { "node": "v10.14.1", "npm": "6.4.1" }

Copy typescript to dependencies.
Copy "typescript": "~2.3.3" from devDependencies to dependencies to also inform Heroku what typescript version to use.
Install Enhanced Resolve 3.3.0
Run the command npm install [email protected] --save-dev
Install Server to run your app
Locally we run ng serve from terminal to run our app on local browser. But we will need to setup an Express server that will run our production ready app (from dist folder created) only to ensure light-weight and fast loading.
Install Express server by running:
npm install express path --save
Create a server.js file in the root of the application and paste the following code.

Change start command
In package.json, change the “start” command to node server.js so it becomes:
"start": "node server.js"
Here’s what the complete package.json looks like. Yours may contain more depending on your application-specific packages.

server.js

Push changes to GitHub: git add . git commit -m "updates to deploy to heroku" git push

Setup Automatic Deployment from GitHub to Heroku

Step 1

Create new app in heroku

step 2

In the Deploy menu, under Deployment method, select GitHub. If you have not done this already, it will ask you to login your github account so it can connect to it.
Enter the name of the GitHub repository and click Search. Once the repo is shown below, click Connect.

1)Automatic Deploys, select the master branch and click Enable Automatic Deploys.
2)Manual Deploys, click Deploy Branch. This is to push our fresh code to heroku.

Choose 1 option.
create Pipeline for STAGING and PRODUCTION and so on.