Merge pull request #541 from navikt/express-server

Bytt ut nginx med express

.dockerignore

@@ -1 +1,2 @@
 node_modules/
+server/node_modules/

.env.template

@@ -0,0 +1,4 @@
+NODE_ENV=development
+SU_SE_BAKOVER_URL=http://localhost:8080
+AMPLITUDE_API_KEY=x
+FEATURE_HENDELSESLOGG=false

.github/workflows/branch.yml

@@ -18,7 +18,9 @@ jobs:
               with:
                   node-version: '12.x'
             - name: install deps
-              run: npm install
+              run: npm ci
+            - name: lint and typecheck
+              run: npm run lint-and-typecheck
             - name: build client
               run: npm run build
             - name: Build and publish Docker image

.github/workflows/master.yml

@@ -20,7 +20,9 @@ jobs:
               with:
                   node-version: '12.x'
             - name: install deps
-              run: npm install
+              run: npm ci
+            - name: lint and typecheck
+              run: npm run lint-and-typecheck
             - name: build client
               run: npm run build
             - name: Build and publish Docker image

.github/workflows/pull_request.yml

@@ -15,6 +15,8 @@ jobs:
               with:
                   node-version: '12.x'
             - name: install deps
-              run: npm install
+              run: npm ci
+            - name: lint and typecheck
+              run: npm run lint-and-typecheck
             - name: build client
               run: npm run build

.gitignore

@@ -2,6 +2,7 @@ node_modules
 .cache
 .parcel_cache
 dist
+server/dist
 .idea/
 .eslintcache
 .DS_STORE

Dockerfile

@@ -1,10 +1,23 @@
-FROM openresty/openresty:centos
+FROM navikt/node-express:12.2.0-alpine
 
-RUN rm /etc/nginx/conf.d/default.conf
-COPY nginx.conf /etc/nginx/conf.d/nais.conf
-COPY nginx.app.conf /etc/nginx/conf.d/app.conf
-COPY dist/* /app/www/
+ENV NODE_ENV production
+ENV BASE_DIR /app
+ENV FRONTEND_DIR ${BASE_DIR}/frontend
+ENV BACKEND_DIR ${BASE_DIR}/server
+ENV PORT 80
 
-COPY docker-entrypoint.sh /
-ENTRYPOINT ["/docker-entrypoint.sh"]
-CMD ["nginx", "-g", "daemon off;"]
+RUN mkdir -p ${BASE_DIR}
+
+COPY dist ${FRONTEND_DIR}
+COPY server ${BACKEND_DIR}
+# Trengs av server-bygget
+COPY tsconfig.json ${BASE_DIR}/
+
+WORKDIR ${BACKEND_DIR}
+RUN npm ci
+RUN npm run build
+
+EXPOSE ${PORT}
+
+ENTRYPOINT [ "sh", "-c" ]
+CMD ["NODE_ENV=production npm start"]

README.md

@@ -4,63 +4,63 @@ Frontend for Su-Se som slår opp informasjon om brukere som har søkt om suppler
 
 ## Kjøre lokalt
 
-Første gang: kjør `npm install` for å laste ned avhengighetene
+Første gang:
 
-`npm run start` for å starte appen
+```sh
+$ cp .env.template .env # for å sette opp lokale miljøvariabler
+$ npm install # installerer avhengigheter
+```
+
+Starte for lokal utvikling:
+
+```sh
+$ npm start
+```
+
+Denne starter opp `express`-serveren med `parcel`-middleware som ordner med bygging av frontenden.
 
 ## Bygge prod-versjon
 
-`npm run build` for å kompilere
+### Frontend
+
+```sh
+$ npm run build
+```
+
+Output havner da i `./dist`-mappen.
+
+### Backend
+
+```sh
+$ cd server
+$ npm run build
+```
+
+Output havner da i `./server/dist`-mappen.
+
+#### Teknisk
+
+Frontend bygges hvor som helst, da output derfra bare er statiske filer (`.html`, `.css`, `.js` osv).
+For backend sin del så er den f.eks. avhengig av `node_modules`, så det er greit om den bygges (og avhengigheter installeres) der den skal kjøre.
+Dette gjøres nå i [./Dockerfile]().
 
 ## Miljøvariabler
 
 Vi er avhengige av noen variabler som varierer med miljø; for eksempel URL til su-se-bakover.
-Siden frontend bare bygges én gang og deployes til forskjellige miljøer kan vi ikke bruke `process.env` direkte (da de bare er compile-time).
-
-Vi bruker en kombinasjon av https://www.npmjs.com/package/posthtml-expressions og `envsubst` i [./docker-entrypoint.sh]() for å få til dette.
+Disse styres gjennom `.env` lokalt og på vanlig måte i miljøene.
 
 ### Legge til ny variabel
 
-1. Legg den til på `window` i [./src/index.html]()
-1. Legg den til i `variables` i [./posthtml.config.js]()
-    - Verdien på denne er default-verdien som brukes lokalt
-    - Hvis verdien skal være forskjellig for utviklerne, kan det være praktisk å definere den i `.env`
-1. Legg til den faktiske verdien i [./nais-dev.json]() og [./nais-prod.json]()
+1. Legg den til i [./.env]() (og [./.env.template]()), [./nais-dev.json]() og [./nais-prod.json]()
     - **Merk**: Hvis verdien er hemmelig så må man heller legge den inn i `Vault` enn i `nais.json`-filene
+2. Legg den til i [./server/config.ts](); enten i `server`- eller `client`-verdien, avhengig av hvor den skal brukes
 
-Merk: variabelnavnet må være identisk med navnet på miljøvariabelen
-
-#### Eksempel:
-
-```js
-// src/index.html
-window.MIN_VARIABEL = '{{MIN_VARIABEL}}';
-
-// posthtml.config.js
-const variables = {
-    // ...
-    MIN_VARIABEL: 'fin verdi som brukes lokalt'
-    // eller
-    MIN_VARIABEL: process.env.MIN_VARIABEL // i kombinasjon med å definere den i .env-filen
-};
-
-// nais-dev.json
-{
-  // ...
-  "env": {
-    // ...
-    "MIN_VARIABEL": "denne brukes i test"
-  }
-}
-
-// nais-prod.json
-{
-  // ...
-  "env": {
-    // ...
-    "MIN_VARIABEL": "denne brukes i prod"
-  }
-}
-```
+### Miljøvariabler for frontend (teknisk)
+
+Det er satt opp slik at denne konfigurasjonen settes i en `script`-tag av typen `application/json`, som så lastes inn og parses runtime (i frontend).
+
+Under lokalutvikling gjøres dette av `posthtml` (med `posthtml-expressions`) som en del av Parcel-bygget.
+Ute i miljøene gjøres det gjennom bruk av `handlebars`.
+Vi utnytter at både `posthtml-expressions` og `handlebars` har samme syntax for å sette inn "unescaped" verdier (`{{{verdi}}}`).
 
-Man kan nå fint bruke `window.MIN_VARIABEL` i frontendkoden.
+Se [./src/index.html](), [./posthtml.config.js](), [./server/config.ts]() og [./server/routes.ts]() for mer info.

nais.yml

@@ -11,11 +11,11 @@ spec:
    replicas:
       min: 1
    liveness:
-      path: isalive
-      port: 8080
+      path: isAlive
+      port: 80
    readiness:
-      path: isready
-      port: 8080
+      path: isReady
+      port: 80
    ingresses:
       - {{ingress}}
    env:

nodemon.json

@@ -0,0 +1,5 @@
+{
+    "watch": ["server"],
+    "exec": "ts-node --project ./server/tsconfig.json server/index.ts",
+    "ext": "ts"
+}