Framoverlent front-end - del 4

Framoverlent front-end - del 4

Web-utvikling har kommet langt siden starten for over 20 år siden. I denne artikkelserien skal vi vise deg hvor lett du kan komme i gang med moderne front-end!

Del 4 – Så langt har vi sett på oppsett av webpack, laget enkel markup med React, laget litt mer avansert mark-up og hentet data fra og lagret til Firebase. I denne artikkelen skal vi publisere applikasjonen i skyen, på Heroku.

Del 4 - Heroku - Skybasert hosting/publisering

Heroku er en skybasert applikasjonsplattform og har støtte for Ruby, Node.js, Python, Java, Go, PHP og såkalte «custom buildpacks» dersom du ønsker å skrive i et annet språk. Vi har skrevet JavaScript og har fokus på Node så alt er klargjort for at Heroku henter inn de dependencies vi har spesifisert i package.json

For å deploye til Heroku forutsettes det at du har installert Git (Det finnes alternativer, men de dekkes ikke her.)

Det er relativt enkelt å deploye applikasjonen vår til Heroku, og dokumentasjonen på Heroku er ypperlig.

Men før vi begynner med Heroku må vi lage oss en server, Heroku er bare en applikasjonsserver, så vi må selv sørge for webserveren. Så langt har vi benyttet webpack-dev-server lokalt, det er en node.js Express server, og det er det vi skal lage og deploye til Heroku også.

Vi installerer express og lagrer den som en dependency:

$ npm install express --save

Deretter oppretter vi en ny fil; dist/server.js

Serverfilen er ganske enkel; Det er noen deklarasjoner på toppen; express som importeres, vår app som startes med å kalle express() samt et par variabler for å holde informasjon om kjøremiljø og tilhørende portnummer.

Deretter setter vi express til å bruke statiske filer og peker på dist-mappen, som skjuler seg bak __dirname, slik at webserveren finner dist/index.html. Og til slutt ber vi serveren lytte på port 3000 så lenge den kjører lokalt, ellers den porten som node bestemmer når den kjøres i produksjon (på Heroku.)

Du kan starte serveren lokalt med før vi deployer på Heroku for å sjekke at alt virker som det skal: 

$ npm start

Og deretter navigere til http://localhost:3000

Først må du lage deg en konto på Heroku, og deretter installere Heroku Toolbelt som du finner på denne siden. Der finner du også mer detaljerte instruksjoner for installasjon og autentisering dersom du er bak en proxy eller brannmur.

Naviger til prosjektmappen din i terminalenvinduet og logg på Heroku med: 

Du blir da bedt om å supplere e-post og passord og dersom disse er korrekt får du beskjed om at autentiseringen lykkes:

$ heroku login
Enter your Heroku credentials.
Email: kalle.kanin@kalles.com
Password:
Authentication successful.

Først må vi lage en heroku app (her sender jeg med et navn på appen, om du ikke gjør det vil heroku lage et for deg:

$ heroku create fremoverlent-demo
Creating fremoverlent-demo... done, stack is cedar-14
http://fremoverlent-demo.herokuapp.com/ | https://git.heroku.com/fremoverlent-demo.git
Git remote heroku added

Så kommer Git inn i bildet, vi bruker push for å overføre koden som til nå har logget lokalt, til serveren:

$ git push heroku master
Counting objects: 5, done.
Delta compression using up to 8 threads.
Compressing objects: 100% (5/5), done.
Writing objects: 100% (5/5), 559 bytes | 0 bytes/s, done.
Total 5 (delta 3), reused 0 (delta 0)
remote: Compressing source files... done.
remote: Building source:
remote:
remote: -----> Node.js app detected
remote:
remote: -----> Creating runtime environment
remote:
remote: NPM_CONFIG_LOGLEVEL=error
remote: NPM_CONFIG_PRODUCTION=true
remote: NODE_ENV=production
remote: NODE_MODULES_CACHE=true
remote:
remote: -----> Installing binaries
remote: engines.node (package.json): unspecified
remote: engines.npm (package.json): unspecified (use default)
remote:
remote: Resolving node version (latest stable) via semver.io...
remote: Downloading and installing node 0.12.7...
remote: Using default npm version: 2.11.3
remote:
remote: -----> Restoring cache
remote: Loading 1 from cacheDirectories (default):
remote: - node_modules
remote:
remote: -----> Building dependencies
remote: Pruning any extraneous modules
remote: unbuild path@0.11.14
remote: Installing node modules (package.json)
remote:
remote: -----> Caching build
remote: Clearing previous node cache
remote: Saving 1 cacheDirectories (default):
remote: - node_modules
remote:
remote: -----> Build succeeded!
remote: ├── express@4.13.3
remote: ├── firebase@2.2.9
remote: ├── react@0.13.3
remote: └── reactfire@0.5.0
remote:
remote: -----> Discovering process types
remote: Procfile declares types -> (none)
remote: Default types for Node.js -> web
remote:
remote: -----> Compressing... done, 11.0MB
remote: -----> Launching... done, v8
remote: https://fremoverlent-demo.herokuapp.com/ deployed to Heroku
remote:
remote: Verifying deploy.... done.
To https://git.heroku.com/fremoverlent-demo.git
* [new branch] master -> master

Så må vi forsikre oss om at app'en vår er startet:

$ heroku ps:scale web=1
Scaling dynos... done, now running web at 1:Free.

(for å stoppe appen setter du scale web=0)

Og til slutt kan du åpne appen i nettleseren din med:

$ heroku open

Det var vel ikke verst! Nå er dette selvsagt en veldig enkel applikasjon, og alle ting som vi har snakket om i denne artikkelserien er beskrevet i hele på konferanser, i tutorials, på videoer, i et uttall bøker og websider, så det er mye å ta tak i når du skal begynne å se på dette. Men start i det små, og legg sten på sten.

Dersom du bruker denne demo'en som et utgangspunkt for videreutvikling så kan du enkelt oppdatere heroku-instansen med 

$ git commit -am"en eller annen fornuftig commit-melding"
$ git push heroku master

Litt avhengig av endringene dine, så er det mulig du må stoppe og starte appen med 

$ heroku ps:scale web=0
$ heroku ps:scale web=1

Lykke til med kodingen!

Artikkelserien

Del 1 – npm og webpack - Basics/Kom i gang med npm og webpack

Del 2 – CSS og React - Innhold med form og farge

Del 3 – Firebase - Skybasert database for lagring og henting av data

Del 4 – Heroku - Skybasert hosting/publisering

Mer lesing

Heroku

Express

Git-docs

Kildekoden til hele artikkelserien

Her ligger demo-applikasjonen som er deployet på Heroku, nedenfor finner du linker til de andre artiklene og kildekoden artikkelserien.

 

Om bloggeren:
Frontendutvikler. Glad i Javascript. Har hakket sammen websider siden midten av 90-tallet, og trives godt med det.

comments powered by Disqus