DEV Community: Jeffrey Bosch

Template validations made easy with Validointi

Jeffrey Bosch — Wed, 22 Feb 2023 11:50:36 +0000

Have you ever created an Angular template form? Did you like the way you needed to do validations if it goes a bit further than required? Here comes a pain for many Angular developers and probably one of the reasons why a lot of Angular developers choose reactive forms over template forms.

TLDR

The article explains how to use Validointi, a library that makes it easy to perform validations for Angular template forms beyond simple validations like "required". Validointi allows developers to use schema validation libraries like Vest, AJV, or Joi with Angular. The article covers basic concepts like Model, Validation Library, and Adapters and provides a step-by-step guide to hook up Validointi to an Angular template form.

In this article, we are going to have a look at an easy way to use template forms and go beyond a simple required validation by using Validointi. An easy to use library for Angular developers with a powerful setup to have a great developer experience.

Introduction to Validointi

To understand everything that we will cover in this article I will explain a couple of the basic concepts of Validointi.

Model

A model contains the information that we will use in our form. Below is an example of a simple model that represents a simple form. The model should always contain information and never any behavior. In the example below we have a simple model with a definition for: name, email, password and a confirm password. This model will be used during the reset of the article as a baseline.

{
    name: 'Your name',
    email: 'info@example.org',
    password: 'a-p-a-s-s-w-o-r-d',
    confirmPassword: 'a-p-a-s-s-w-o-r-d'
}

Validation library

By using Angular and more specifically Angular Forms, you will be provided by a couple of default validators like required, min, max and regex. The provided out of the box validators are directives that represent the HTML5 standard. When a form is getting more complex, we need to create custom validations. These validations can be plain functions with for example a regex, but we need to hook up the function to a directive to apply the validation to the template field.

This is a lot of work for just a simple regex tests and most of the Angular devs don’t like this approach. In several other frontend frameworks, you can use schema validation libraries like Vest, AJV or Joi. In Angular this is not a “common” approach however, here is where Validointi comes into place. Validointi makes it possible to use these kinds of libraries easily with Angular. More on this later.

Adapters

This is the last part of the concepts and probably this is the easiest one. Adapters do the heavy lifting to attach a library as Vest to Angular. Adapters are plain functions and can be created for a custom validation library. Today we will only use the Vest adapter.

Hooking up Validointi to Angular

First let us set up the Angular template form, be aware we will use the new standalone API that has been introduced in Angular v15. In this article, we will not go into the exact details of template form.

The form is pretty straightforward it is a registration form with a name, email, password and a confirm password. As we are using template forms we need to bind the model with ngModel.

<form  (ngSubmit)="onSubmit($any(form))" #form="ngForm">
  <label for="name">
    <span>Your name</span>
  </label>
  <input
    type="text"
    name="name"
    placeholder="Fill in your name"
    [(ngModel)]="model.name"
  />

  <label for="email">
    <span>Your email</span>
  </label>
  <input
    type="email"
    name="email"
    placeholder="Fill in your email"
    [(ngModel)]="model.email"
  />
  <label for="password">
    <span>Your password</span>
  </label>
  <input
    type="password"
    name="password"
    placeholder="Fill in your password"
    [(ngModel)]="model.password"
  />
  <label for="confirmPassword">
    <span>Your confirm password</span>
  </label>
  <input
    type="password"
    name="confirmPassword"
    placeholder="Fill in your confirm password"
   [(ngModel)]="model.confirmPassword"
  />

  <input type="submit" value="Submit" [disabled]="form.invalid" />
</form>

Now that we know how the HTML looks like have a look at the component code. The code is simple, we import the FormsModule, define a empty model and have a function that will be used when submitting the form.

import { Component, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

interface Model {
  name: string;
  email: string;
  password: string;
  confirmPassword: string;
}

@Component({
  selector: 'app-template-form',
  standalone: true,
  imports: [CommonModule, FormsModule],
  templateUrl: './template-form.component.html',
  styleUrls: ['./template-form.component.css'],
})
export class TemplateFormComponent {
  model: Model = { name: '', email: '', confirmPassword: '', password: '' };

  async onSubmit(data: any) {
  }
}

As the basics are set now we are going to hookup Validointi. First we import the directives that Validointi provides.

import { Component, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
+ import {
+  createVestAdapter,
+  ValidatorRegistryService,
+  ValidatorDirective,
+ } from '@validointi/core';
+ import { create, enforce, test } from 'vest';

@Component({
  selector: 'app-template-form',
  standalone: true,
- imports: [CommonModule, FormsModule],
+ imports: [CommonModule, FormsModule, ValidatorDirective],
  templateUrl: './template-form.component.html',
  styleUrls: ['./template-form.component.css'],
})

We can now make the validations for our model. As we explained earlier we will use Vest in our example and that is why we have imported it.

Vest works with a suite, a suite is similar to a unit testing suite in Jest or Mocha. The following part will be recongnicable. In this suite we will validate the model with different rules, these rules can be sync or async.

const suite = create((data: Model = {} as Model, field?: string) => {
  test('name', 'Name is required', () => {
    enforce(data.name).isNotBlank();
  });

  test('name', 'Name must be at least 3 characters long', () => {
    enforce(data.name).longerThan(2);
  });

  test('email', 'Email is required', () => {
    enforce(data.email).isNotBlank();
  });
  test('email', () => {
    enforce(data.email)
      .message('Not an valid email address')
      .matches(/^[^@]+@[^@]+$/);
  });

  test('password', 'Password is required', () => {
    enforce(data.password).isNotEmpty();
  });
  test('password', 'Password is too short', () => {
    enforce(data.password).longerThan(2);
  });
  test('password', 'Password is weak. maybe add a number', () => {
    enforce(data.password).matches(/[0-9]/);
    enforce(data.password).longerThanOrEquals(6);
  });

  test('confirmPassword', 'Passwords do not match', () => {
    enforce(data.confirmPassword).equals(data.password);
  });
});

The only missing part is to hookup the test suite with the Angular form. Here is where validointi is coming into play. And, it is SOO easy, let’s see some code

@Component({
  selector: 'app-template-form',
  standalone: true,
  imports: [CommonModule, FormsModule, ValidatorDirective],
  templateUrl: './template-form.component.html',
  styleUrls: ['./template-form.component.css'],
})
export class TemplateFormComponent {
  model: Model = { name: '', email: '', confirmPassword: '', password: '' };

+  #vr = inject(ValidatorRegistryService);
+  validate = this.#vr.registerValidator('form1', createVestAdapter(suite));

  async onSubmit(data: any) {
+    const validationResult = await this.validate(data);
+    console.dir(validationResult);
  }
}

- <form (ngSubmit)="onSubmit($any(form))" #form="ngForm">
+ <form validationId="form1" (ngSubmit)="onSubmit($any(form))" #form="ngForm">

In the code we used registered our validation by using the ValidatorRegistryService and added our Vest Suite to a validation function. When submitting a form we will validate the form with our test suite. In the HTML we will see the different error states when the test suite returns an invalid response.

As we can see we have separated all of our test logic to the test suite and by using a simple service + adapter provided by Validointi we can use the test suite in our Angular template form.

Below is a Stackblitz example of the complete project that you can use.

Bonus

Personally, I’m a believer in keeping your components as thin as possible and deriving logic to services. In our example we added test logic, logic to hookup validointi etc. In our example it is still pretty simple but you can imagen that when there are more complex forms and validation rules this is not the best way.

That is why I made the following changes to make our component thin again.

Removed all the test logic and moved it to the data-service.ts
Removed the validointi logic and moved it to the data-service.ts
Injected the data-service.ts and use it in our submit function.

Now our component is thin again and we have separated our “business logic” to a service (where it should be in the first place)

Summary

In summary, Validointi makes it easy to perform “complex” validations in Angular template forms without the hassle of making directive and validation functions. Validointi allows developers to use schema validation libraries like Vest, AJV, or Joi with Angular.

Thank you for reading this article and if you are interested in Validointi, have a look at: https://validointi.github.io. I would like to thank Sander Elias for proof reading the article

You can always hang out with me in one of the Dutch Angular Events or send me a DM at @jefiozie

How to build a JamStack app with Angular Scully and Prisma

Jeffrey Bosch — Wed, 02 Feb 2022 19:29:35 +0000

TLDR;

By using Angular Scully and Prisma we have a powerful ecosystem where we can leverage full type safety and easily connect to a database that contains data that will be injected into the components by Scully. After the Scully process, we can upload our app to a CDN and have a fully working SEO-friendly Angular app.

What is Prisma?

Prisma is an open-source ORM, it consists of three parts:

Prisma Client: Auto-generated and type-safe query builder for Node.js & TypeScript
Prisma Migrate: Migration system
Prisma Studio: GUI to view and edit data in your database

Prisma Client can be used in any Node.js (supported versions) environment. The power of Prisma is that they have a good and powerful type safety solution when using it with Typescript, and by default supports a set of Easy to use querIes.

What is Scully

Scully is the static site generator for Angular projects looking to embrace the Jamstack.

It will use your application and will create a static index.html for each of your pages/routes. Every index.html will have the content already there, and this will make your application show instantly for the user. Also, this will make your application very SEO-friendly. On top of this, your SPA will still function as it did before.

How to set up an Angular app with Scully?

In this article, we are not going very deep into the setup of Angular and Scully. For a good reference, you can have a look at the repo. Below are the steps you can follow along:

First, let’s set up a new Angular app

npx ng new ng-scully --minimal

Second, let’s add Scully to the Angular application

ng add @scullyio/init

Scully schematics will do the following:

Add Scully dependencies to package.json and install it
Import ScullyLibModule to AppModule
Add 'zone.js/dist/task-tracking' to polyfills.ts
Add scully.<project_name>.config.ts to the root directory. This is Scully configuration file that we will utilize to configure Scully.

Now we have a setup that works with Angular, but we need to take one step more for this demo.

ng generate @scullyio/init:blog

The above command adds the blog modules' routes to the Angular application.
In addition, it creates a ./blog folder for the blog's markdown files.

How to use Prisma with Scully?

I’ve made the choice to use postgress as my database, in combination with docker.

Below I’m showing you my docker-compose file:

version: '3'
services:
 postgres:
    image: postgres
    ports:
      - "5432:5432"
    restart: always
    environment:
      POSTGRES_USER: prisma
      POSTGRES_PASSWORD: prisma
    volumes:
      - postgres:/var/lib/postgresql/data
volumes:
  postgres:

Now we only need to run it so that Prisma can connect to it.

docker-compose up -d

Now we can continue with Prisma, first we need to install Prisma

npm install prisma --save-dev

After installation we will run the init command as shown below:

npx prisma init

This init command will setup Prisma with the required files in the directory.

After this we need to change the .env file with our database connection:

DATABASE_URL="postgresql://prisma:prisma@localhost:5432/mydb?schema=public"

Setup Prisma configuration

To use Prisma with Scully we first need to add the setup for Prisma.

As Prisma is an ORM for a database we need to tell Prisma what tables and/ or database it is connected to. This information is placed in the schema.prisma file:

// This is your Prisma schema file,

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

model Post {
  id        Int     @id @default(autoincrement())
  title     String
  content   String?
  published Boolean @default(false)
  author    User?   @relation(fields: [authorId], references: [id])
  authorId  Int?
}

model User {
  id        Int      @id @default(autoincrement())
  name      String?
  email     String?  @unique
  createdAt DateTime @default(now()) @map(name: "created_at")
  updatedAt DateTime @updatedAt @map(name: "updated_at")
  posts     Post[]

  @@map(name: "users")
}

Note: You're occasionally using @mapand@@mapto to transform some field and model names to different column and table names in the underlying database.

This Prisma schema defines two models, each of which will map to a table in the underlying database: User and Post. Notice that there's also a relation (one-to-many) between the two models, via the author field on Post and the posts field on User.

Now that we have our schema defined, we need to create our tables in our database. This can be done by running the following CLI command:

npx prisma db push

You should see the following output:

Environment variables loaded from .env
Prisma schema loaded from prisma\schema.prisma
Datasource "db": PostgreSQL database "mydb", schema "public" at "localhost:5432"
The database is already in sync with the Prisma schema.
✔ Generated Prisma Client (3.8.1 | library) to .\node_modules\@prisma\client in
75ms

As our database is ready to be used, let’s add some data. We are going to use Prisma Studio, this is an easy way to explore and manipulate the data. You can open up Prisma Studio by running

npx prisma studio

Create a Prisma Scully Plugin

As we now have an operating database and an ORM library (Prisma) we now can use all these parts to receive the data and use it in Scully. Let’s start by creating the first basis for our custom plugin.

import { PrismaClient } from "@prisma/client";
import {
  HandledRoute,
  logError,
  registerPlugin,
  RouteConfig,
} from "@scullyio/scully";
import { convertAndInjectContent } from "@scullyio/scully/src/lib/renderPlugins/content-render-utils/convertAndInjectContent";
export const prismaPlugin = "prismaPlugin";
const prisma = new PrismaClient();
const routerPlugin = async (route: string, config: RouteConfig) => {
  // here we are looking up all posts
  const data = await prisma.post.findMany({
    // where the published property is true
    where: { published: true },
    // and we include the author
    include: {
      author: {
        // and we only want the author's name
        select: { name: true },
      },
    },
  });
  return Promise.resolve(
    // let's loop over all posts
    data.map((post) => {
      // and return a new route for each post
      const { id, title, published, author, content } = post;
      return {
        ...config,
        route: `/blog/${id}`,
        data: {
          id,
          title,
          published,
          author: author.name,
          content,
        },
      } as HandledRoute;
    })
  );
};
registerPlugin("router", prismaPlugin, routerPlugin);

async function prismaDomPlugin(dom: any, route: HandledRoute | undefined) {
  if (!route) return dom;
  try {
    try {
      // here we use the power of scully and use the filehandler to convert the content to html
      return convertAndInjectContent(dom, route.data.content, "md", route);
    } catch (e) {
      logError(`Error during contentText rendering`);
      console.error(e);
    }
    return dom;
  } catch (e) {}
}

registerPlugin("postProcessByDom", prismaPlugin, prismaDomPlugin);

Let’s break this code down from the top.

import { PrismaClient } from '@prisma/client';
import { logError, registerPlugin, RouteConfig } from '@scullyio/scully';

//define our plugin name
export const prismaPlugin = 'prismaPlugin';

// setup our PrismaClient
const prisma = new PrismaClient();

// our router plugin
const routerPlugin = async (route: string, config: RouteConfig) => {
...
};

Now we are going to retrieve the posts with the Prisma client. When all the data is gathered we will return new routes that will be used on our post-render step.

const prisma = new PrismaClient();
const routerPlugin = async (route: string, config: RouteConfig) => {
  // here we are looking up all posts
  const data = await prisma.post.findMany({
    // where the published property is true
    where: { published: true },
    // and we include the author
    include: {
      author: {
        // and we only want the author's name
        select: { name: true },
      },
    },
  });
  return Promise.resolve(
    // let's loop over all posts
    data.map((post) => {
      // and return a new route for each post
      const { id, title, published, author, content } = post;
      return {
        ...config,
        route: `/blog/${id}`,
        data: {
          id,
          title,
          published,
          author: author.name,
          content,
        },
      } as HandledRoute;
    })
  );
};

The post-process plugin is used to transform the render HTML. In our custom plugin, we make use of the Scully system, the converAndInjectContent function will look at the fileHandler plugins, and if it finds an extension of a file type. In our case, it will look for the fileHandler for markdown files. This plugin will transform our data coming from the database from markdown to HTML.

async function prismaDomPlugin(dom: any, route: HandledRoute | undefined) {
  if (!route) return dom;
  try {
    try {
      // here we use the power of scully and use the filehandler to convert the content to html
      return convertAndInjectContent(dom, route.data.content, "md", route);
    } catch (e) {
      logError(`Error during contentText rendering`);
      console.error(e);
    }
    return dom;
  } catch (e) {}
}

Now that we have set up our plugin, we need to make one new change to our Scully configuration. We need to change the original blog route to use our custom plugin, first, we need to import our custom plugin

import { prismaPlugin } from "./scully/plugins/plugin";

Then we need to define our router and post process plugin to being used in our blog route.

routes: {
    "/blog/:slug": {
      type: prismaPlugin,
    }
  }

Finally, we are ready to run our Scully system to scan for new routes, run npx scully --scan

$ npx scully --scan
  ✔ new Angular build files imported
  ✔ Starting servers for project "asp-example"
  ✔ Started Angular distribution server on "http://localhost:1864/" 
  ✔ Started Scully static server on "http://localhost:1668/"
  ✔ Scully Development Server is up and running
  ✔ Puppeteer is being launched
  ✔ Successfully scanned Angular app for routes
  ✔ Successfully added routes created from routePlugins
  ✔ Route list created in files:
     ".\src\assets\scully-routes.json",
     "dist\static\assets\scully-routes.json",
     "dist\asp-example\assets\scully-routes.json"

  ✔ Route "/blog" rendered into ".\dist\static\blog\index.html" 
  ✔ Route "/home" rendered into ".\dist\static\home\index.html" 
  ✔ Route "/" rendered into ".\dist\static\index.html" 
  ✔ Route "/blog/1" rendered into ".\dist\static\blog\1\index.html" 

Total time used 5.74 seconds
  4 pages have been created
  Rendering the pages took 2.99 seconds
  That is 1.34 pages per second,
  or 749 milliseconds for each page.

  Finding routes in the angular app took 2.68 seconds
  Pulling in route-data took 47 milliseconds

We now have our first page rendered with Angular, Scully, and Prisma.

Conclusion

With Prisma we have a powerful type of safety solution to connect to a database, combine this with the power of Scully we cn easily create static pages from an Angular application and upload it to a CDN.B

Create a Custom Angular CLI Builder

Jeffrey Bosch — Mon, 22 Mar 2021 00:00:00 +0000

In this post, we will try to explain the basics theory around the Angular CLI builders and how you can build a Custom Builder. How to build a Custom Builder will be done based on a builder we've created with a very general use case, Image Optimization. In this article, we will only show a simple example.

History

Back in the day, before Angular CLI version 8 the supported method to customize the Angular CLI was ng eject. When using this command we would say against the Angular CLI that we as developers would handle the configuration. Maybe you didn't know but under the hood of the Angular CLI is using Webpack. So when we did run the command the Angular CLI would eject the Webpack configuration to a file that we can change. Of course, this works, but you needed to know how and what to exactly change for your needs and the Webpack can be (in my opinion) a bit overwhelming when you look at it.

The Angular CLI today

As mentioned in the History of the Angular CLI when writing this post we are at version 11 and a lot has been changed. The ng eject command is removed from the Angular CLI. Since Angular CLI version 8 something new has made its place. This new part is called the Builders API. The Builders API makes it easy to extend general parts like ng build, ng serve, or make a custom CLI command like ng run mybuilder:app.

The builders we use today, every day!

Did you ever wondered what is happening when we use ng build or ng serve? The Angular CLI will start a new task based on the angular.json file. First, it will examine the angular.json looking for the project, in a single app set up this will be always the default application.

When this project has been found, it will look at the target, in our example, this target is build. Now the Angular CLI knows enough to execute the builder! Below I've made a simple table that shows what builders are represented with a default Angular CLI command:

Command	Builder
build	Browser builder
serve	Dev-Server builder
test	Karma builder
lint	TSLint builder	❗ this builder is deprecated from Angular v12
e2e	Protractor

So what is a builder then

Before I'm going to provide you with my explanation of builders, let's have a look at the docs.

Several Angular CLI commands run a complex process on your code, such as linting, building, or testing.
The commands use an internal tool called Architect to run CLI builders, which apply another tool to accomplish the desired task. 
With Angular version 8, the CLI Builder API is stable and available to developers who want to customize the Angular CLI by adding or modifying commands. 
For example, you could supply a builder to perform an entirely new task or to change which third-party tool is used by an existing command.

After reading this I made the following conclusion:

As a Angular Builder is just a function, you could refer it is a task. The Angular CLI is having an task-based system. This way we can say that the Angular CLI with the task-based system (called Architect) is delegating the tasks (builders).

For me, this made it easy in my mind to link specific commands to tasks and know that they are executed with specific commands provided by the Angular CLI.

How to create a custom builder?

Now that we've come to the part where we are going to look at the custom builder we first need to set up the project structure. Below a couple of minimal steps we need to take before we can continue with our builder:

Npm init
Git init
Add dependencies (minimal needed):
- Typescript
- @angular-devkit/architect
Add some npm scripts for building and testing our package
Add a “builder.json” file
Add "builders": "builders.json" to your package.json
Add an “index.ts” file

Our project structure is complete (see a full example)! Now we are going to create the Builder, in our next article we will address how you can use/connect your custom builder with the Angular CLI. The Angular CLI team has provided an easy way to set up our custom builder so that it can be executed with the Angular CLI. We need to import the createBuilder function. The createBuilder function is hooking up the task-based system from within the Angular CLI and lets you use your custom builder.

import { createBuilder, BuilderContext, BuilderOutput } from '@angular-devkit/architect'

// Schema Options
interface Options extends JsonObject {...}

// Our func. that is executed by the tasked based system
function customBuilderFunc(
  options: Options,
  context: BuilderContext,
  ): Promise<BuilderOutput> {
    // logging the message
    context.reportStatus(`Executing Custom Builder`);
    return new Promise(resolve => {
        // log message when we are done
      context.reportStatus(`Done running Custom Builder 🎉`);
    });
}

export default createBuilder(customBuilderFunc);

Summary

Builders are a very useful part of the Angular CLI that will make sure the CLI is very extensible. We can use builders for a variety of tasks that are related to the workspace(s). As builders are just functions we can do "ANYTHING". I've created a "demo" builder that is optimizing images in your workspace for better web performance. This builder will be in our next article where we will go a little bit deeper into, creating custom builders and how to hook them into your workspace. You can already have a look here

I hope you've enjoyed this article, all of this are from my personal experience. If you have any questions around builder you can always DM me on @jefiozie

Resources

Below I've added some helpful resources that you can have a look at if you're interested in builders.

Deploy your Angular app with Scully and Cloudflare Pages

Jeffrey Bosch — Mon, 15 Mar 2021 00:00:00 +0000

In this article, we will introduce you to Scully and explain how to deploy your Angular app with Scully to Cloudflare pages. This article is for people who are interested in setting up a JAMstack app with Angular, Scully, and Cloudflare pages.


 ❗ Pre-requisites ❗

- You should have some basic knowledge of Angular
- You should have a Cloudflare account
- You should have a Github account

What is Cloudflare pages

Cloudflare Pages is the solution for people that use JAMstack frameworks. Cloudflare Pages easily integrates with Github in a way that when you push a new version, Cloudflare automatically starts building and deploying your app on its network.

If you’re not familiar with JAMstack, it’s a popular way of developing and deploying websites at scale. You can look at this resource for more information about the JAMstack link

Coming back to Cloudflare Pages, as we said earlier it integrates with GitHub repositories if you’re hosting your source code on that platform. Once your site is configured, you can preview each commit from Cloudflare’s interface — each commit gets a unique URL and there’s a preview environment.

You can collaborate with other Cloudflare users by inviting them to your Pages project. When your site looks good in the preview branch, you can push it to the production branch.

So in summary, Cloudflare Pages lets you easily deploy your app without any hustle.

Setup your Angular app with Scully

Before we set up our Angular app, let's have a quick look at Scully.

Scully is the best static site generator for Angular projects looking to embrace the JAMstack. It will use your application and will create a static index.html for each of your pages/routes. Every index.html will have the content already there, and this will make your application show instantly for the user. Also, this will make your application very SEO-friendly. On top of this, your SPA will still function as it did before. A big advance of Scully is that it has an easy-to-use and extendible plugins system that will allow you to manipulate routes and content.

For this article, we will set up a really simple app, just so we can learn about Cloudflare Pages.

Before we are get started, go to Github and create a new repo, you can also go to https://repo.new this is an easy way to create a new repository at Github.

Clone the repo to your local machine, now let's continue by setting up a new Angular project.

npm install -g @angular/cli
ng new <YOUR-PROJECT-NAME> --routing

By running the command above we will be provided with a simple Angular app with a router module. When the Angular CLI is finished, we will have a fresh Angular workspace, with a pre-filled demo Angular app.

Let's continue by adding Scully, the Scully team has made this easy for us, we only need to run the following command:

ng add @scullyio/init

--- output should be something like below ---

Installing packages for tooling via npm.
Installed packages for tooling via npm.
    Install ng-lib
    ✅️ Added dependency
UPDATE src/app/app.module.ts (466 bytes)
UPDATE src/polyfills.ts (3019 bytes)
UPDATE package.json (1310 bytes)
- Installing packages (npm)...
√ Packages installed successfully.
    ✅️ Update package.json
    ✅️ Created scully configuration file in scully.demo-cloudflare-pages.confts
CREATE scully.demo-cloudflare-pages.config.ts (196 bytes)
UPDATE package.json (1384 bytes)
CREATE scully/tsconfig.json (450 bytes)
CREATE scully/plugins/plugin.ts (305 bytes)

We are now ready to use Scully with Angular, to do this we first need to build the Angular project. This can be done by running:

ng build --prod

Now that the Angular project is built, Scully can do its work. Run Scully with the following command:

npx scully

We did it! We turned your Angular app into a pre-rendered static site, we can now push our changes to our Github repo.

Setup your repository for Cloudflare pages

We are now ready to connect or freshly created app with Cloudflare pages.

Go to your Cloudflare account
On the right, click on Pages

3.Click on "Create a project"

4.Connect your Github account

5.When you successfully connected to Github, you can choose a repository. In our example, I'm selecting demo-cloudflare-pages

6.After selecting the project, click on Begin Setup

7.Scroll to Build Settings and fill in the same setting as the picture below

8.CLick on Deploy
9.Cloudflare will start working on building your app, this will fail, this is intended, don't worry we will fix it in the next chapter.

Deploy it with Cloudflare pages

We are almost ready to deploy our app, in the previous part we configured everything to be ready for deployment. But we still need to tweak a couple of things before we can use Cloudflare pages. So let's make these changes!

Open your package.json file and add the following snippet to the scripts:

    "buildStaticApp": "ng build --prod && npx scully --scanRoutes"

2.Open up your scully configuration file, in our case scully.demo-cloudflare-pages.config.ts
3.Add the following snippet to the configuration:

puppeteerLaunchOptions: {
    args: [
      '--disable-gpu',
      '--renderer',
      '--no-sandbox',
      '--no-service-autorun',
      '--no-experiments',
      '--no-default-browser-check',
      '--disable-dev-shm-usage',
      '--disable-setuid-sandbox',
      '--no-first-run',
      '--no-zygote',
      '--single-process',
      '--disable-extensions',
    ],
  }

These changes are needed as Cloudflare runs in a VM or Docker, and we cannot have a "real" chromium spin up. This way we make sure that the bare minimum is enabled for puppeteer so that it can run in the VM or Docker.

4.Now commit and push the changes to the Github repo

5.Cloudflare will automatically pick up the changes, let's go back to our Cloudflare project and we will see it is building our app:

6.If everything goes well, we have successfully deployed our app!!

Summary

In this article, we have made our Angular app a JAMstack app with the help of Scully and deployed it with Cloudflare pages! Below are some resources that I found helpful when using Cloudflare pages and Scully. You can find the example repo here.

If you have any questions send me DM via my twitter profile @jefiozie

Resources

Automate your community website easily with automation and Scully

Jeffrey Bosch — Sun, 29 Nov 2020 00:00:00 +0000

Last year I've joined the Dutch Angular Group as an Organizer and I can say I love it! 💖 Before I'm starting with my blog post I would like to give a shoutout to my fellow co-organizers and especially the founder of the Dutch Angular Group Sander Elias and Bonnie Brennan for the introductions and faith in me.

Thank you for letting me be a part of the DAG Community and have the privilege to help, show and organize great events where people can learn 🙏🏻

How it all started

As a community group, we have had a custom domain name for several years, but in the last couple of years, we have never used it. Since the first beta of Scully, I've built a couple of POC and my blog with it. Based on my experience there I thought why not build something where our community can go, look at the schedule, have some general information about our group, and see our Code of Conduct.

This is where my journey with a community website started, but this is not the place where I thought about automation.

Let's automate things

When I started with the organization of the DAG events, I didn't know anything about how to organize something, where to start, did we need a monthly schedule? All these things were new for me so with our organizer's team we just started by planning one event. But, then came COVID-19, so we needed to adjust to the regulation, we quickly adopted a streaming service what we could use to do our first online session. It was a great adventure and I just made some quick Artwork for the announcements on our Meetup group. I have to say, I was pretty excited, my first organized event with two GDE's! 😎 It went great!

After organizing 5 events, It occurred to me that I needed to do a repetitive task like every week for an event. Create an event, make artwork, twitter announcements, extra Twitter messages, etc.

Last week I had some spare time and I thought let's see If I could automate some stuff so that I have less work to do for the organization.

How did we do this

Scully is a static site generator that will convert a normal Angular app to a static website. When I had the idea to build this, one of the requirements was to have our Meetup calendar placed on our website. As Scully has a really easy and great way to create custom plugins, we've created a Meetup plugin that will look at your Meetup group and will get all the 100 latest events. With these 100 events, it will generate all these events in a specific way that we can use statically in our website.

With this in place, the only missing part was to automate the deployment process. As Github has a great set of Actions to assist you we've used one of these to deploy our static content, however, Github Actions cannot do anything without being notified. Looking at our automation part we thought could we trigger a Github action by doing an HTTP request? And we found out that this is supported by Github Actions, you just need to add the following snippet to your Github workflow:

on:
  repository_dispatch:
    types:
      - A EVENT NAME

By using Zapier we could now do a POST request to Github Actions to trigger our generation and deployment of our community website without doing any manual changes! If you would like to know about this specific part of Github Action, click here

Thank you and start using the plugin

Thank you for reading this post, feel free to DM me on Twitter

I've made the plugin available for everybody to use, you can find it here

Resources

Easy version stamp your Angular app🦶

Jeffrey Bosch — Fri, 23 Oct 2020 15:53:17 +0000

Did you ever create bash scripts that you've used in multiple projects to do version stamp your Angular application?

Today we are very happy to announce 🎉 @xlayers/version-stamp 🎉 an Angular Builder that will help you to version stamp your Angular apps.

How to use version-stamp

1.Navigate to your Angular project

2.Add @xlayers/version-stamp to your project

ng add @xlayers/version-stamp

The package will make some small changes to the angular.json

3.Add the following snippet (only the version property) to your environment files.

export const environment = {
    production: false,
    version: "_BUILD_HASH_"
};

4.Use the version that the packages has provided in your environment properties.

import { environment } from "../environment";

@Component({
    selector: "xlayers-root"
})
export class AppComponent {
    version = environment.version;
}

5.Now you can stamp your app by running

ng run <your-app>:stamp

or use --version for a specific version

ng run <your-app>:stamp --version="1.2.1"

6.When we navigate to our dist folder we can look at our code and see something that is similiar to the picture below

Thank you

Thank you for reading our article, we hope this article encourages you to try xLayers products as it is fairly easy to use and provides a lot of value in the collaboration between designers and developers.

Would you like to help us with xLayers by contributing? We have issues for first-timers and we are willing to help you in all possible ways. Next to contributing you can help us by donating, this way we can develop more features that are on our roadmap.

A new type of Angular budget on the block

Jeffrey Bosch — Tue, 10 Mar 2020 00:00:00 +0000

Before we are going to look at the new budget that recently has been added to the Angular CLI, let’s do a small recap on what budgets are.

What are Angular Budgets?

The official documentation says:

As applications grow in functionality, they also grow in size. The CLI allows you to set size thresholds in your configuration to ensure that parts of your application stay within size boundaries that you define.

In other words, bundles are the set of compiled JavaScript files, which are produced by the build process. Angular Budgets allow us to set a threshold around the size of these bundles. With the help of Angular Budgets, we can easily define a condition where we would expect a warning or error threshold if the size of a bundle increases. When an error is provided our build will fail with a bundle error.

The new type of budget on the block:

With the release of Angular CLI version 9.x, a new budget type was introduced. This type is being called the anyComponentStyle

How will this budget help me?

Good question, when we develop an application (or library) our bundle sizes will increase. This is how the development lifecycle is and always will be. However, we like to have them as small as possible and that is where budgets come into play. Where the regular budgets will look at our JavaScript bundles, the anyComponentStyle will look at our individual component CSS files.

Some interesting things to know about the rules that apply with this budget:

The budget will throw a warning or an error if any component has styles bigger than the configured threshold, but it will NOT raise any warning or error if the global style is HUGE.
The budget will only check individual components
At this moment it only supports CSS but there is a PR incoming to support other extensions as well.

How is the new budget type defined

Previously, the angular.json contained a default budget rule like:

"budgets": [
 {
   "type": "initial",
   "maximumWarning": "2mb",
   "maximumError": "5mb"
 }
]

When migrating to the new version of the Angular CLI, you will find a new budget added to the angular.json, which looks like:

"budgets": [
 {
   "type": "initial",
   "maximumWarning": "2mb",
   "maximumError": "5mb"
 },
 {
   "type": "anyComponentStyle",
   "maximumWarning": "6kb",
   "maximumError": "10kb"
 }
]

This new definition is where you can set the constraints for a warning or error message when a component’s CSS file is exceeding this size.

Thank you!

I hope you enjoyed this article! I would appreciate if you would share this article to spread the word around this new cool budget!Also big thanks for some great reviewers:

Please, don’t hesitate to ping me if you have any questions around Angular via Twitter @jefiozie.

RESOURCES

Introducing NGX-AWS-DEPLOY: easily deploy your Angular app to AWS S3 from the Angular CLI

Jeffrey Bosch — Mon, 13 Jan 2020 12:19:37 +0000

We are very happy and excited to share with you a new Angular Builder: NGX-AWS-DEPLOY

What is an Angular Builder?

Most of you probably know that the Angular CLI has some CLI commands, sometimes these commands run a complex process, such as linting, building or testing. Internally they make use of the Architect tool to run CLI Builders. With Angular version 8, the CLI Builder API is stable and available to developers who want to customize the Angular CLI by adding or modifying commands.

An Angular Builder is a function that will be executed by using a specific Angular CLI Command. Because you can run ANY command and can make ANY implementation you almost could say: The sky is the limit by adopting Angular Builders

What is an Angular Deployment Builder?

In Angular CLI version 8.3 the Angular team added a new CLI command: ng deployThe existing builder APIs are still used, but the usage has been simplified. It has a very short syntax, because by default it will deploy the default project in the workspace. And the most important point: It is an invitation to the community to standardize deployments under the umbrella of the Angular CLI!

Why I created this Angular Builder

I started the project because I was interested in the Angular Builders API. As I’m loving the way you could do a deployment of an Angular App by using @azure/ng-deploy, I had the idea to do this for Amazon’s S3 storage. In the past, I’ve done some work with Amazon and needed to do several steps to upload an Angular app to AWS S3. After looking at the AWS SDK and some examples on the documentation, I created the builder that we now call: NGX-AWS-DEPLOY

How can we use it?

A builder must be configured for an existing Angular project. But don’t worry! The installation is very simple, because you only have to execute the following command:

ng add @jefiozie/ngx-aws-deploy

By using the command it will install the package for you and ask you a couple of questions to setup the project.

After this, you are ready to deploy your app to AWS S3, just run:

ng deploy

Roadmap?

What does the future bring for this package? I’m not sure yet, I would love to see some feature issues created by the community! Maybe there are use cases I’ve not yet thought of so please submit your issue or feature on the NGX-AWS-DEPLOY Repo

Some of the ideas are:

Credentials via environment variables #12
Multi-region upload
Better progress indicator
Allow compressing the app and upload it (maybe an edge case)

Thank you

Thank you for reading this post. I hope you will enjoy NGX-AWS-DEPLOY. A big thanks to the Angular CLI team (and everybody who helped) with creating the builders API. I love it! 👍🏻

Thanks to people who reviewed this article:

RESOURCES

From design to code

Jeffrey Bosch — Sat, 03 Aug 2019 12:16:21 +0000

It has been a while since we have updated you on xLayers. Within this article, we will introduce xLayers and the value it can add to your daily work as a designer or as a developer. But first, let's repeat the goal of xLayers, this will help us understand why xLayers is created.

The Goal:

xLayers is an online Web application which aims to bridge the gap between designers and developers. Its mission is to allow an easy collaborate world between Designers and Developer so that they can iterate fast.

Now that we all have an understanding of the main goal, let’s move on and see how xLayers is working. Our journey within xLayers will consist of three parts where we go from a sketch file to code.

Part 1, From SketchApp to xLayers:

Before we can start using xLayers, we need a ‘sketch’ file. With this file, we can start using xLayers! (if you don’t have any sketch files no worries we provide a couple of demo file)

Open https://xlayers.dev, we will arrive on the landing page, on this page you will see a variety of information on all the things xLayers will provide you. Have a look at it, for now, we will continue our journey on how we can create code from Sketch.

On the landing page, you see a button with “Get Started”, let’s press this button.

Here we can upload our sketch file or select one of the demo files.

xLayers, will analyze this file and create a live example within your browser. This live example is called the component viewer, it represents the designed sketch file in HTML.

Great, let’s continue to the next part!

Part 2, Collaboration

Now that we are in the component viewer, we encourage the designer and developers to sit side by side and have a conversation about the designed parts that are visible on the component viewer.

The goal and the power of xLayers is now visible, you can use the viewer to have a conversation about the different aspects of the component, see if all parts are correct. Within the viewer, you can easily see each created page with their layers by using the left sidebar or click on the layers. By selecting a layer, the layer will be highlighted by a red indication border.

To see more details you can use the toolbar on the top, these actions all have their own goal.

Zooming In:

The zoom-in action can be used by clicking on the magnifying glass (as shown below) or by holding Ctrl + moving your mouse.

Zooming Out:

The zoom-out action can be used by clicking on the magnifying glass (as shown below) or by holding Ctrl + moving your mouse.

Reset to initial zoom:

By pressing the “basic magnifying glass” the zoom level will be reset to the initial zoom.

3D:

When pressing the 3D action, you have the ability to look through all the different layers in a 3D viewing way. By pressing the left shift and moving your mouse to a side you can even navigate around all of the different layers and see it from different angles.

Part 3, Source code:

The last action in the toolbar is the action which navigates you to the code generation. After navigation, you will have a set of generated code based on the sketch file. By default it will open with the selection of the Angular framework, however, you have the possibility to select a framework to your own choice.

On this page, you also have the ability to use the toolbar. Only this time you have fewer options. One of these options is to go and use StackBlitz as your online IDE. When this action is enabled, all code will be published to Stackblitz and you will have a setup of the project that you can use in an online IDE 🚀.

The second option is to download all of your code. With this option, you will be provided with a compressed zip that can be downloaded to your machine. This way you can integrate it easily within the desired repository.

What brings the future of xLayers?

At the moment we are focussing on the following topics:

Support more than only web frameworks, Xamarin support is already there
Have a completely new sketch parser to handle bitmaps and SVG and many more extensibility

Thank you

Thank you for reading our article, we hope this article encourages you to try xLayers as it is fairly easy to use and provides a lot of value in the collaboration between designers and developers.

xLayers - v1.0.0-beta 5

Jeffrey Bosch — Wed, 19 Jun 2019 20:50:41 +0000

We are happy to announce a new version of xLayers: v1.0.0-beta 5 🎉🎉

Within this release, we have some new features, improvements and small fixes.

Some highlights of this release are:

Upgraded to Angular V8
Support for Xamarin
Multi translated (ENG, NL)
Updated support for Stencil One

For the complete changelog click here

Here is a sample Xamarin code generated from the Sketch design:

If you have any questions or want to provide us feedback send us a DM or create an issue at our Github.

Follow @xlayers_ on Twitter for more updates about xLayers. You also can support us by make a donation on Open Collective

Building a drawer with Stencil

Jeffrey Bosch — Wed, 05 Jun 2019 17:33:41 +0000

For the past couple of weeks, I’ve been working on a “Design System” that is using Stencil. Today I want to share some basics on how I build a drawer with Stencil, with you, the community 🙏🏻.

What is a drawer

A drawer is a component, designed to add collapsible side content (often navigation) alongside some content. Further, in this article, you will see the end result of our drawer (that won’t be a perfectly styled example😆).

The architecture of the drawer

Our drawer has three main parts:

A container
A slot for the drawer content
A slot for the content

The container will serve as a wrapper. It will help us with the styling of our internal parts. The content slot is our placeholder for the content that will be served in the slot. Often this will be navigation. Finally, we have a slot for application content. Here you will provide the main content of your application.

Project setup

As the focus of this article is on creating a drawer container I will provide a brief introduction on setting up a new project.

First, we are going to create a new Stencil project, with some simple steps provided by the Getting Starred of Stencil

Create a new project:

npm init stencil

You will be prompt to choose a project type, choose component

? Pick a starter › - Use arrow-keys. Return to submit.

❯ ionic-pwa Everything you need to build fast, production-ready PWAs
   app Minimal starter for building a Stencil app or website
   component Collection of web components that can be used anywhere

Now you need to provide a project name, let’s fill in example-drawer. And that is it now we are ready to start working on our component.

Code

After opening the project in your favorite editor open the my-component.tsx file and remove all of the default code and replace it with the following:

import { Component, Host, h, State, Method } from '@stencil/core'

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  shadow: true,
})
export class MyComponent {
  /**
   * Show or hide the drawer
   */
  @State() open = true
}

First, we set up some internal data with the use of @State. When changing the State property it will cause the components to render again. With this, we are going to toggle a CSS class.

import { Component, Host, h, State, Method } from '@stencil/core'

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  shadow: true,
})
export class MyComponent {
  @State() open = true

  @Method()
  async toggleDrawer() {
    this.open = !this.open
  }
}

We have added a @Method decorator and a method that toggles the property open. Doing this allows us to call the toggleDrawer method from the outside of the component.

import { Component, Host, h, State, Method } from '@stencil/core'

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  shadow: true,
})
export class MyComponent {
  @State() open = true

  @Method()
  async toggleDrawer() {
    this.open = !this.open
  }
  render() {
    return (
      <Host>
        <div class="drawer-container">
          <div class={{ drawer: true, open: this.open }}>
            <div class="drawer-content">
              <slot name="drawer-content" />
            </div>
          </div>
          <div class={{ content: true, left: !this.open }}>
            <slot name="content" />
          </div>
        </div>
      </Host>
    )
  }
}

In this last part, we defined the HTML template. Earlier in this article, I said we would toggle some CSS classes based on the State property open. Now you can see what I meant with this. When the property open equals true the open class will be added to the div, similar behavior will be on the content div as shown in the code.

Now open the my-component.css file and replace the code with:

:host {
  display: block;
  width: 100%;
}

.drawer-container {
  position: relative;
  display: flex;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid #ccc;
}

.drawer {
  padding-right: 20px;
  background: gray;
  border-right: 1px solid #ccc;
  position: relative;
  width: 280px;
  transform: translate3d(-100%, 0, 0);
  z-index: 2;
  box-sizing: border-box;
  will-change: transform;
}
.drawer-content {
  width: 100%;
  height: 100%;
}
.drawer.open {
  transform: none;
}

.content {
  margin-left: 0px;
  margin-right: 0px;
  flex-grow: 1;
  flex-shrink: 1;
  display: block;
  height: 100%;
  overflow: auto;
  will-change: contents;
}
.content.left {
  margin-left: -280px;
}

We will focus on the open and left behaviors. In our drawer class we have defined transform: translate3d(-100%, 0, 0);. This will place our div out of the view. When we append the open class we will set transform to none, now we have our div back on the screen.

Our other focus point is the left class. Because the width of our drawer is fixed at 280px we can use margin-left to “slide” to the left when this class is appended.

Putting it all together

Now that we have all the parts together we have to do one more thing. When we created our new project Stencil provides us with an index.html within this file it has already created all thing for the “example” component.

Yet because we made changes we should reflect these changes in the index.html file. To speed things up copy the code below and replace this in your index.html file.

<!DOCTYPE html>
<html dir="ltr" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
    />
    <title>Stencil Component Starter</title>

    <script type="module" src="/build/example-drawer.esm.js"></script>
    <script nomodule src="/build/example-drawer.js"></script>
    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }
    </style>
  </head>
  <body>
    <my-component>
      <ul slot="drawer-content">
        <li>Menu 1</li>
        <li>Menu 2</li>
        <li>Menu 3</li>
        <li>Menu 4</li>
        <li>Menu 5</li>
      </ul>
      <div slot="content">
        Main
      </div>
    </my-component>
    <button id="toggleBtn">Toggle drawer</button>
  </body>
  <script>
    const btn = document.getElementById("toggleBtn");
    const = document.querySelector('my-component');
       btn.addEventListener("click", () => {
         drawer.toggleDrawer();
       });
  </script>
</html>

What did we change? We have added an unsorted list that will be placed in slot: drawer-content and we have a div that will be placed in slot: content. To toggle our drawer we have added a simple button that on-click will call the toggleDrawer method on our drawer

Summary

So what did we do in summary? We have created a simple drawer that slides out of the view. We have created a drawer with basic styling that can be enhanced to your own needs. The great thing is it that we can use this drawer in ANY frontend application that is using Vanilla JS, Angular, React or Vue, etc.

To see the full source have a look at this repo

I hope this article inspired you, gave you some insights on how to build a component with the use of Stencil and have had some fun!😁

A Thank you

At last, a thank you to some people how reviewed my article

Hi I'm Jeffrey, Ask Me Anything

Jeffrey Bosch — Sat, 27 Apr 2019 09:26:35 +0000

My name is Jeffrey and I’m an frontend developer working at a digital signature solution.

My daily job is frontend related; working in Angular, React and some vanilla Javascript. Backend I'm working in PHP and .NET C# these days.

Next to my daily job I work on an open source project called xLayers. With this project we are trying to bridge the gap between designers and developer. This project is developed with Angular and we are looking for contributions from the community.

My knowledge is mainly around frontend(mostly angular related) and cloud related things. You can ask my anything around these topics, checkout my personal blog or just say 👋🏻 "Hi"