DEV Community: OxygenIT

Why I Decided to Offer a Free Version of My GreenOps Solution

Gilbert — Tue, 22 Apr 2025 13:58:46 +0000

Sustainability is the next challenge for IT teams: understand, anticipate and act on carbon footprint. But these KPIs are far from their day to day goals to get systems on-line and available for customers which matters for business.

When we first launched OxygenIT, our focus was crystal clear: build a GreenOps solution tailored for large enterprises. We knew these companies could benefit significantly from optimizing their cloud and datacenter usage—not just from a cost standpoint, but from a sustainability one as well.

But as we dug deeper into the day-to-day reality of IT teams, we realized something important: FinOps just wasn’t inspiring most people. Sure, saving costs is important for the business, but when your average engineer, DevOps contractor, or platform team member hears “save money for the boss,” it doesn’t exactly get them fired up.

Carbon, on the other hand, does

Reducing emissions is a goal that resonates across every level of an organization. It speaks to the shared values of our time—especially for the younger generation entering the workforce, who are not only asking for change, but expecting it. And they want to play a role.
That’s when we had our moment of clarity.

We realized that to truly drive behavioral change inside organizations, we needed to make carbon the new currency of IT performance. And that meant we had to go beyond the usual surface-level metrics.

We built OxygenIT to provide granular, real-time measurements of carbon impact across a wide spectrum of services—from traditional compute and storage to cloud-native architectures like containers, serverless functions, DbaaS, and beyond. No more static reports. No more abstract carbon calculators based on billing data. Real-time. Actionable. Comprehensive. And then came the market reality.

Two painful truths became clear:

The default reaction from IT leaders was: “Oh, another carbon calculator. You probably just pull in billing data or use some public reports from cloud providers.”

Many companies had already “checked the GreenOps box”—a small consulting gig here, an open-source script from 2020 there—but results were marginal, visibility was low, and business impact was unclear.

That’s when we realized the real challenge wasn’t technical. It was awareness. CIOs and CTOs knew they had to do something, but few truly understood the business case behind GreenOps. Fewer still had seen solutions capable of delivering real-time, actionable insights relevant to all tiers of their organization.

We needed to change that, that’s why I decided to go free.

By offering a free version of OxygenIT, anyone—from an IT sustainability lead in a Fortune 500, to a platform engineer in a fast-scaling startup, or even an independent techie passionate about climate—can get started in minutes. Connect to your cloud tenant of choice. See the data. Explore the impact. Reframe the conversation.

I’m convinced that radical transparency and accessibility are what this space needs. Especially today, when we’re all questioning our digital sovereignty and dependence on US cloud providers. GreenOps is not just about emissions—it’s about control, intelligence, and relevance.

So yes, we’re giving it away. Not because we’re naïve. But because we believe that once you see what’s possible, you’ll want more. And that’s when the real journey starts.

We are making GreenOps a leverage for IT efficiency and value.

Start free

Want to start? It’s free

If you’re curious to try it out, the free version of OxygenIT is live and ready. No sales call, no credit card. Just click, connect, and explore. Have a look to https://console.oxygenit.io/auth/start-free.

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 !

Run a Deno app in production on Cloud 🚀

Nicolas PENNEC — Fri, 08 Apr 2022 12:56:19 +0000

Deno is a modern runtime for JavaScript or TypeScript on server side that has been getting some hype recently. Not a fork of Node.js, but it's a robust alternative on several points, such as performance and security.

Let's see together how to install and use Deno on your laptop by developing a basic web app with a server written in TypeScript. So how to easily deploy and scale any Deno application in production with Docker on the cloud provider of your choice.

What is Deno?

Deno is a modern, simple and secure runtime for JavaScript and TypeScript that uses V8 and is built in Rust. It is an open source project created by Ryan Dahl, creator of Node.js.

For the little story, Ryan Dahl officially released the first version of Deno in May 2018. This new server-side runtime was designed to address several design issues intrinsic to the Node.js runtime. During the JSconf EU of 2018, Dahl himself admitted 10 things he regrets about Node.js, especially about dependencies, modules, and security.

It's important to be mindful that Deno is not a replacement or a fork of the Node runtime, although its name is an anagram of Node 🙃

Its purpose is to be an alternative to Node.js with the following key features:

Secure by default.
Native support of TypeScript.
Ships a single executable file with no dependencies.
Built-in utilities, like linter, formatter, or bundler.
Set of reviewed standard modules that guarantee compatibility with Deno.

Since the 1.0 release in May 2020, Deno is officially stable and production ready. The runtime evolves very quickly with regular releases and shipping of new standard libraries that cover wide needs for developers, see https://deno.land/std/.

Under the hood Deno was built with Rust, for its core part and the event loop. Take a look at the source code of Deno publishes on GitHub: https://github.com/denoland/deno

Prerequisites

To follow this tutorial, we will need:

Basic knowledge of TypeScript.
Basic knowledge of Docker, and more specifically about Dockerfile.
Node.js <= 12, required for the deployment step. We recommend to install the latest LTS version.

Deno installation

You can easily install Deno on your computer using the installers below:

Shell (Linux, Mac):

curl -fsSL https://deno.land/install.sh | sh

PowerShell (Windows):

iwr https://deno.land/install.ps1 -useb | iex

See deno_install for more installation options.

Finally, check your Deno installation with the version command:

deno --version

Once installed, Deno can also upgrade itself to the latest release, using the following command:

deno upgrade

Code & Run your Deno project

For this tutorial, we will write a simple HTTP server that returns a customizable "hello world" message and your current Deno version installed.

First of all, create a new directory deno-app:

mkdir deno-app
cd deno-app

Create a new TypeScript file index.ts in the project directory, and copy the following code into it:

// deno-app/index.ts

import { serve } from "https://deno.land/std@0.134.0/http/server.ts";

const port = 8080;

const handler = (request: Request): Response => {
  const url = new URL(request.url);
  const name = url.pathname.slice(1) || "World";
  const version = Deno.version.deno;
  const body = `Hello ${name} from Deno v${version}`;
  return new Response(body, { status: 200 });
};

console.log(`HTTP server listening on port ${port}`);

await serve(handler, { port });

💡 Developer tip

If you are using Visual Studio Code, we recommend to install the Deno VS Code plugin. This extension adds support of Deno to your IDE and some helpers!

To enable the Deno plugin in your project, open the VS Code command palette with Ctrl+Shift+P, and run the Deno: Initialize Workspace Configuration command.

Next, launch your script with your local runtime through the deno run command. Add the --watch flag to watch for file changes and restart process automatically. For security concerns, you have to use the --allow-net flag to allow the network access.

deno run --watch --allow-net index.ts

Open your favorite browser, and go the following URL "http://localhost:8080/you" to test your fresh Deno application. You can make a change in your source code to observe the livereload feature in action.

Deploy your Deno app on Cloud

To easily deploy your Deno server on the cloud provider of your choice (AWS, Azure, GCP, ...), we will use the ScaleDynamics platform to speed up the deployment process without devops knowledge.

Open your account

First, create a free account on the ScaleDynamics platform. Go to the sign up form, no credit card required!

Once your account is ready, with a confirmed email and a default organization created, you have to install the ScaleDynamics SDK on your device:

npm install warp

Then login once to your ScaleDynamics account with the command below, and select your default organization:

npx warp login

Prepare your project & env

Now let's create a new "deno-app" project in your current organization:

npx warp project create deno-app

And create a new "prod" environment, using the command below:

npx warp env create prod

Select a Cloud resource

Go to your ScaleDynamics Console to select your new Organization > Project > Environment.
Click on the "Add new service" button in the Environment panel.
Select the "Managed HTTP Docker" service to deploy a HTTP docker using your favorite stack.
Select a Cloud resource to run your web app. You can choose the free "shared" provider for this tutorial, or select the cloud provider and region of your choice.
Finally click on the "Apply" action to confirm your cloud resource creation.

Deploy on Cloud

Your cloud resource is ready now. Go back to your source code, and create a new Dockerfile at root of your project, in order to run your Deno server with Docker.

# deno-app/Dockerfile

FROM denoland/deno:latest
WORKDIR /usr/src/app
COPY . .
EXPOSE 8080
CMD ["deno", "run", "--allow-net", "index.ts"]

In your terminal, run the warp deploy command to start a deployment of your Deno application, thanks to the ScaleDynamics SDK, and follow the interactive mode:

npx warp deploy

Your server is live 🚀

The SDK will return the public URL of your web app. You can now write an awesome Deno application, deploy it and scale it on Cloud with ScaleDynamics.

Learn more about warp deploy command and its capabilities in the SDK documentation. For an optimized use, we recommend to deploy from a CI/CD workflow.

Go further with Metrics

Once your application running in production, it is crucial to monitor it to track its health status (CPU, memory, ...), any server errors, or the carbon footprint of your project.

From the ScaleDynamics Console, you have a realtime monitoring of your web application with the Metrics dashboard of each Cloud resource. Every metric is provided for a given resource over a period of an hour or a day. You can access them for the last 24 hours, the last 7 days or the last 30 days.

Note that this feature is currently available for all cloud resources available on the platform (public cloud, on-premise, ...), except free shared resources. So, for production use we recommend upgrading your service to a dedicated resource.

Know more details about Metrics on the ScaleDynamics documentation.

Thanks for reading 🙏

Your turn now to have fun with Deno and run it on Cloud!

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 !

How to deploy Drupal on cloud with Docker

Nicolas PENNEC — Mon, 21 Mar 2022 17:23:07 +0000

Drupal is an open source content management platform powering millions of websites and applications.
We will see how you can easily deploy a simple Drupal website on Docker to the cloud with ScaleDynamics.

Introduction

Drupal is one of the most popular CMS (Content Management Software).
Build with PHP, It is a versatile open source platform for building amazing digital experiences.
Drupal is used to make many of the websites and applications you use every day, see the official showcases.

Drupal has great standard features, like easy content authoring, reliable performance, and excellent security.
But what sets it apart is its flexibility; modularity is one of its core principles.

Prerequisites

To follow this tutorial, we will need:

Node.js <= 12, we recommend to install the latest LTS version
Basic knowledge of Docker, and more specifically about Dockerfile

Init your Drupal application

From your terminal, start by creating a new folder named drupal-app and change directory into it:

mkdir drupal-app
cd drupal-app

Then create a new file named Dockerfile and paste the following code into it, in order to build you container from an official image of Drupal downloaded from Docker Hub:

# drupal-app/Dockerfile

FROM drupal:latest
EXPOSE 80

In this configuration, we have chosen the official Drupal image with the latest tag. For a production use case, we recommend setting a stable version with a specified number, like drupal:9.3 for example.

Configure your cloud deployment

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

Account creation and resource selection

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 you need to choose what kind of service is required for your deployment. There are four types:

Managed HTTP Docker
Managed Node.js server
Managed Node.js module
Static assets hosting

For this Drupal project, we need a Docker container to run the PHP server. Let's pick the managed HTTP Docker. You can learn more on the other types in the ScaleDynamics documentation.

Configuration file

Now 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 new file named warp.config.js with the following content:

// drupal-app/warp.config.js

module.exports = {
  docker: "drupal-app",
};

Deploy your Drupal container

Next to deploy your container on the ScaleDynamics platform, you have to use the CLI from SDK.

Install SDK

First, install once our public SDK called warp and available on the official npm registry: https://www.npmjs.com/package/warp

Install the library as development dependency in your project:

npm init -y
npm install --save-dev warp

Or, install it as an npm global dependency on your system:

npm install -g warp

For the next steps, we will use the npx command to run each warp command.

The npx command allows you to run an arbitrary command from an npm package (either one installed locally, or fetched remotely), in a similar context as running it via npm run.

If you need help on the warp CLI, just run the help command as below:

npx warp --help

See more about SDK installation and its use in the ScaleDynamics documentation.

Login to ScaleDynamics

For the first time, you must login to the ScaleDynamics platform. So run once the warp login command to enter your account credentials:

npx warp login

Note that the prompt will ask you to select an organization, only if you have more than one!

Run deployment

Now it's time to deploy your awesome Drupal project on your managed cloud resource.

To achieve that step, you just need to run the warp deploy simple command line:

npx warp deploy

The deploy command will detect that your application needs to be deployed as Docker resource. The interactive mode will ask you to pick a project and an environnement, in order to deploy your Drupal container on cloud. Then you will have to choose a domain name as public URL. Leave blank if you want a generate random one.

Your Drupal container is now deployed and ready to use from the returned public URL! On the next step, you will have to configure your Drupal website.

In addition, you can automate your deployment and avoid interactive mode with the following options. It can be useful to run that operation from your CI/CD pipeline by example.

npx warp deploy --project <project-name> --env <env-name>

See more about warp deploy command in the SDK documentation

Setup your Drupal website

Open your browser, go the URL of your managed Docker resource that now serves your Drupal container and start the setup "set-by-step" of your website.

The first load will show you the Drupal interactive initial setup. First, pick your language on form and continue.

Then select the "Demo: Umami Food Magazine" as current installation profile. This option will generate a ready-to-use website sample built from the Drupal CMS that show off some of its most common capabilities. If you are already familiar with the Drupal platform, choose a "Standard" or "Minimal" profile according to your needs.

Next step, select the "SQLite" database for this sample and set your admin password. For production usage, we recommend using an external database, like MySQL or PostgreSQL. You can easily find a DBaaS (Database-as-a-Service) provider to host your data.

Finally step, just wait for the complete installation...

Well done! Your new Drupal website is now live on the cloud provider of your choice.

You can go in the "Log in" section of your published website, enter your admin credentials and try the awesome features offered by the Drupal platform 🚀

Note that you can easily import, export, and synchronize your Drupal configuration from the administration page. See details on the Drupal documentation.

Go further with dedicated resources

If you need a powerful resource with more vCPU, RAM or storage to host your production server, you can upgrade dynamically to a dedicated resource from your ScaleDynamics Console. As shown below it's as simple as a few clicks.

What’s next

At this stage, you have an awesome Drupal website published on cloud with Docker.

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!

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 !

Develop your Vue.js app faster with this MEVN template

Gilbert — Thu, 17 Jun 2021 13:12:45 +0000

Coding in Full Stack seems cool, but that requires a lot. For instance, just setting up tools, frameworks, and database tiers already takes you hours.

We know it’s painful to wait while you’re excited with your new ideas 😉 That is why we came up with MERN and MEAN templates to help you start your projects in no time, with a less and simple configuration.

And today, regarding some of your request, we would love to bring you another template for the MEVN stack 😉 Quite similar to the other two templates, you can shift your focus on MongoDB, Vue.js, and Node.js only as Express.js is managed automatically by magic 🤯

Clone it right here 👉 MEVN ready-to-deploy template

Now let’s get to know how the template can help you!

A faster and effortless way to code in MEVN 🤯

Basically, how this MEVN template works is exactly similar to the MERN and MEAN templates that we have just published recently. However, for anyone who doesn’t have any idea about it yet, here’re some key points for you.

This MEVN template is configured for the ScaleDynamics Cloud Platform, which provides not just everything you need to code in Full Stack but even more:

One command to develop with live-reload
Another one to deploy, make your app/service available on a URL
No Express.js layers management, the platform takes care of them automatically
No HTTP/JSON coding, as our compiler automatically generates its stubs required to call a Node.js function using JS objects.

You will need a ScaleDynamics platform account to deploy your project. Take 1 minute and create your FREE Community account
right here.

Get the template ready in no time 🚀

clone the template here:

git clone https://github.com/ScaleDynamics/vue-mongodb-template.git

You can find 2 principal parts in this project:

The frontend, a vue-app web template created with vue-cli. To update it, open the src folder where you can add, modify or delete components.
The backend contains a node module and a MongoDB module. You can update the frontend/backend as you need to build your own app.

To start developing with the template, go in vue-app folder and run those commands below:

Install easily

npm install

To log in to the ScaleDynamics Platform

npx warp login

Develop both front & backend with live-reload

Use the command below to enter a live-reload development session:

npm run serve

You can always update the frontend or the backend code, it will be rebuilt at each modification.

Please note that you’ll need to select an existing project or create a new one as you want before running this command. On the ScaleDynamics platform, a project identifies an application or a microservice. For more details on projects, see the documentation.

Deploy dynamically

Now, to deploy, you will need to compile and minimize your project for production:

npm run build

Then use the simple deploy command

npm run deploy

You will have to select or create an environment that identifies the cloud execution environment to run your app. You can create as many as you want, each environment has its own URL.
For more details, check out the documentation.

Configure MongoDB driver

In terms of MongoDB, you already have a template module in the src/mongodb.js. Replace the URI constant to use your own MongoDB instance:

const URI = 'mongodb://[username:password@]host1[:port1][,...hostN[:portN]][/[defaultauthdb][?options]]';

You’re all set, start your MEVN project now!

Functions in ScaleDynamics Platform

With the ScaleDynamics Platform, new functions can be called by the frontend. Add them in index.js or into another module and export them. The platform manages the Express.js layers automatically.

const myFunction = () => {
  // your code here
}

module.exports = { myFunction };

To access your new functions on the frontend side, adapt this code:

import * as Backend from './.backend/hello.js';

const { myFunction } = new Backend();

Other info

And that’s it! Hope you find it helpful and if you need more information, check out these documentations:

We are always here if you have any questions or feedback!

Cheers!

Build your MEAN project with automatic Express.js management

Gilbert — Fri, 11 Jun 2021 12:20:34 +0000

Hi there, some of you guys might already know that we built a MERN stack template earlier that helps you skip Express.js.

Regarding some of your requests, we would like to bring you a new open-source template. And this time, it is for MEAN stack 😉

And you know what, you can still develop both front & backend with live-reload and deploy with a simple command-line while the Express.js part is managed 100% automatically, isn’t that great? 🤯

Clone it right here 👉 MEAN ready-to-deploy template

Now let’s get to know how the template can help you!

A MEAN stack but you only code MAN 🤯

Besides the MERN stack that stands for MongoDB, Express, React and Node.js, we still have the MEAN stack for people who use Angular instead of React. It is also considered as a quite popular one for Full Stack JavaScript developers.

Quite similar to the MERN template, this MEAN template is also configured specifically for the ScaleDynamics cloud platform on MIT license. It offers all you need to start developing your MEAN based apps/services:

One command to develop with live-reload
Another one to deploy, make your app/service available on a URL
No Express.js layers management, the platform takes care of them automatically
No HTTP/JSON coding as our compiler automatically generates its stubs required to call a Node.js function using JS objects.

When it comes to deployment, you will need a ScaleDynamics account, you can create your FREE Community account right here).

How to use the template

First of all, clone the template by:

git clone https://github.com/ScaleDynamics/angular-mongodb-template.git

Then you’ll have both frontend and backend template ready:

On the frontend, you’ll have a angular-app web template app created with angular-cli. To update it, open the src folder where you can add, modify or delete components.
The backend contains a node module and a MongoDB module. You can update the frontend/backend as you need to build your own app.

To start developing with the template, go in frontend/angular-app folder and run those commands below:

Install the project

npm install

Log in to the ScaleDynamics Platform

npx warp login

Develop with live-reload

Start a live-reload development session by using this command.

npm run start

You can always update the frontend or the backend code, it will be rebuilt at each modification.

Deploy with ScaleDynamics

When it comes to deployment, you’ll need to compile and minimize your project for production by using:

npm run build

Then the deploy command

npm run deploy

Now, beside selecting a project, you’ll also have to select or create an environment which identifies the cloud execution environment to run your app. You can create as many as you want like ‘staging’, ‘demo’, ‘prod’... Each environment has its own URL.

For more details on projects or environments, see the documentation.

Configure MongoDB driver

In src/mongodb.js. There is a template module that you can replace its URI constant with your own.

const URI = 'mongodb://[username:password@]host1[:port1][,...hostN[:portN]][/[defaultauthdb][?options]]';

You’re all set!

Creating new functions

With ScaleDynamics Platform, new functions can be called by the frontend. Add them in index.js or into another module and export it. The platform manages the Express.js layers automatically.

const myFunction = () => {
  // your code here
}

module.exports = { myFunction };

To access your new functions on the frontend side, adapt this code:

import * as Backend from './.backend/hello.js';

const { myFunction } = new Backend();

Other info

And that’s it! If you need more information, check out these documentations:

We hope you liked it, please let us know if you have any questions or feedback!
Stay tuned for the Vue.js template coming up! you can subscribe, or follow us on Twitter, Facebook and even Instagram for more updates!
Cheers!

Hack your TensorFlow.js experience to the next level 🚀

Long Nghiem — Fri, 14 May 2021 07:12:52 +0000

TL;DR;

Our AI specialist at ScaleDynamics built Tensorflow.js snippets ready to use, so you can get on directly with testing and building TFJS right from the browser.

We started with the most used cases:

Using video feed: Face detection
Using microphone feed: Sound spectrogram ; Sound speedup
Doing inference with Node.js
Text classification: Toxicity

He also added explanations on the Face Detection and Sound Spectrogram snippets to help you understand them easier

All snippets are available on our free Playground where you can code frontend & backend directly from the browser.

Hope you guys like it!
MadeWithTFJS ❤

AI in the browser
Tensorflow.js seems easy, but not that easy!
A simple way to use Tensoflow.js right in the browser
TensorFlow's snippets by use cases
Play and learn more effectively on the Playground

AI in the browser

Artificial intelligence and machine learning have been gaining interest and increasing adoption in many applications over the last 6 years. As you might already know, TensorFlow.js has shown an incredible amount of contribution to the JavaScript community, bringing us closer to AI and machine learning. It helps JavaScript developers to build machine learning models using only JavaScript and use it directly in the browser or in Node.js.

In this article, we would like to introduce a new way to learn and play with TensorFlow.js that promisingly provides you with the easiest way to code Tensorflow.js

In case you want to have an in-depth introduction to TensorFlow.js and its application in machine learning, you can check out Dominique’s Introduction to TensorFlow.js, the AI stack for JavaScript

Dominique d’Inverno is an AI and algorithm development engineer at the ScaleDynamics starship 😎. With his 20 years of experience in embedded electronics design, mobile computing systems architecture and mathematical modeling, he built the TFJS snippets that we are going to present today. 😉

So with no further ado, let’s get started!

TensorFlow.js seems easy, but not that easy!

Since its first version in 2018, TensorFlow.js’ team has been working hard in order to align itself with Keras (Python). So far, you can directly use or retrain its +1,000 pre-trained models or convert a Python TS model to build your own one in JavaScript, in the browser, on the client-side. Basically, you can easily perform complex tasks like visual recognition, generating music or detecting human poses with just a few lines of JavaScript.

However, inference on big data sets in browsers is not really efficient in terms of performance due to model and data loading time as well as computing capabilities.

That’s where Node.js saves the day and increases performance by deploying on a high-performance GPU/CPU engine and in the network under the hood of the dataset.

Source: Opportunities and Challenges for TensorFlow.js and beyond - by Jason Mayes

As you can see in the illustration from TensorFlow.js, to make it work smoothly, you will have to take care of different API layers between your client-side and backend Node.js such as the Core or Ops API that allows you to do linear algebra, the Layers API which is the high-level one that helps you do machine learning easier.

Here comes the hard part, you will face complexity when trying to address distributed processing for the next performance step.

HTTPs and JSON management are quite complicated and redundant for developers, even an experienced ones. Even a single misplaced comma or colon can cause a JSON file to go wrong, and not work. You have to be careful to validate any data you are attempting to use (although computer-generated JSON is less likely to include errors, as long as the generator program is working correctly).

Now, imagine how efficient you can be if you can automate this process?

A simple way to use Tensoflow.js right in the browser

Acknowledging the problem, we have been developing a unique compiler technology used in the ScaleDynamics Platform. It enables easy process distribution with very little development effort, and you can see it in action on our Javascript Full Stack Playground.

To ease coding, instead of creating HTTP endpoints and use HTTP calls to execute a remote inference, you just need to build a client for this inference function, deploy and import it in the main application (via import statement in index.js or via script tag in HTML) and then call it like any JavaScript function.

In action: Tensorflow.js face detection

Take a look at this snippet on our Playground to see how easy it is and to see the demo in action: TensorFlow.js face detection or you can check out the code snippet below:
In the beginning, the blazeface model is loaded in the back-end context to reduce further latencies :
Frontend:

await backend.loadBlazeface();

Backend:

const tf = require('@tensorflow/tfjs'); require('@tensorflow/tfjs-node');
const blazeface = require('@tensorflow-models/blazeface');
let model;
...
exports.loadBlazeface = async function () {
   model = await blazeface.load();
}

Images are captured in a front-end canvas offCanvas (this name because this canvas is not displayed) via its associated context offContext and converted to a blob :
Frontend :

offContext.drawImage(video, 0, 0, w, h);
offCanvas.toBlob(process, 'image/jpeg', 0.9);

Once the conversion is finished, blazeface detection model is invoked within process callBack :

const process = async (blob) => {
const buff = await blob.arrayBuffer();
if (hideProc.value == 'browser'){
// perform faces detection (blazeface inference) on server
const faces = await backend.detect(buff);
// perform hiding/blurring on browser
hideAndDraw(faces);
...

On the back-end server, the detection function simply decodes jpeg, infers blazeface, performs cosmetic size adjustments on detected boxes, and sends back the detection result.

exports.detect = async function (imageBuf) {
//imageBuf : ArrayBuffer of jpeg base64 string
const jpjs = require('jpeg-js');
// fetch & decode image
let image = jpjs.decode(imageBuf);
// detect faces
const faces = await model.estimateFaces(image, false, false, false);
...
return faces;
}

In action: Tensorflow.js sound spectrogram

In a way similar to the face detection snippet, sound chucks and computed spectrum amplitudes are passed as ArrayBuffer arguments.
Audio is captured using a MediaRecorder element stopped and restarted at a TIMEFRAME periodicity.
Frontend:

var recorder = new MediaRecorder(inStream);
let blob;
recorder.start();

recorder.onstart = function (e) {
analyser.fftSize = parseInt(fftPoints.value);
sleep(TIMEFRAME).then (() => recorder.stop());
};

recorder.ondataavailable = function (e) {
blob = e.data;
};

recorder.onstop = async function(e) {
if (processOn.value == 'browser') {
// process spectral analysis on browser
const freqU8 = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(freqU8);
drawSpect(freqU8);
} else {
// Perform backend-spectral analysis
const soundBuf = await blob.arrayBuffer();
const soundDec = await audioCtx.decodeAudioData(soundBuf);
const chan0 = soundDec.getChannelData(0);
const freqBuf = await backend.soundSpect(chan0.buffer, parseInt(fftPoints.value));
const freqF32 = new Float32Array(freqBuf);
// draw spectrogram result
drawSpect(freqF32);
}
// restart recorder after process and display
chunks = [];
if (! finished) recorder.start();  else console.log('analysis terminated');
};

The back-end function is quite straight forward: a spectral analysis using Tensorflow tf.signal.stft utility, and log scaling.

Backend:

const tf = require('@tensorflow/tfjs-node');

exports.soundSpect = async function(inBuf, fftSize) {
const chan0 = new Float32Array((new Uint8Array(inBuf)).buffer);
const signal = tf.tensor1d(chan0);
const res = tf.signal.stft(signal, fftSize, Math.floor(fftSize*0.8), fftSize)
                 .abs() ;
// add 30 db gain and normalize to max Uint8 value to match
// browser analyzer defaults
const freqs = res.mean(axis=0).mul(1000).log1p().mul(255*Math.log10(Math.E)/Math.log10(fftSize)).dataSync();
tf.dispose([signal, res]);
return freqs.buffer;
}

With these examples, you can see the simplicity of coding with TensorFlow.js on our Playground.

TensorFlow.js provides an easy approach to machine learning and artificial intelligence, we help you do it easier by eliminating the painful part of coding in Full Stack! 😉

TensorFlow's snippets by use cases

You can easily search with the keyword ‘TFJS’ or ‘MadewithTFJS’ on the search bar, there will be a lot of cool stuff for you to explore.

Video feed

Tensorflow.js face detection (shown above)
This faces detection snippet was already shown above but in case you missed it, it streams video from a webcam live stream on the backend, and applies a black or blurred overlay on detected faces regions, either on frontend or backend. Images are passed (in or out) to the back-end as ArrayBuffer function arguments.

Sound feed

Tensorflow.js sound spectrogram (shown above)
This snippet streams audio from the device microphone and displays a live spectrogram, whose frequencies are computed on the frontend side with an audio API analyzer or on the backend side using tensorflow.js utility.

Tensorflow.js sound speedup
This snippet performs sound/speech capture, increases sound speed on a server, using simply fixed time frames cross-fading algorithm, then plays it back on the device.
The code structure is quite similar to spectrogram snipped.

Inference

Tensorflow.js interference
This snippet shows how to use Tensorflow.js on the Node.js back-end side to apply furthermore on AI, through buildup and training of a simple sequential neural network.

Text classification

Tensorflow.js toxicity detection
Another example for applying Tensorflow.js on your AI projects, this time, the author infers a pre-trained TensorFlow model for toxic words detection on a text box, showing how to integrate that as a feature in your projects.

Play and learn more effectively on the Playground

The JavaScript Full Stack Playground allows you to code both frontend and backend Node.js in the same place with integrated live-reload. By automatizing HTTPs/JSON management, it also offers a unique HTTP-less experience which makes learning TensorFlow.js easier than ever.

Having access to a diverse snippets library for TensorFlow.js, React, Angular, Vue.js, Bootstrap, MongoDB… and a place to exchange ideas with the growing community, it will probably give you an extra boost to become Full Stack faster than you think 😉

The JavaScript Full Stack Playground is FREE for the developer community, you can easily create an account, get on it and start playing and testing your project with TensorFlow.js, or check what others are doing!

Get your FREE developer plan in this link
To keep yourself updated, feel free to follow us on Twitter, Facebook, Instagram. I guarantee that it’ll be fun, and you’ll never miss a single new snippet on the Playground 😎✨

MERN ready-to-deploy template, to skip Express.js

Gilbert — Tue, 11 May 2021 15:28:26 +0000

At ScaleDynamics we have one recurrent passion: to make web developers’ life easier 🙈.

BAM! And we strike again! We built a fully open source MERN template ready to use for our platform.

One command to develop with frontend and backend live reload...
One command to deploy on the cloud...

Let’s get started!

It is located here (https://github.com/ScaleDynamics/react-mongodb-template) - use it as you wish and start coding your projects with it! We hope you’ll find it helpful! 🤗

A MERN template with a fully managed Express

Quick reminder — MERN stands for MongoDB, Express, React and Node.js, and is one of the several variations of the MEAN stack (MongoDB, Express, Angular, Node.js). It is one of the standard “Full Stack” stack for JavaScript developers.
This template is configured for the ScaleDynamics web platform. It is on MIT license and ready to be used to build your own MERN based apps/services!
Everything is preconfigured: we provide one command to develop with live reload (frontend and backend) and one to deploy to make it live on a URL.
One particularity of our platform is that you don’t have to manage the Express.js layers, the platform manages them for you automatically, so you can focus only on the MongoDB/Node/React coding.
You can stop coding HTTP/JSON as it is now automatic, thanks to our compiler. It generates the HTTP/JSON stubs required to call a Node.js function using JS objects.
Please note that you need a ScaleDynamics platform account only to deploy your project, you can create your FREE Community account right here).

Diving into the template

To start using the MERN template you can clone it:

git clone https://github.com/ScaleDynamics/react-mongodb-template.git

This project is divided in two parts:

the frontend, where you can find a react-app web template app (located in the frontend/react-app folder). It has been created with create-react-app. To update it, open the src folder where you can add, modify or delete components.
the backend contains a hello node module and a MongoDB module. You can update the frontend/backend as you need to build your own app.

To start developing with the template, go in frontend/react-app folder and run those commands:

To set up the project

npm install

To log onto the ScaleDynamics Platform

Then use your ScaleDynamics account credential to log onto the platform (feel free to create a free community account here)

npx warp login

Develop with live-reload

To enter a live-reload development session, use the command below. Feel free to update the frontend or the backend code, it will be rebuilt at each change.

npm run start

Please note that when running this command, you have to select a project. On the ScaleDynamics platform, a project identifies an application or a microservice. Select an existing project or create a new one.
For more details on projects, see the documentation.

Deploying with ScaleDynamics

To deploy your project you’ll have first to compile and minify your project for production.

npm run build

Then use the deploy command

npm run deploy

Note that when running this command, you have to select a project and an environment. On the ScaleDynamics platform a project identifies an application or a microservice.

Select an existing project or create a new one. An environment identifies the cloud execution environment to run your app. You can create as many as you want like ‘staging’, ‘demo’, ‘prod’... Each environment has its own URL.

To deploy, select an existing environment or create a new one. For more details on projects or environments, see the documentation.

Configure MongoDB driver

Regarding MongoDB, we provide a template module in the src/mongodb.js. To use your own MongoDB instance, replace the URI constant by your own.

const URI = 'mongodb://[username:password@]host1[:port1][,...hostN[:portN]][/[defaultauthdb][?options]]';

You’re all set!

Creating new functions

You can create new functions that can be called by the frontend. Add them in index.js or into another module and export it. The platform manages the Express.js layers automatically.

const myFunction = () => {
  // your code here
}

module.exports = { myFunction };

To access your new functions on the frontend side, feel free to adapt this code:

import * as Backend from './.backend/hello.js';

const { myFunction } = new Backend();

Other info

And that’s it! If you need more information, you can refer to the documentation:

We hope you liked it, please let us know if you have any questions or feedback!
We have more template variations coming up for React, so you can subscribe, or follow us on Twitter, Facebook and even Instagram if you wish!

📣 FREE Community Plan for JavaScript Dev to develop faster 🚀

Long Nghiem — Tue, 13 Apr 2021 12:58:22 +0000

Hi there Full Stack community 👋

I guess some of you might already know about and already tested your code on the JavaScript Full Stack Playground. We would like to thank you for your interest and your contribution to the Full Stack community 🍻 🎉. We want to thank everyone who participated and gave feedback on the Playground.

Today, we proudly announce that the JavaScript Full Stack Playground just got a Free Developer Plan! You’ll have to access to the next-generation HTTP-less web platform, guaranteed to bring you a unique and fun experience of coding in Full Stack 🤯. Please note that you'll need to sign in only to deployment😉:

The JavaScript Full Stack Playground, an in-browser code editor for frontend and Node.js backend
The ScaleDynamics Platform and its production-grade SDK for projects

With no further ado, let's get started!

Production-grade SDK

Discover our production-grade SDK for projects - a new way to develop faster than never before, automate away mundane tasks, and focus on building your innovation. It offers a 100% managed Full Stack HTTP-less environment:

Our groundbreaking compiler generates the HTTP/JSON stubs required to call a Node.js function using JS objects.
The SDK manages the deployment & execution of the frontend & the Node.js backend on our cloud. Plug your managed database tier to bring your ideal full-stack stack to your developers.

You will never have to deal with Express.js, routing, doing HTTPs, and managing its errors, serialization, creating dockers, HTTPs custom domains, managing endpoints, and how to deploy and manage servers... The tool takes care of all that for you, it’s just magic! 😉🤯

Not just that, you can focus on your code logic by reducing more than 10000 lines of code in a project 😎

Our SDK also comes with lots of cool features such as cloud emulator, integrated live reload, deployment in one command line… and they are all waiting for you to discover! So why wait? Check it now here

JavaScript Full Stack Playground

The JavaScript Full Stack Playground might be quite familiar to some of you, but if it doesn’t, here’s its features:

Coding directly in HTTP-less mode in the browser for both front-end JavaScript and back-end Node.js (of course, without HTTPs and JSON management) 😉
Showing results in real-time with zero configuration
A public library of code snippets which makes it easier for you to get inspiration, to learn, test and prototype ideas
The public code snippet library will be added with more API tutorial snippets which allow you to test APIs directly within the playground.
Share your snippets with your team by sending them a playground URL to review and work with peer easier

Start coding in Full Stack today!

The Dev Community Plan is FREE for developers, you can easily create an account by clicking this link (non-commercial use).

And if you feel it’s interesting and want to explore more about the tech or just to keep yourself updated, feel free to follow our social media. I guarantee that it’ll be fun, and you’ll never miss a single update on our app version 😎✨

Twitter
Facebook
Instagram