Angular-CLI + Heroku + Github

README.md

Angular-CLI + Heroku + Github

Passo a passo para criar uma aplicação Angular-CLI configurada para funcionar online com Heroku e Github

Ps. Para rodar corretamente, é preciso que o Node.js, NPM, Angular-CLI e Express estejam devidamente instalados e configurados

1. Criar repositório no Github
2. Clonar repositório no ambiente local (PC)
3. Pelo Terminal, acessar uma pasta acima do repositório criado e rodar o seguinte comando:

ng new "nome_do_novo_repositorio"

Caso queira criar o projeto configurado para o estilo SCSS, insira esse comando:

  ng new "nome_do_novo_repositorio" --style=scss  

 Aplicação Angular-CLI criada

4. Acessar no repositório, o arquivo package.json e inserir as seguinte configurações:

  "scripts": {
    ...
    "start": "node server.js",      
    "postinstall": "ng build --aot -prod"
    ...
  },
  "dependencies": {
    ...
    "@angular/cli": "^1.0.3",
    "@angular/compiler-cli": "^4.1.2",
    ...
  },
  "devDependencies": {
    ...
    "@angular/cli": "^1.0.3",
    "@angular/compiler-cli": "^4.1.2",
    ...
  },
  "engines": {
    "node": "6.9.2",
    "npm": "3.10.9"
  }

5. Criar o arquivo server.js com o seguinte conteúdo:

const express = require('express');
const app = express();
// Run the app by serving the static files
// in the dist directory
app.use(express.static(__dirname + '/dist'));
// Start the app by listening on the default
// Heroku port
app.listen(process.env.PORT || 8080);

6. Pelo Terminal, acessar a pasta do repositório e rodar o seguinte comando:

npm update

7. Acessar o ambiente do Heroku e criar um nova aplicação
8. No painel da aplicação criada no Heroku, acessar a aba de Deploy e na área de Deployment method conectar no github ao reposiitório criado
9. Ainda na aba de Deploy, na área de Automatic deploys selecionar o botão de Enable Automatics Deploy
10. Pelo Terminal, acessar a pasta do repositório e realizar o primeiro Commite Push da aplicação:

git add .
git commit -m "First Commit"
git push origin master

11. Nesse momento, a aplicação está sendo enviada para o reposítório no Github e automaticamente executando o Deploy no Heroku. Dentro do ambiente do Heroku, na aba de Activity, estará mostrando o status do deploy. Quando mostrar que o Deploy foi realizado com sucesso, é possível acessar online a aplicação funcionando clicando em Open App no canto superior direito ou acessando o link https://nome_da_aplicacao_do_heroku.herokuapp.com