• node (used here v14.15.0)

2. Project initialisation with Typescript

Init the project (named here svelte-project-starter) using degit:

npx degit sveltejs/template svelte-project-starter

Navigate inside the directory of the newly created project:

cd ./svelte-project-starter

Convert the project to Typescript:

node scripts/setupTypeScript.js

Install the node modules:

npm i

(Optional) Add Prettier config:

It’s useful to first install prettier-plugin-svelte:

npm i -D prettier-plugin-svelte

The .prettierrc file:

{
  "printWidth": 120,
  "singleQuote": true,
  "useTabs": false,
  "tabWidth": 2,
  "semi": false,
  "bracketSpacing": true,
  "trailingComma": "es5",

  "svelteSortOrder": "scripts-markup-styles"
}

The .prettierignore file:

rollup.config.js
tailwind.config.js
package.json
package-lock.json
tslint.json
tsconfig.json
public/build
.github/

You should now be able to succesfuly run the app in development mode at localhost:5000:

npm run dev

3. Add tailwindcss

In order to stay compatible with IE 11, we will use tailwindcss@1.9.x. Tailwind css depends on postcss@8, and we will install autoprefixer & postcss-nesting to make development more pleasurable.

npm i -D tailwindcss@1.9.x autoprefixer postcss-nesting postcss@8

Tailwindcss configuration

The tailwind.config.js file:

const production = !process.env.ROLLUP_WATCH;

module.exports = {
  future: {
    purgeLayersByDefault: true,
    removeDeprecatedGapUtilities: true,
  },
  plugins: [],
  purge: {
    content: [
      './src/**/*.svelte',
      // may also want to include base index.html
    ],
    enabled: production // disable purge in dev
  }
}

Update the Rollup configuration

Add the postcss config in the sveltePreprocess plugin:

The rollup.config.js file:

// ...
export default {
  // ...
  plugins: [
    // ...
    svelte({
      // ...
      preprocess: sveltePreprocess({
        // ...
        sourceMap: !production,
        postcss: {
          plugins: [
            require('tailwindcss'),
            require('autoprefixer'),
            require('postcss-nesting'),
          ],
        },
      })
    })
  ]
}

Import Tailwindcss in the components

Next, we need to import tailwindcss somewhere in our app code.

This is best done in the root component of the app, in order to have access to the CSS classes in every component the app uses.

In the ./src/App.svelte file:

<script lang="ts">
</script>

<style global lang="postcss">
  /* purgecss start ignore */
  @tailwind base;
  @tailwind components;
  /* purgecss end ignore */

  @tailwind utilities;
</style>

<main>
  <h1 class="text-xl text-red-200">Svelte, Typescript, Tailwindcss</h1>
</main>

Test everything works

Now, if you run npm run dev one more time, the compilation should be successful, and the heading should appear as a red text, with the size of 1.25rem.

Test that the CSS purging works in production mode

In development mode, the size of the css bundle exceeds 1M.

However, if everything in the setup is correct, the size in production should be much smaller because every unused CSS class and asset from tailwindcss will be purged from the final build.

For example, at the time of this writing, after I created a production build with npm run build, the size of the files found in ./public/build were:

Note: The production build can be served with npm start.

4. Add IE 11 compatibility

Add babel to transpile the code to ES5

Install the required packages:

npm i -D @babel/core @babel/preset-env @babel/plugin-transform-runtime \
         @babel/plugin-syntax-dynamic-import @rollup/plugin-babel

We also need to install core-js for ES6 features in ES5:

npm i -D core-js

Update the Rollup configuration to use babel

The rollup.config.js file:

// ...

import babel from '@rollup/plugin-babel';

// ...

export default {
  // ...
  plugins: [
    // ...

    // for IE 11 compatibility
    babel({
      extensions: ['.js', '.mjs', '.html', '.svelte'],
      babelHelpers: 'runtime',
      exclude: ['node_modules/@babel/**', 'node_modules/core-js/**'],
      presets: [
        [
          '@babel/preset-env',
          {
            targets: '> 0.25%, not dead',
            useBuiltIns: 'usage',
            corejs: 3,
          }
        ]
      ],
      plugins: [
        '@babel/plugin-syntax-dynamic-import',
        [
          '@babel/plugin-transform-runtime',
          {
            useESModules: true
          }
        ]
      ]
    }),
  ]
}

Test everything works

If everything went as intended, if you run npm run dev again, you now should be able to see the app running without errors in a IE11 browser.

How the bundle size was affected

After running npm run build for a production build, the sizes of the generated files are as follows:

Although the bundle.js size increased dramatically, it is still way better than the other popular frameworks like Angular, React or Vue. I guess this is the price we have to pay for having to support IE11.

5. Add routing

Install

For the routing we are going to use the declarative svelte-routing library:

npm i -D svelte-routing

Create some page components

Let’s create some demo pages (Svelte components):

The ./src/page/Home.svelte file:

<h1 class="text-xl">Home Page</h1>

The ./src/page/About.svelte file:

<h1 class="text-xl">About Page</h1>

Define the router viewport and routes

The ./src/App.svelte file will look like this:

<script lang="ts">
import { Router, Link, Route } from 'svelte-routing'
import Home from './page/Home.svelte'
import About from './page/About.svelte'

export let url = ''
</script>

<main>
  <h1 class="text-xl text-red-500">Svelte, Typescript, Tailwindcss</h1>
  <Router ulr={url}>
    <!-- Navigation bar with links to the different pages -->
    <nav>
      <Link to="home">Home</Link>
      <Link to="about">About</Link>
    </nav>

    <!-- Viewport where the routes are linked to the component pages -->
    <div>
      <Route path="home" component={Home} />
      <Route path="about" component={About} />
    </div>
  </Router>
</main>

<!-- The style content remains unchanged -->
<style global lang="postcss">
  // ...
</style>

Update the npm scripts to redirect to index.html on 404

To allow direct navigation by putting the url in the browser (for example trying to navigate directly to http://localhost:5000/home), we need to tell svelte server (sirv) to redirect to index.html when the requested page is not found.

We do this by updating the start script in package.json:

{
  // ...
  "scripts": {
    // ...
    "start": "sirv public --single"
  }
}

Important note: This will only work for serving the project after building it with npm run build.

I don’t have a solution for npm run dev yet, but I will update this article once I’ll find it.

Test everything works

If everything went as intended, if you run npm run build and npm start you should be able to see the Home and About links and to navigate to them.

How the bundle size was affected

6. Add lazy loading (bundle chunking with ES native modules)

Create a component that we will lazy load from one of the previous defined routes:

The component ./src/component/LazyLoaded.svelte:

<section>
  <h1>Lazy loaded component!</h1>
</section>

Update the About page to lazy load the component

Lazy load the component using ES dynamic imports.

The updated ./src/page/About.svelte:

<script lang="ts">
  const LazyLoadedP = import('../component/LazyLoaded.svelte')
    .then(({ default: C }) => C)
</script>

<h1 class="text-xl">About Page</h1>
{#await LazyLoadedP}
  ...Loading lazy loaded component
{:then LazyLoaded}
  <LazyLoaded />
{/await}

Update rollup configuration and index.html

Update the rollup.config.js file as follows:

// ...

export default {
  // ...
  output: [
    // The order counts! Otherwise, we get an error at build time!
    {
      sourcemap: true,
      format: 'esm',
      name: 'app',
      dir: 'public/build'
    },
    {
      sourcemap: true,
      format: 'iife',
      name: 'app',
      file: 'public/build/main.iife.js',

      // this is important, otherwise we get an error:
      // can't use IIFE format with dynamic imports!
      inlineDynamicImports: true,
    },
  ],
}

Update the ./public/index.html file as follows:

<!DOCTYPE html>
<!-- ... -->
<head>
  <!-- ... -->

  <!-- We indicate that the file type is module (it contains ES import statements) -->
  <script defer type="module" src="/build/main.js"></script>

  <!-- the only browsers that will load this file are -->
  <!-- the ones which don't support ES modules -->
  <!-- nomodule indicates to modern browser that this file should not be loaded -->
  <script nomodule src="build/main.iife.js"></script>
</head>

Test everything works

To test everything works as intended, run npm run build and then npm start. When you navigate to the app in a browser that supports ES modules, in the network tab you should see that already the browser loaded two JS files: main.js and another chunk main-[hash].js

Now, keeping the network tab open, go to the About page. In the network tab, another request for the LazyLoaded-[hash].js should appear. This is the JS file for our LazyLoaded.svelte component.

Now, if you open the app in IE 11 everything should work as it previously did. The only difference will be that the file loaded by IE 11 will be called main.iife.js instead of bundle.js. IE 11 will also load the main.js file, but this should not interfere.

How the bundle size was affected

Files loaded at startup (modern browsers):

Module files:

IE 11 files:

7. Conclusion

If you followed the steps, now you should have a completly working project starter in Svelte, with routing, TailwindCSS setup and lazy loaded modules, that also works on IE 11.

A fresh Adonis project configured with a running Postgres DB. You can create one by following this guide.

Fresh start

Make sure that there is no migration run until this point by executing:

adonis migration:status

If there are migrations that have already been ran, reset them by executing:

adonis migration:reset

Data model we are going to implement

The model consists of three entities: user, post, and post_status.

The details of the entitites and the relationships between them are presented below:

Setup table schemas and Lucid ORM models

Update the schema and model for the entities created by Adonis (users and tokens)

Delete the username and password columns from the user migration schema (we will not need them):

(Also, rename the table from users to user).

// file: database/migrations/*_user.js

class UserSchema extends Schema {
  up() {
    // updated from users to user
    this.create('user', table => {
      table.increments()
      table
        .string('email', 254)
        .notNullable()
        .unique()
      table.timestamps()
    })
  }

  down() {
    // updated from users to user
    this.drop('user')
  }
}

Update the tokens table name to token (singular form):

// file: database/migrations/*_token.js

class TokensSchema extends Schema {
  up() {
    // updated from tokens to token
    this.create('token', table => {
      table.increments()
      table
        .integer('user_id')
        .unsigned()
        .references('id')
        // updated from users to user
        .inTable('user')
      table
        .string('token', 255)
        .notNullable()
        .unique()
        .index()
      table.string('type', 80).notNullable()
      table.boolean('is_revoked').defaultTo(false)
      table.timestamps()
    })
  }

  down() {
    // updated from tokens to token
    this.drop('token')
  }
}

When working with models, Adonis assumes by default that the table names are in plural form. Throughout this guide we will update every model to work with the singular form of the coresponding table name by adding the get table() static method to the model class. This is just my preference.

Update the User model:

// file: app/Models/User.js

class User extends Model {
  static get table() {
    return 'user'
  }

  // other code
}

Update the Token model:

// file: app/Models/Token.js

class Token extends Model {
  static get table() {
    return 'token'
  }
}

Create the PostStatus schema and model

The migrations need to start from the entities that don’t depend on other entities.

Create the PostStatus model (pass -m to also create the schema migration file):

adonis make:model -m PostStatus

Update the table name to post_status (singular form) in the model:

// file: app/Models/PostStatus.js

class PostStatus extends Model {
  static get table() {
    return 'post_status'
  }
}

Update the table name to post_status (singular form) and add our column definitions in the migration schema:

// file: database/migrations/*_post_status_schema.js

class PostStatusSchema extends Schema {
  up() {
    this.create('post_status', table => {
      table.increments()
      table.string('name', 255)
      table.string('description', 1000)
      table.string('code', 50).unique()
      table.timestamps()
    })
  }

  down() {
    this.drop('post_status')
  }
}

Create the Post schema and model

Create the Post model (pass -m to also create the schema migration file):

adonis make:model -m Post

Update the model to use the new table name post (singular form) in the model:

// file: app/Models/Post.js

class Post extends Model {
  static get table() {
    return 'post'
  }
}

Update the table name to post (singular form) in the migration schema and add our column definitions:

// file: database/migrations/*_post_schema.js

class PostSchema extends Schema {
  up() {
    this.create('post', table => {
      table.increments()
      table
        .integer('user_id')
        .references('id')
        .inTable('user')
      table
        .integer('post_status_id')
        .references('id')
        .inTable('post_status')
      table.string('title', 255).notNullable()
      table.string('content', 1000).notNullable()
      table.timestamps()
    })
  }

  down() {
    this.drop('post')
  }
}

Define the relationships between entities

Add the user relationship to the posts:

// file: app/Models/User.js

class User extends Model {
  // other code

  posts() {
    return this.hasMany('App/Models/Post')
  }
}

Add the post status relationship to the post:

// file: app/Models/PostStatus.js

class PostStatus extends Model {
  static get table() {
    return 'post_status'
  }

  posts() {
    return this.hasMany('App/Models/Post')
  }
}

Create the tables

Run the migrations using:

adonis migration:run

It should output Database migrated successfully and if you refresh the Adminer page you should see the new tables.

Seed data

It’s nice to have some data created automatically so we have something to work with.

Run the following command to create the Dev seeder. This will seed data for the development environment. Later you might want to define a Prod seeder, which will seed data for the production environment:

adonis make:seed Dev

Create the factories

Factories are used in the seeder to easily create entities with mocked (and some real) data.

// file: database/factory.js
const Factory = use('Factory')

Factory.blueprint('App/Models/User', faker => {
  return {
    email: faker.email({ domain: 'example.com' }),
  }
})

Factory.blueprint('App/Models/Post', faker => {
  return {
    title: faker.sentence(),
    content: faker.paragraph(),
  }
})

Here, the faker object is an instance of the chance.js library.

Create the seeder

Seeders are the guys who put the seed data (which can come from the factories defined above) into the DB.

There will be only two post_statuses, so we define them separately before the seeder class:

// file: database/seeds/DevSeeder.js

// other code

const POST_STATUS_DRAFT = {
  name: 'Draft',
  description: 'This post is a work in progress.',
  code: 'DRAFT',
}
const POST_STATUS_PUBLISHED = {
  name: 'Published',
  description: 'This post is published.',
  code: 'PUBLISHED',
}

class DevSeeder {
  // other code
}

In the code below we define the seeder logic. First, note that we also get the PostStatus model from the DI container. Next, the logic is as follows:

1. Create the entities without dependencies first.

2. For every non dependent entity, create the entities that depend on them and save them to the database through the parents relationship defined in the Model. In this way, the Lucid ORM will also automatically create the connection between the entities in the DB (by setting the foreign keys).

One important thing to note here is that I haven’t yet found a way to seed data for entities that have multiple foreign keys that are notNullable(). The reason is that you can’t set an ORM relationship without trying to save the parent entity to the DB, meaning you can only set 1 foreign key bofore the INSERT operation is performed. Of course, the DB will throw an error because we are trying to set NULL values to notNullable() fields.

// file: database/seeds/DevSeeder.js

//other code
const Factory = use('Factory')

const PostStatus = use('App/Models/PostStatus')

// other code

class DevSeeder {
  async run() {
    // Create the user model instances (without inserting them into DB).
    const users = await Factory.model('App/Models/User').makeMany(5)

    // Create and insert the postStatus model instances into the DB.
    const postStatusDraft = await PostStatus.create(POST_STATUS_DRAFT)
    const postStatusPublished = await PostStatus.create(POST_STATUS_PUBLISHED)

    // For each user create 2 posts to be saved as DRAFT and 3 posts
    // to be saved as published.
    // Then associate the user and the postStatus to the posts by
    // inserting the posts to the DB through the relationships
    // with the aforementioned entities.
    users.forEach(async user => {
      const postsDraft = await Factory.model('App/Models/Post').makeMany(2)
      const postsPublished = await Factory.model('App/Models/Post').makeMany(3)

      await postStatusDraft.posts().saveMany(postsDraft)
      await postStatusPublished.posts().saveMany(postsPublished)

      await user.posts().saveMany(postsDraft)
      await user.posts().saveMany(postsPublished)
    })
  }
}

Run the seed and populate the DB

Run the seed with:

adonis seed

It should output Seeded database and if you refresh Adminer you should now see the user, post_status, and post tables populated with data.

Ending

This is it! I hope this article provides a good starting point in modelling and seeding your data in Adonis and PostgreSQL.

In the future this article may get updated if I come by any other difficulties which are worthy to be exemplified here.

Important notes

Sometimes the SQL relationships are not intuitive

Altough at first glance it appears that the relationship between a post and a post_status is a hasOne relationship, that’s not true - it would mean that every post has a separate row in the post_status column. Actually, in the SQL sense, one post_status hasMany posts.

This is how I naively defined the relationship at first:

// file: app/Models/Post.js

class Post extends Model {
  static get table() {
    return 'post'
  }

  postStatus() {
    return this.hasOne('App/Models/PostStatus')
  }
}

Common errors

If you get TypeError: Cannot read property 'name' of undefined when you try to run the seed using factories, you may have misspelled the name of the model in the factory declaration (or there is no factory defined for that model).

If you get TypeError: relatedInstance.save is not a function you may have called the save method instead of the saveMany for saving an array of model instances.

• node (used here v13.9.0)
• docker (used here v19.03.5)
• docker-compose (used here v1.25.4)

Install @adonisjs/cli globally:

Create a new --api-only project using the CLI:

adonis new adonis-postgres-demo-project --api-only

Run npm i pg so that our project can connect to PostgreSQL.

Add the .prettierrc file:

{
  "printWidth": 120,
  "singleQuote": true,
  "useTabs": false,
  "tabWidth": 2,
  "semi": false,
  "bracketSpacing": true,
  "trailingComma": "es5"
}

Create the Dockerfile:

FROM node:13.10.1-alpine3.10

# so that we can use the adonis command to serve the app in --dev mode
RUN npm i -g @adonisjs/cli@4.0.12

WORKDIR /usr/src/app

COPY package.json ./package.json
RUN npm install

# copy all project files to the container
COPY . .

# start the adonis server in --dev mode
CMD adonis serve --dev

And the .dockerignorefile:

node_modules

Update the .env file to use HOST=0.0.0.0 instead of HOST=127.0.0.1 to make the API available outside of the localhost of the docker container.

Run docker build -t adonis-demo-project . to build the Docker image named adonis-demo-project:latest.

Run the image with:

docker run --rm -it -p 3333:3333 adonis-demo-project:latest

The API should now be accessible in the browser at the address http://localhost:3333 and should respond with the following JSON:

{"greeting":"Hello world in JSON"}

You can now stop the container with Ctrl-C.

Create the docker-compose.yaml file (which also setups volumes so that the code updates done in the project are reflected immediately in the docker container):

version: '3.7'

services:
  api:
    container_name: adonis-demo-api
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - type: bind
        source: .
        target: /usr/src/app
      - type: volume
        target: /usr/src/app/node_modules
    ports:
      - 3333:3333

  db:
    container_name: adonis-demo-db
    image: postgres:12.2-alpine
    ports:
      - 5432:5432
    environment:
      POSTGRES_DB: demo_db
      POSTGRES_USER: demo
      POSTGRES_PASSWORD: demo1234

  adminer:
    container_name: adonis-demo-adminer
    image: adminer:4.7.6
    ports:
      - 8080:8080

Update the .env file with the Postgres DB config (also change the DB_CONNECTIION to pg for Adonis):

HOST=0.0.0.0
PORT=3333
NODE_ENV=development
APP_NAME=AdonisJs
APP_URL=http://${HOST}:${PORT}
CACHE_VIEWS=false
APP_KEY=LaeQghKnovGDmDnKQlMBIrnjZFUEmyzf

DB_CONNECTION=pg
DB_HOST=127.0.0.1
DB_PORT=5432
DB_USER=demo
DB_PASSWORD=demo1234
DB_DATABASE=demo_db

HASH_DRIVER=bcrypt

Check that Postgres and Adminer are started and working by going to http://localhost:8080 in the browser and login with the following:

System  : PosgreSQL
Server  : db (the name of the service in docker-compose.yaml)
Username: demo (from POSTGRES_USER: demo)
Password: demo1234 (from POSTGRES_PASSWORD: demo1234)
Database: demo_db (from POSTGRES_DB: demo_db)

If the login was sucessful, we can now check that Adonis can connect to the DB by running:

adonis migration:run

It should say that the Database migrated successfully, and if you refresh Adminer on http://localhost:8080 you should now have 3 new tables: users, tokens, and adonis_schema (these migrations were created automatically by the adonis-cli).

And now you have a fully functioning AdonisJS API setup with PosgreSQL and Adminer, with easy replication due to Docker and docker-compose.

• node (used here v13.9.0)
• docker (used here v19.03.5)
• docker-compose (used here v1.25.4)

Aproximate time to complete this setup: 30 minutes.

Install the Angular CLI globally:

npm i -g @angular/cli

Create a new angular project using the CLI and cd into the project directory:

ng new angular-docker-demo
cd angular-docker-demo

Create the Dockerfile:

# base image
FROM node:13.8.0

# install chrome for protractor tests
RUN wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -
RUN sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list'
RUN apt-get update && apt-get install -yq google-chrome-stable

# set working directory
WORKDIR /usr/src/app

# install and cache app dependencies
COPY package.json ./package.json
RUN npm install

# copy the source files to the docker image
COPY . .

# make the host 0.0.0.0 so that the app can
# be accesed outside of the container
CMD npm start -- --host 0.0.0.0

Create the .dockerignore file (so that these files are not copied to the image):

node_modules
.git
.gitignore

Create the docker image (with the name angular-docker-demo:latest) and run it for testing purposes:

docker build -t angular-docker-demo .
docker run --rm -it --mount type=bind,source="${PWD}",target=/usr/src/app --mount type=volume,target=/app/node_modules -p 4201:4200 angular-docker-demo:latest

• --rm deletes the container after we are done running it
• -it allows us to execute shell comands inside the container (behaving like the terminal on our computer)
• --mount type=bind,source=”\${PWD}”,target=/usr/src/app mounts the Angular app directory as a bind volume in the docker container, allowing us to change the source code in the container on the fly
• --mount type=volume,target=/app/node_modules mounts the node_modules directory in the container to a separate anonymous volume so that it is not overwritten by the node_modules directory binded in the previous mount from our computer
• -p 4201:4200 publish the 4200 port on which the Angular app is served and bind it to the 4201 port on the computer

The app should now be accessible on the computer on the address http://localhost:4201.

Update the karma.conf.js (unit testing config) to use Chrome Headless:

module.exports = function(config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular-devkit/build-angular/plugins/karma'),
    ],
    client: {
      clearContext: false, // leave Jasmine Spec Runner output visible in browser
    },
    coverageIstanbulReporter: {
      dir: require('path').join(__dirname, './coverage/angular-docker-demo'),
      reports: ['html', 'lcovonly', 'text-summary'],
      fixWebpackSourcePaths: true,
    },
    reporters: ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    // updated <-- HERE
    browsers: ['ChromeHeadless'],
    // new <-- HERE
    customLaunchers: {
      ChromeHeadless: {
        base: 'Chrome',
        flags: ['--no-sandbox', '--headless', '--disable-gpu', '--remote-debugging-port=9222'],
      },
    },
    singleRun: false,
    restartOnFileChange: true,
  });
};

Check that the unit testing works (the docker container started earlier must still be running — if it’s not, run the previous docker run command again):

docker exec -it CONTAINER npm run test

where CONTAINER is the container name or id which you can find by running

docker ps

Update the protractor.conf.js (e2e testing config) to use Chrome Headless:

const { SpecReporter } = require('jasmine-spec-reporter');

/**
 * @type { import("protractor").Config }
 */
exports.config = {
  allScriptsTimeout: 11000,
  specs: ['./src/**/*.e2e-spec.ts'],
  capabilities: {
    browserName: 'chrome',
    // new <-- HERE
    chromeOptions: {
      args: ['--no-sandbox', '--headless', '--window-size=1024,768'],
    },
  },
  directConnect: true,
  baseUrl: 'http://localhost:4200/',
  framework: 'jasmine',
  jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 30000,
    print: function() {},
  },
  onPrepare() {
    require('ts-node').register({
      project: require('path').join(__dirname, './tsconfig.json'),
    });
    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
  },
};

Check that the e2e testing works (the docker container started earlier must still be running — if it is not, run the previous docker run command again):

docker exec -it CONTAINER npm run e2e -- --port 4202

If everything works, we can now stop the container — either by pressing Ctrl-C in the container terminal or by running the following command:

docker stop CONTAINER

Create the docker-compose.yaml file in the Angular project’s root:

version: "3.7"
services:
  web:
    container_name: project-name-web
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - type: bind
        source: .
        target: /usr/src/app
      - type: volume
        target: /usr/src/app/node_modules
    ports:
      - 4201:4200

Start docker compose:

docker-compose up

Run tests with:

docker-compose exec web npm run test
docker-compose exec web npm run e2e -- --port 4202

And that concludes the setup. I hope that by now you have a good starting point for your next project.