LaaS steps

Blog posts dedicated to Pull Requests, tutorials explaining each step in the process of building LaaS.

Step 6: backend

In this Pull Request, we are adding a backend to our project. We will be using PosgreSQL database running in a Docker container in our local development environment. We will also upgrade Angular to version 8, just because it came out recently and there’s no reason not to keep our dependencies fresh. We will begin …

Step 6: backend Read More »

Step 5: stub server

The stubs we introduced previously are good enough, but there’s a serious drawback: the stubs that are only supposed to be used in development and end to end testing become a part of our production build, along with the ApiServiceStub – this is obviously less than ideal. A better solution is an external stub server: …

Step 5: stub server Read More »

Step 4: log in and reset password

The code at this point is deployed to https://04-stubs.laas.sh/. In this PR, we are adding multiple pages in app-routing.module.ts: Let’s go page by page. Log In page We render a form with two inputs in log-in-page.component.html: The logic is found in log-in-page.component.ts: We are using Reactive Forms approach here, note how formGroup is constructured using …

Step 4: log in and reset password Read More »

Bonus step 3.5: routing animations

Let’s have a little fun with animations: https://github.com/laas-sh/laas-sh-app/pull/5/files. We are going to add an animation on every route change. To do that, we attach an animation to the router-outlet wrapper in app.component.html: We are introducing a new observable in MiscService called page$ – it will emit every time the page changes. This is what it …

Bonus step 3.5: routing animations Read More »

Step 3: i18n, multi-lingual support

Fun fact: i18n stands for internationalization and can you guess what 18 means? Hint: it’s the same meaning as 11 has in a11y. We are going to support English, because everybody speaks it, and Russian, because I speak it. Let’s dive in: https://github.com/laas-sh/laas-sh-app/pull/3/files (deployed to https://03-multilingual.laas.sh). We’ll need to render pages in correct language in …

Step 3: i18n, multi-lingual support Read More »

Step 2: SSR, Server-Side Rendering

Our second PR adds SSR: https://github.com/laas-sh/laas-sh-app/pull/2/files (deployed to https://02-ssr.laas.sh). SSR is pretty much obligatory for any SPA (single page application) – without the Server-Side Rendering, the search engines don’t see your app content, only an empty shell. If you checkout the first branch 01-initial-setup, run npm start and then open page source in your browser, …

Step 2: SSR, Server-Side Rendering Read More »

Step 1: Initial Setup

We begin here, with our first PR: https://github.com/laas-sh/laas-sh-app/pull/1/files. To follow along, run these commands one by one: Then open http://localhost:4200/ in your browser, you should see this: The app doesn’t do much at this point, but there are quite a few things we bootstrap here. First of all, it’s an Nx monorepo already, with a …

Step 1: Initial Setup Read More »