DEV Community: Clément POISSON

Make a simple Fastify API with TypeScript and deploy it

Clément POISSON — Thu, 14 Apr 2022 07:58:18 +0000

In this tutorial, we will see how to build a simple API with Fastify and TypeScript, and how to deploy it on the ScaleDynamics Platform.

Introduction

Fastify is a Node.js web framework for building HTTP APIs. It is designed to be easy to use, and to be fast. It has a powerful plugin architecture inspired by Express and Hapi. It is design with developper experience in mind without sacrificing performance.

Goals

Our goal will be to build a simple starting point for a Fastify API with TypeScript that will return some users fetched from jsonplaceholder. Then we will deploy it on the ScaleDynamics Platform to be able to use it from any application.

Prerequisites

To follow along, you will need:

Node.js and yarn / npm installed. You can go here to download the latest version of Node.js and npm
Some basic TypeScript knowledge

Setup the project

Let's create a folder and initialize a npm:

mkdir fastify-api
yarn init

Don't bother with the options in the prompt, you can directly use this code in your package.json file:

{
  "name": "fastify",
  "version": "1.0.0",
  "main": "src/index.ts",
  "license": "MIT",
  "scripts": {
    "build": "tsc -p tsconfig.json",
    "start": "node ./dist/index.js"
  },
  "dependencies": {
    "@types/node": "^17.0.23",
    "axios": "^0.26.1",
    "fastify": "^3.28.0"
  },
  "devDependencies": {
    "typescript": "^4.6.3"
  }
}

Install the dependencies by running:

yarn

Now we need to create a tsconfig.json to configure TypeScript, so let's run:

npx tsc --init

We need now to make some changes to it:

{
  "compilerOptions": {
    "target": "esnext" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
    "module": "commonjs" /* Specify what module code is generated. */,
    "outDir": "./dist" /* Specify an output folder for all emitted files. */,
    "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */,
    "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
    "strict": true /* Enable all strict type-checking options. */
  }
}

The project is now ready, let's build our API:

Build the API

Create a src folder at the root of your project, and create a index.ts file inside it:

import axios from "axios";
import fastify from "fastify";

const server = fastify();

server.get("/users", async (): Promise<User[]> => {
  return (await axios.get("https://jsonplaceholder.typicode.com/users")).data;
});

server.listen(8080, (err, address) => {
  if (err) {
    console.error(err);
    process.exit(1);
  }
  console.log(`Server listening at ${address}`);
});

Our API will simply return a list of users fetched from jsonplaceholder when we call /users.

We need to add the definition of the User type, so create a domain folder and a user.d.ts file inside:

type User = {
  id: number;
  name: string;
  username: string;
  email: string;
  address: Address;
  phone: string;
  website: string;
  company: Company;
};

type Address = {
  street: string;
  suite: string;
  city: string;
  zipcode: string;
  geo: Geolocalisation;
};

type Geolocalisation = {
  lat: string;
  lng: string;
};

type Company = {
  name: string;
  catchPhrase: string;
  bs: string;
};

We can now build our code to transform it into JavaScript and run it:

yarn build
yarn start

Try to get the users by running:

curl localhost:8080/users

You should dump the users like:

Perfect ! Now let's deploy our API on the ScaleDynamics Platform.

Account creation and resource selection

To deploy this application on ScaleDynamics's cloud, you need an account and create an environment with a resource for it. The cloud resource provides virtual CPU and storage capacities used to execute the app. In this tutorial we will use a free shared resource available on ScaleDynamics’s cloud. These are the best one for testing. In this tutorial we will see later how you can upgrade to a dedicated production resource on the public cloud provider and region of your choice.

If you don't have an account, feel free to create one here (it's free and no credit card are required). Once your account is created, sign in.

Let's create a project and an environment on the ScaleDynamics's console. Select your organization, create a new project, then create a new environment. Now we need to choose what kind of service we need for our deployment. There are four types:

managed HTTP docker
managed Node.js server
managed Node.js module
static assets hosting

For our API, we need a server. Let's pick the managed Node.js server. You can learn more on the other types in the ScaleDynamics documentation.

Deployment

The environment is ready to run our application, let's deploy on it.

Configuration file

First, let's add a configuration to tell the SDK what type of application we want to deploy. At the root of the project, create a warp.config.js file:

// warp.config.js
module.exports = {
  server: "fastify",
};

Build

Build the project to compile the TypeScript code into JavaScript:

yarn build

Login

Log into your account and select your organization via the prompt:

npx warp login

Deploy

Finally, we can run the deployment command:

npx warp deploy ./

This command will dump something like this:

You can see that a server was detected from your configuration file. Now follow the prompt, select the project you created, then the environment. The prompt will also ask you for a hostname, you can leave it blank for a random name or use the one you want. Finally, you can select a host.

The deployment will take a few minutes.

When it's done, you can open your browser and go to the URL and TADA ! Your API is live !

Go further: dedicated resources

If you want to use dedicated resources, you can upgrade dynamically to a non shared resource. As shown below it's as simple as a few mouse clicks.

Next steps

At this stage, you have a fully functional API. You can learn more on the ScaleDynamics documentation, like how to get the logs of your server, use a custom domain, implement a CI/CD pipeline, etc.

Enjoy !

Deploy a Spring Boot Kotlin application with Docker

Clément POISSON — Thu, 31 Mar 2022 10:00:21 +0000

In this tutorial, we will see how to deploy a Spring Boot Kotlin application with Docker and the ScaleDynamics Platform.

Introduction

Spring Boot is a Java-based web application framework that is designed to build simple, stand-alone, production-grade applications. It is built on top of the conventional Spring framework. In Spring Boot everything is auto-configured. It also support Kotlin, which in our case is the language used in the application we will deploy.

Kotlin is a statically typed programming language that is designed to be a modern, safe and efficient alternative to Java. It mainly target the JVM, but can also be compile in JavaScript or native code. Since 2019, Kotlin is the preferred language for Android app developpers.

Docker is a containerization platform that allows you to run applications in a container. It is used to build and run applications on the cloud.

Goals

Our goal will be to clone the Spring Petclinic sample application, use the Docker app to run it locally and then deploy it on the ScaleDynamics Platform.

Prerequisites

To follow along, you will need:

Docker on your system to run the application locally.
Node.js and yarn / npm installed. You can go here to download the latest version of Node.js and npm.
Git installed.

Setup the project

The project we will clone is the Spring Petclinic sample appication in Kotlin. You can find the repository here.

Now let's get the project by running the following command:

git clone https://github.com/spring-petclinic/spring-petclinic-kotlin.git

The project is now ready, let's run it locally with Docker !

Run the application locally

First of all, you need to launch the Docker app on your system.

Build the image

Before being able to run the application, we need to build the image. The project has already a ready to use Dockerfile, so we just need to run the following command inside the project directory:

# the `--tag` option is used to name the image.
docker build . --tag spring-petclinic-kotlin

I got some error on a Mac M1 chip:

If you encountered the same issue, you can modify the Dockerfile like this:

FROM gradle:7.4.1 AS build
COPY --chown=gradle:gradle . /home/gradle/src
WORKDIR /home/gradle/src
RUN gradle build

FROM openjdk:8-jre-slim
EXPOSE 8080
COPY --from=build /home/gradle/src/build/libs/spring-petclinic-kotlin-2.6.2.jar /app/
RUN bash -c 'touch /app/spring-petclinic-kotlin-2.6.2.jar'
ENTRYPOINT ["java", "-XX:+UnlockExperimentalVMOptions", "-XX:+UseCGroupMemoryLimitForHeap", "-Djava.security.egd=file:/dev/./urandom","-jar","/app/spring-petclinic-kotlin-2.6.2.jar"]

Those modifications include:

changing the gradle image
changing the name of the jar built by gradle

Now the image is ready to be run.

Run the image

You can run this docker image using the docker application directly or with the command:

docker run -p 8080:8080 spring-petclinic-kotlin

The application is now running on localhost:8080, you can now access it in your browser. It should look like:

Let's deploy it !

Account creation and resource selection

To deploy this server on ScaleDynamics's cloud, you need an account and create an environment with a resource for it. The cloud resource provides virtual CPU and storage capacities used to execute the app. In this tutorial we will use a free shared resource available on ScaleDynamics’s cloud. These are the best one for testing. In this tutorial we will see later how you can upgrade to a dedicated production resource on the public cloud provider and region of your choice.

If you don't have an account, feel free to create one here (it's free and no credit card are required). Once your account is created, sign in.

managed HTTP docker
managed Node.js server
managed Node.js module
static assets hosting

For our application, we use docker to run it. Let's pick the managed HTTP docker. You can learn more on the other types in the ScaleDynamics documentation.

Deploy the application

The environment has the resource needed, let's deploy on it.

Login

Log into your account and select your organization via the prompt:

npx warp login

Deploy

Finally, we can run the deployment command:

npx warp deploy

You can see that the Dockerfile was detected by the SDK. You can just follow the prompt, select the project you created, then the environment. The prompt will also ask you for a hostname, you can leave it blank for a random name or use the one you want. Finally, you can select a host. and then it will do it's magic.

This command will dump something like this:

You can now open your browser and go to the URL and TADA ! Your application is live !

Go further

This was a simple example of deploying a simple application with docker on the ScaleDynamics Platform. You can pretty much go with any other language, framework or library you want to use.

If you are interested in CI/CD, there is a tutorial on how to implement it here.

Enjoy !

CI/CD with a simple NestJS server

Clément POISSON — Wed, 16 Mar 2022 09:34:59 +0000

In this tutorial, we will see how we can make a CI/CD (Continuous Integration and Continuous Delivery) script with GitHub Actions and a simple NestJS server.

Introduction

NestJS is a Framework for building Node.js server side application. It is built with TypeScript and use Express or Fastify HTTP server framework under the hood. It's architecture is heavily inspired by Angular. It integrates a lot of features and is very easy to use.

GitHub Actions is GitHub take on CI/CD. It allows you to automate your build process and deploy your code directly from your GitHub repository.

Goals

Our goal is to create a simple NestJS server with the Nest CLI, deploy it using ScaleDynamics cloud platform and then automate it with GitHub Actions. We'll learn how you can use GitHub Actions to deploy with the ScaleDynamics platform.

Prerequisites

To follow along, you will need:

A GitHub account and a repository ready to be used with GitHub Actions.
Knowledge of Git and have it installed on your machine.
Node.js and yarn / npm installed. You can go here to download the latest version of Node.js and npm.

Creating the project

To create the project, we can use the Nest CLI or clone a project starter from GitHub:

npm i -g @nestjs/cli
nest new my-server

git clone https://github.com/nestjs/typescript-starter.git my-server

Move into the project folder:

cd my-server

You can test if the project is working locally by running:

npm run start

You can check you receive Hello World! by running:

curl localhost:3000

Now that we saw the project working, we just need to make a change in the scripts of the package.json file. When the server is deployed with ScaleDynamics, the server is started with the startcommand. We will change it so it launch the server in production mode by default and not in dev mode.

// package.json
"scripts": {
    "prebuild": "rimraf dist",
    "build": "nest build",
    "format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\"",
    "dev": "nest start",
    "dev:watch": "nest start --watch",
    "dev:debug": "nest start --debug --watch",
    "start": "node dist/main",
    "lint": "eslint \"{src,apps,libs,test}/**/*.ts\" --fix",
    "test": "jest",
    "test:watch": "jest --watch",
    "test:cov": "jest --coverage",
    "test:debug": "node --inspect-brk -r tsconfig-paths/register -r ts-node/register node_modules/.bin/jest --runInBand",
    "test:e2e": "jest --config ./test/jest-e2e.json"
  },

Everything is ready to be deployed !

Account creation and ressource selection

To deploy this server on ScaleDynamics's cloud, you need an account and create an environment with a ressource for it. The cloud resource provides virtual CPU and storage capacities used to execute the app. In this tutorial we will use a free shared resource available on ScaleDynamics’s cloud. These are the best one for testing. In this tutorial we will see later how you can upgrade to a dedicated production resource on the public cloud provider and region of your choice.

If you don't have an account, feel free to create one here (it's free and no credit card are required). Once your account is created, sign in.

Let's create a project and an environment on the ScaleDynamics's console. Select your organization, create a new project, then create a new environmnent. Now we need to choose what kind of service we need for our deployment. There are four types:

managed HTTP docker
managed Node.js server
managed Node.js module
static assets hosting

For our NestJS server, we need a (surprise) server. Let's pick the managed Node.js server. You can learn more on the other types in the ScaleDynamics documentation.

Deployment

The environment is ready to run our application, let's deploy on it.

Configuration file

First, let's add a configuration to tell the SDK what type of application we want to deploy. At the root of the project, create a warp.config.js file:

// warp.config.js
module.exports = {
  server: "nest",
};

Build

Build the project to let Nest compile TypeScript and optimize and bundle everything for us:

yarn build

Login

Log into your account and select your organization via the prompt:

npx warp login

Deploy

Finally, we can run the deployment command:

npx warp deploy

This command will dump something like this:

The deployment will be done in a few minutes. At the end, the command will dump something like this:

You can now open test it by visiting the URL dumped or doing a curl request.

Automation with GitHub Actions

To simplify and automate this process, let's use GitHub Actions.

Create a GitHub repository

Before we can automate the process, you need to create a GitHub repository and upload the project there.
You can learn more about it on the GitHub documentation.

Define our workflow

Now let's think about what workflow we want to automate. Our final goal is to deploy our server, but before deploying, we need to check the quality of the code, test it, build the project and finally deploy it. For this example there will be four steps:

Lint our code with ESLint
Test our code with Jest
Build our project
Deploy it

The NestJS startup project we use got everything to do so.

Create the workflow

Let's create a new workflow by creating a new folder at the root of the project called .github and an other folder inside called workflows. Inside workflows, create a main.yml file and copy this code:

name: Deploy

# Controls when the workflow will run
on:
  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
  deploy:
    name: Deploy
    runs-on: ubuntu-latest
    env:
      # replace with your project/env name
      ORG_PROJECT: nest-test
      DEPLOY_ENV: dev
    # Steps represent a sequence of tasks that will be executed as part of the job
    steps:
      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
      - uses: actions/checkout@v2

      - name: Install dependencies
        run: yarn

      - name: Lint the codebase
        run: yarn lint

      - name: Test our code
        run: yarn test

      - name: Build
        run: yarn build

      - name: Login
        run: npx warp login --api-key=${{ secrets.SD_API_KEY }}

      - name: Deploy
        run: npx warp deploy --project ${ORG_PROJECT} --env ${DEPLOY_ENV}

API key for login

Your workflow is ready, but for the login step, we need an API key to authenticate with ScaleDynamics. This API key can be created on the ScaleDynamics console:

Once your API key is created, we can create a secret in your repository so we can use it in our workflow:

Test it

Now you can try it by going into the Actions tab on your repository and trigger the workflow:

The workflow will run and you will be able to see the job deploy. Click on it and you can see all the steps that are executed. At the end if all go well you should have something like:

If there is an error along the way you will be able to easily spot it and fix it.

Go further

This was a simple example of setting up CI/CD to deploy an server with ScaleDynamics, but you can do way more things with it. For exemple, you could lint the code on every commit to ensure styling coherence and ensure no mistake are present in your codebase, or you could deploy you code in preproduction at every commit on a branch preprod. The sky is the limit.

If you want to know more, I encourage you to read this JetBrains guide. It's related to their TeamCity CI/CD platform but they perfectly explain the principles and what you can do with CI/CD in general.

Enjoy !

Deploy a Next.js SSR application

Clément POISSON — Tue, 01 Mar 2022 15:54:30 +0000

In this tutorial, we will see how you can deploy a simple server side rendered Next.js application on ScaleDynamics.

Introduction

Next.js is a powerful React framework for building production ready applications that provides built-in features like routing, hot reload, or static generation, that ease the development. In this tutorial we focus on the Server Side Rendering (SSR) feature. Using SSR, the server is in charge of rendering the pages on each request. SSR is ideal for SEO, because search engines can easily index and crawl content because it can be rendered before the page is loaded.

Goals

Our goal is to create a simple Next.js application using SSR and TypeScript, and deploy it using ScaleDynamics cloud platform that provides free cloud resources for testing. We'll learn how simple it is to configure your cloud resource and deploy your application.

Prerequisites

To follow along, you will need:

Basic knowledge of Javascript / TypeScript
Basic knowledge of React and Next.js
Node.js and yarn / npm installed. You can go here to download the latest version of Node.js and npm.

Building the app

Let's use Next.js CLI to create an app called next-ssr:

# you can remove --typescript if you want only Javascript
# just ignore the typing in the following of the tutorial
yarn create next-app --typescript

To fill our app with some fake data, let's install axios to fetch them:

yarn add axios

We will use JSONPlaceholder to provide some fake user data.

To activate the SSR, we need to use a specific function called getServerSideProps and add it to our main page. So let's rewrite our pages/index.tsx file:

// pages/index.tsx
import axios from "axios";
import type { GetServerSideProps, NextPage } from "next";
import Head from "next/head";
import styles from "../styles/Home.module.css";

type HomeProps = {
  users: User[];
};

const Home = ({ users }: HomeProps): JSX.Element => {
  return (
    <div className={styles.container}>
      <Head>
        <title>Next SSR with ScaleDynamics</title>
        <meta name="description" content="Simple SSR app deploy with ScaleDynamics platform" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>Welcome to my SSR App</h1>
        <pre>{JSON.stringify(users, null, 2)}</pre>
      </main>
    </div>
  );
};

export const getServerSideProps: GetServerSideProps = async () => {
  const { data } = await axios.get("https://jsonplaceholder.typicode.com/users");

  return {
    props: {
      users: data,
    },
  };
};

export default Home;

You will probably get an error from your IDE concerning the type User. Create a folder name domain and add a file called user.d.ts:

// domain/user.d.ts
type User = {
  id: number;
  name: string;
  username: string;
  email: string;
  address: {
    street: string;
    suite: string;
    city: string;
    zipcode: string;
    geo: {
      lat: string;
      lng: string;
    };
  };
  phone: string;
  website: string;
  company: {
    name: string;
    catchPhrase: string;
    bs: string;
  };
};

Now we can see the result by running the application in dev mode:

yarn dev

You should optain:

Cool! So now we are fetching data but we are displaying them as JSON data using the JSON.stringify function. Let's make that a bit prettier with a component and some css.

Create a folder called components and two files:

// components/user.tsx
import styles from "./user.module.css";

type UserProps = {
  user: User;
};

const User = ({ user }: UserProps): JSX.Element => {
  return (
    <div className={styles.container}>
      <div className={styles.infos}>
        <span>Name: {user.name}</span>
        <span>Username: {user.username}</span>
        <span>Email: {user.email}</span>
        <span>Phone: {user.phone}</span>
      </div>
      <div className={styles.address}>
        <span>Street: {user.address.street}</span>
        <span>Suit: {user.address.suite}</span>
        <span>City: {user.address.city}</span>
        <span>Zipcode: {user.address.zipcode}</span>
      </div>
    </div>
  );
};

export default User;

/* user.module.css */
.container {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 0;
  margin: 0;
  background-color: #fafafa;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 10px;
  margin: 10px;
  width: 500px;
  max-width: 500px;
}

.infos {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 10px;
  margin: 0;
  width: 100%;
}

.address {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 10px;
  margin: 0;
  width: 100%;
}

Now we need to modify our pages/index.tsx file to use our brand new component:

// pages/index.tsx
import axios from "axios";
import type { GetServerSideProps } from "next";
import Head from "next/head";
import styles from "../styles/Home.module.css";
import User from "../components/user/user";

type HomeProps = {
  users: User[];
};

const Home = ({ users }: HomeProps): JSX.Element => {
  const usersDisplay = users.map((user: User): JSX.Element => <User key={user.id} user={user} />);

  return (
    <div className={styles.container}>
      <Head>
        <title>Next SSR with ScaleDynamics</title>
        <meta name="description" content="Simple SSR app deploy with ScaleDynamics platform" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>Welcome to my SSR App</h1>
        {usersDisplay}
      </main>
    </div>
  );
};

export const getServerSideProps: GetServerSideProps = async () => {
  const users = await (await axios.get("https://jsonplaceholder.typicode.com/users")).data;

  return {
    props: {
      users,
    },
  };
};

export default Home;

With the dev mode running, the app should look like this:

The application is ready, now let's look at the deployment part !

Account creation and ressource selection

To deploy this application on ScaleDynamics's cloud, you need an account and create an environment with a ressource for it. The cloud resource provides virtual CPU and storage capacities used to execute the app. In this tutorial we will use a free shared resource available on ScaleDynamics’s cloud. These are the best one for testing. In this tutorial we will see later how you can upgrade to a dedicated production resource on the public cloud provider and region of your choice.

If you don't have an account, feel free to create one here (it's free and no credit card are required). Once your account is created, sign in.

managed HTTP docker
managed Node.js server
managed Node.js module
static assets hosting

For our Next.js server side rendered, we need a server. Let's pick the managed Node.js server. You can learn more on the other types in the ScaleDynamics documentation.

Deployment

The environment is ready to run our application, let's deploy on it.

Configuration file

First, let's add a configuration to tell the SDK what type of application we want to deploy. At the root of the project, create a warp.config.js file:

// warp.config.js
module.exports = {
  server: "next-ssr",
};

Build

Build the project to let Next optimize and bundle everything for us:

yarn build

Login

Log into your account and select your organization via the prompt:

npx warp login

Deploy

Finally, we can run the deployment command:

npx warp deploy ./

This command will dump something like this:

The deployment will be done in a few minutes. At the end, the command will dump something like this:

You can now open your browser and go to the URL and TADA ! Your Next.js application is live !

Go further: dedicated resources

If you want to use dedicated resources, you can upgrade dynamically to a non shared resource. As shown below it's as simple as a few mouse clicks.

Next steps

At this stage, you have a fully functional application. You can learn more on the ScaleDynamics documentation, like how to get the logs of your server, use a custom domain, implement a CI/CD pipeline, etc.

Enjoy !