Aplikacja Angular na Heroku

Udało! Super duper appka skończona i czas na deploy. Ale jak to zrobić? W tym artykule dowiesz się jak wrzucić appkę napisaną w Angularze na Heroku w niecałe 10 minut.

Czego potrzebuję?

1. Przede wszystkim potrzebne jest konto na Heroku.
2. Wrzuć swoją aplikację na Githuba.

Zaczynamy! Konfiguracja Heroku

Utwórz nową aplikację:

Przejdź do ustawień aplikacji i kliknij zakładkę „Deploy”. Następnie połącz konto Github z Heroku.

Konfiguracja po stronie Angulara

Upewnij się, że masz „@angular/cli”, „@angular/compiler-cli” i „typescript” w zależnościach projektu(Plik package.json – dependencies). Jeżeli ich tam nie ma to zainstaluj je:

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

Do uruchomienia aplikacji potrzebny będzie prosty serwer. Zainstaluj serwer:

npm install express --save

Utwórz plik server.js w katalogu głównym aplikacji:

const express = require('express');
const path = require('path');
const app = express();

app.use(express.static(__dirname + '/dist/pomodoras'));
app.get('/*', function(req,res) {
    res.sendFile(path.join(__dirname + '/dist/pomodoras/index.html'));
});
app.listen(process.env.PORT || 8080);

Dodaj skrypty do package.json:

"heroku-postbuild": "ng build"
"start" : "node server.js"

Dodaj informację dla Heroku o wersji node i npm(również w package.json)

"engines": { "node": "x.x.x", "npm": "x.x.x" }

Deploy!

Wróć do Heroku i wciśnij magiczny przycisk w zakładce deploy: