Passo 1
O primeiro passo é criar um app Angular em seu computador, e para isso vamos usar o Angular CLI.
No seu terminal, execute os seguintes comandos:
npm install -g @angular/cli
ng new my-app
cd my-app
Dessa forma você já deve conseguir rodar um ng serve e uma aplicação default Angular vai rodar em seu computador!
Passo 2
O próximo passo é criar rotas no backend que atendam requisições ao App. Para isso vamos criar um arquivo server.js, com o seguinte conteúdo:
const express = require('express')
const path = require('path')
const port = process.env.PORT || 3000
const app = express()
app.use(express.static(path.join(__dirname, 'dist', 'my-app'
)))
app.get('/', function (req, res) {
res.sendFile(path.join(__dirname, 'dist', 'my-app', 'index.html'))
})
app.listen(port)
Após criar o arquivo, vamos instalar em nosso projeto as dependências que ele usa.
npm install express path
Passo 3
Para que o build de produção seja criado ao fazer o deploy para a Umbler, você precisa ajustar o seu package.json.
Mude o conteúdo do start script para:
"start": "node server",
Adicione um script de postinstall , com o seguinte comando:
"postinstall": "npm run build",
E ajuste o comando de build para:
"build": "ng build --prod",
O postinstall é executado após a execução do npm install, criando o build de prod da sua aplicação dentro da pasta build. Já o start executa o arquivo server.js, que inicia o Express na porta 3000.
Finalmente para fazer o deploy na Umbler, esse guia pode ajudar: