playbook
Zet je eerste Hello World-app live met Angular en Python
Bouw een eenvoudige Angular-frontend met een Python-backend, zet hem online en koppel je eigen domein eraan. Een praktische eerste kennismaking met het live zetten van een webapplicatie.
4u
duur
€ 50
budget
Aarden
tempo
Er is iets bijzonders aan het typen van een domein in een browser en zien verschijnen wat je zelf hebt gebouwd. Dit project brengt je daar. Je scaffoldt een Angular-frontend, koppelt een kleine Python- en Flask-backend en zet het geheel live.
Je begint lokaal: installeer Node en de Angular CLI, maak een project aan en voeg daarna een Flask-app toe die antwoordt met "Hello, World!" Zodra beide op je eigen machine draaien, deploy je naar een hostingplatform, voeg je een Procfile toe en push je je code. De laatste stap is DNS: een CNAME-record dat je eigen domein verbindt met de gedeployde app. Het is een kleine applicatie, maar hij leidt je door elke laag van het online zetten van echte software, en dat is precies de kennis die je meeneemt naar grotere projecten.
door PlayTryBe team
Installeer Node.js en daarna de Angular CLI met npm install -g @angular/cli. Maak een project aan met ng new hello-world en voer ng serve uit om te controleren of alles werkt.
Voeg een Python-backend toe: installeer Flask, maak app.py aan met één route die 'Hello, World!' teruggeeft en test hem op localhost:5000.
Deploy naar een hostingplatform. Voeg een Procfile toe, commit je code met git en zet hem live.
Koppel je domein aan de app door een CNAME-record toe te voegen in het DNS-paneel van je registrar en wacht vervolgens tot de wijziging is doorgevoerd.
Suggestie: Geef DNS-wijzigingen de tijd; het kan even duren voordat ze van kracht zijn.Open je eigen domein in een browser en zie je Hello World-pagina laden. Dat is een volledige app, live op het internet.
Voor wie dit nadoet