Getting Started

In this tutorial, you'll create and deploy a fullstack TypeScript application using Angular, React, or Vue for frontend, NestJS for backend, and TypeCloud for serverless cloud hosting.

Project Structure

TypeCloud aims to get your TypeScript developer experience to the new level. Typically, you have a frontend and a backend part of your TypeScript application. In complex applications, you might have several independent frontends (for instance, a website and an admin dashboard) and several separate backends (usually called microservices). These parts can talk each other by different means.

With TypeCloud, you also have a cloud infrastructure declaration written in TypeScript. It allows you to have everything your app requires to work in a single place (usually in your GitHub repo). You can track its change history and review changes introduced by your teammates via pull requests.

So, let's start with the following directory structure of our new TypeScript project:

├─frontend
├─backend
└─cloud

Prepare the TypeCloud Tools

Create Your Free TypeCloud Account

To start using TypeCloud, you need to create a free account. Please proceed to the Registration Page and follow the instructions.

Install TypeCloud CLI

The TypeCloud command-line interface (CLI) is the primary tool to deploy and manage your TypeCloud services.

$ npm install -g @typecloud/cli

Authenticate TypeCloud CLI

To access the TypeCloud services from your terminal on your behalf, you need to log in with your credentials:

$ typecloud login

This command opens the TypeCloud Admin Console in your web browser, where you need to log in. After a successful authentication in the browser, the CLI writes an access key into ~/.typecloud/config.yml. From there, it is used for all subsequent requests made by the CLI against TypeCloud.

Create Your Cloud Declaration

Go to the cloud folder of your project and initialize your TypeCloud infrastructure declaration project:

$ typecloud init

When initialization finishes, you can find the typecloud.config.ts file in your cloud folder. It is an entry point for your cloud infrastructure declaration.

You can be a member of several TypeCloud accounts. TypeCloud CLI allows you to work with several TypeCloud accounts simultaneously. To let the CLI know which account to use, typecloud.config.ts exports an object of the TypeCloud type. It's an account context object with the accountId property specified. Think of it as of the root of your cloud infrastructure configuration.

// cloud/typecloud.config.ts
import { TypeCloud } from '@typecloud/cloud'
// create a TypeCloud account context
const cloud = new TypeCloud('TestAccount', {
accountId: 'YOUR_TEST_ACCOUNT_ID'
});
export default cloud;

Create Your TypeScript Frontend

Modern web applications are developed using the Single Page Application (SPA) technique. SPA is a JavaScript application that works in a web browser. It performs HTTP requests to the backend server using web APIs (REST, GraphQL, etc.). Today's most popular SPA frameworks/libraries are Angular, React, and Vue. Please refer to the original tutorials and getting started guides of the mentioned tools. Put your frontend application to the frontend folder of your project.

Declare a Static Hosting for Your Frontend

Specify the folder with the production bundle of your TypeScript SPA frontend:

// cloud/typecloud.config.ts
import {
TypeCloud,
StaticHosting
} from '@typecloud/cloud'
// create a TypeCloud account context
const cloud = new TypeCloud('ProductionAccount', {
accountId: 'YOUR_PRODUCTION_ACCOUNT_ID'
});
// configure a static hosting for the frontend
const frontend = new StaticHosting('Frontend', {
folder: '../frontend/dist'
});
// associate the hosting with the TypeCloud account
cloud.add(frontend);
export default cloud;

Deploy Your Frontend to the Cloud

Make sure you have built your frontend application before publishing.

Deploy it:

$ typecloud deploy

Navigate the public link you see in your console after the deployment process has finished.

Create Your TypeScript Backend

In this tutorial, we'll be using NestJS as our NodeJS backend framework. It's a mature and flexible option for TypeScript backend development.

Create a NestJS API

Let's install NestJS and create a sample project. Navigate to the root folder of your project and run the following commands:

$ npm i -g @nestjs/cli
$ nest new backend
$ cd backend
$ npm i

Now you can run our backend API locally:

$ npm start

Open your browser and navigate to http://localhost:3000/. You can find a detailed tutorial in the original NestJS documentation.

Deploy Your API to the Cloud

TypeCloud allows you to deploy a NestJS application as a serverless cloud API. All you need is to prepare a separate entry point for your NestJS application. Create a copy of the existing src/main.ts file and rename it to src/main-cloud.ts. Modify it as follows:

// src/main-cloud.ts
import { NestFactory } from '@typecloud/nest';
import { AppModule } from './app.module';
export default NestFactory.create(AppModule);

Don't forget to install the required dependencies:

$ npm i @typecloud/nest --save

Now you can build your backend API:

$ nest build

Once the build finishes, you can find its output in the dist folder. Let's configure a TypeCloud API hosting. Add a corresponding code to your typecloud.config.ts :

// typecloud.config.ts
import {
TypeCloud,
StaticHosting,
ApiHosting
} from '@typecloud/cloud'
// create a TypeCloud account context
const cloud = new TypeCloud('ProductionAccount', {
accountId: 'YOUR_PRODUCTION_ACCOUNT_ID'
});
// configure a static hosting for the frontend
const frontend = new StaticHosting('Frontend', {
folder: '../frontend/dist'
});
// associate the hosting with the TypeCloud account
cloud.add(website);
// configure an API hosting for the backend
const api = new ApiHosting('API', {
folder: '../backend/dist'
});
// associate the API hosting with the TypeCloud account
cloud.add(api);
export default cloud;

Deploy it:

$ typecloud deploy

Navigate to the URL you see in the console output. It looks similar to xxx.app.typecloud.dev .

Add a PostgreSQL/MySQL Database

Coming soon...