Deploy NodeJS Typescript to Google App Engine

Introduction

In this guide, I will walk you through deploying a NodeJS Typescript application to Google App Engine (GAE). GAE offers a straightforward and quick deployment process for various programming languages. If you're developing your NodeJS app using JavaScript, deploying it is pretty straightforward. However, if you're using Typescript, there's an extra step you'll need to take, which I'll explain here.

Prerequisites

Before we proceed, ensure you have the following:

  • A Google Cloud account with Google App Engine enabled.
  • The gcloud CLI installed.


Creating a NodeJS Typescript Project

First, create a file named `src/main.ts` with the following content:

import express from 'express'

const app = express()
const port = 8080

app.get('/', (req, res) => {
res.send('This is NodeJS Typescript Application! Current time is ' + Date.now())
})

app.listen(port, () => {
console.log(`Server is running http://localhost:${port}`)
})


The tsconfig.json file is used to configure Typescript as follows:

{
"compilerOptions": {
"allowJs": true /* Allow javascript files to be compiled. */,
"outDir": "./dist" /* Redirect output structure to the directory. */,
"experimentalDecorators": true /* Enables experimental support for ES7 decorators. */,
"skipLibCheck": true /* Skip type checking of declaration files. */,
},
"include": [
"src/**/*" // apply with all .ts on src directory
],
"exclude": ["node_modules"],
"lib": ["es2019"]
}

Note that the `include` field should point to the source code directory, and the `outDir` field specifies the directory where the compiled JavaScript files will be stored.


Next, create the `package.json` file as follows:

{
"name": "express-ts",
"version": "1.0.0",
"scripts": {
"start": "node dist/main.js",
"start-dev": "nodemon src/main.ts",
"build": "tsc"
},
"dependencies": {
"express": "^4.19.2"
},
"devDependencies": {
"@types/express": "^4.17.21",
"@types/node": "^20.12.12",
"nodemon": "^3.1.0",
"ts-node": "^10.9.2",
"typescript": "^5.4.5"
}
}

The content of the `package.json` file is quite simple. You only need to note that the `start` script is used to start the application when deploying to GAE, while in the development environment, you should use the `start-dev` script.

Since this is a Typescript project, you first need to compile the Typescript code into JavaScript by executing `yarn build`. After that, the `dist` folder will contain the compiled JavaScript files. If you are using a JavaScript project from the start, you can skip the build step.

Note that the `start` script, which is `node dist/main.js`, will be automatically executed when deploying to GAE. Therefore, ensure that the build process completes successfully and that you have correctly specified the directory to the JavaScript file.


Next, create the `app.yaml` file.

runtime: nodejs22
service: express-ts

The `app.yaml` file is mandatory for Google App Engine to configure resources during deployment.

  • The `runtime` specifies the NodeJS version to execute the source code.
  • The `service` field sets the service name used to generate the subdomain; you can name it as you like. If not provided, the default service will be used.


Next, deploy as follows:

gcloud app deploy

If the deployment process completes successfully, it will print the host URL for you to access. The host URL will be in the format `https://{service-name}-dot-{project-id}.r.appspot.com` or, for the default service, `https://{project-id}.r.appspot.com`.

After executing the deploy command, a `.gcloudignore` file (which functions similarly to a `.gitignore` file) will be created if it doesn't already exist. You can use this file to ignore any unnecessary files or folders during the deployment process.



Here are some additional commands you can use:

gcloud app browse # open browser for service default
gcloud app browse -s {service name} # open browser for specific service

gcloud app logs tail # show log for service default
gcloud app logs tail -s {service name}


If you want to delete a service, use the following command:

gcloud app services delete {serivce name}

Feel free to like and share the content if you find it helpful, and don't hesitate to leave a comment to give feedback or if you have any questions you'd like to discuss.

Comments

Post a Comment

Popular posts from this blog

Kubernetes Practice Series

Image
Introduction Kubernetes (often abbreviated as K8s ) is an open-source system designed to automate the deployment, scaling, and management of containerized applications. This page serves as a collection of articles related to Kubernetes (K8s) , including theoretical concepts and practical guides on using Kubernetes to set up essential tools for the software development process. I will continue to update this series with new articles as ideas come to mind, to ensure the series becomes more comprehensive. The articles are arranged in increasing order of difficulty to make it easier for you to follow. If you have time, it's recommended that you start from the beginning of the series to acquire the necessary knowledge and information that will prepare you for the subsequent articles. Key Topics Covered in This Series Basic Knowledge : Fundamental concepts, common commands, etc. Resources : Pod, Deployment, Service, StatefulSet, Ingress, etc. Pod Autoscaler : Horizontal vs. Vertical sc
Read more

NodeJS Practice Series

Image
Introduction NodeJS is an open-source and cross-platform JavaScript runtime environment . Here are some key points about NodeJS : V8 Engine : NodeJS runs on the V8 JavaScript engine , which is also the core of Google Chrome . This allows NodeJS to be highly performant. Asynchronous and Non-Blocking : NodeJS  uses an event-driven, non-blocking I/O model. It’s lightweight and efficient, making it ideal for data-intensive real-time applications. Single-Threaded : NodeJS  runs in a single process, handling multiple requests without creating new threads. It eliminates waiting and continues with the next request. Common Language : Frontend developers who write JavaScript for browsers can use the same language for server-side code in NodeJS . You can even use the latest ECMAScript standards without waiting for browser updates. This page is designed to compile articles related to NodeJS , including how to integrate it with various libraries and relevant tech stacks. I will continue to u
Read more

Docker Practice Series

Image
Introduction Docker is an open platform for developing, shipping, and running applications. This page is dedicated to compiling articles related to Docker , covering both the theoretical aspects and practical applications of Docker in setting up popular tools essential for software development. I will be updating this series with more articles in the future as new ideas for topics arise. The articles are arranged in increasing order of difficulty, making it easier for you to follow along. If you have the time, I recommend starting from the beginning of the series to ensure that you grasp the necessary knowledge and information needed for the more advanced articles later on. Here are some key topics in the series that you need to explore to effectively use Docker : Basic knowledge Docker commands Docker Compose Building Docker images Performance improvement Integration with CI/CD Once you have a solid understanding of the foundational knowledge, the extended topics (including advanced
Read more

React Practice Series

Image
Introduction React is a JavaScript library created by Facebook , often referred to as the most popular frontend framework today. This page aims to gather articles related to ReactJS , covering topics such as theory, features, and commonly used packages in the process of building ReactJS applications. I will update this series with more articles in the future as new ideas for content come up. The articles are arranged in increasing order of difficulty, so if you have time, it's recommended to start from the beginning of the series. This will ensure you grasp the essential knowledge and information needed for the subsequent articles. Here are some key topics in the series that you need to explore to effectively use ReactJS : Fundamental : React Hook, React Context, Lazy load, etc. State management : redux, mobx, recoil, etc. Middleware libraries : redux-thunk, redux-saga, redux-observable, etc. Popular packages : react-query, immer, styled-components, etc. Rendering techniques : C
Read more

Sitemap

Image
A page aggregator designed for easy reference and search, compiling all blog posts for convenient access.
Read more

Setting up Kubernetes Dashboard with Kind

Image
Introduction In a previous article, I guided you through using Helm to deploy on Google Kubernetes Engine . However, if you want to cut down costs by using Kubernetes in your local environment instead of relying on a cloud provider during development, then Kind is your go-to. There are several tools to help set up Kubernetes locally, such as MiniKube , Kind , K3S , KubeAdm , and more. Each tool has its own pros and cons. In this article, I'll walk you through using Kind to quickly set up a Kubernetes cluster on Docker . Kind stands out for its compactness, making Kubernetes start up quickly, being user-friendly, and supporting the latest Kubernetes versions. Working with Kind Firstly, follow the instructions here to install Kind according to your operating system. If you're using Ubuntu , execute the command: [ $( uname -m ) = x86_64 ] && curl -Lo ./kind https://kind.sigs.k8s.io/dl/v0.23.0/kind-linux-amd64 chmod +x ./kind sudo mv ./kind /usr/local/bin/ki
Read more

Explaining Async/Await in JavaScript in 10 Minutes

Image
Introduction For a long time, we've relied on callbacks to deal with asynchronous code in JavaScript. As a result, many of us have faced dreadful experiences dealing with deeply nested functions ( callback hell ). Callback hell Callbacks come with a lot of drawbacks. When we have multiple asynchronous operations, callbacks have to wait for each other to execute, prolonging the completion time. Additionally, writing nested callbacks makes our code messy and hard to maintain. In the ES6 (ECMAScript 2015) version, JavaScript introduced Promises. This was a fantastic replacement for callbacks and was quickly embraced by the community. Our new code looks similar to the old one, making it easier to follow and maintain. However, the issues with callbacks weren't completely resolved. Since the ES7 (ECMAScript 2016) version, Async/Await has been added to make asynchronous code in JavaScript look and feel easier to use. What is Async/Await? Async/Await is a feature of JavaScript that
Read more

Create API Gateway with fast-gateway

Image
Introduction In this article, I will guide you on how to use fast-gateway to deploy a simple API Gateway on NodeJS along with express . The advantage of an API Gateway is that it acts as an intermediary layer to hide the rest of the system, including services, commonly used in Microservices architecture. Example Usage This is the Microservices model after deployment: First, install the package yarn add fast-gateway Next, define the ports that will be used. import * as express from 'express' import * as gateway from 'fast-gateway' const portGateway = 5000 const portService1 = 5001 const portService2 = 5002 Define service 1 as follows: const startService1 = (): void => { const app = express () app . get ( '/list' , ( req , res ) => { const items = [ { id: 1 , name: 'service 1 value 1' , }, { id: 2 , name: 'service 1 value 2' , }, ] re
Read more

Deploying a NodeJS Server on Google Kubernetes Engine

Image
Introduction to GKE Google Kubernetes Engine (GKE) is a managed Kubernetes service provided by Google Cloud Platform , facilitating simple and efficient deployment of Docker images. We only need to provide some configuration for the number of nodes, machine types, and replicas to use. Some Concepts Cluster A Cluster is a collection of Nodes where Kubernetes can deploy applications. A cluster includes at least one Master Node and multiple Worker Nodes . The Master Node is used to manage the Worker Nodes . Node A Node is a server in the Kubernetes Cluster. Nodes can be physical servers or virtual machines. Each Node runs  Kubernetes , which is responsible for communication between the Master Node and Worker Node , as well as managing Pods and containers running on it. Pod A Pod is the smallest deployable unit in Kubernetes . Each Pod contains one or more containers, typically Docker containers. Containers in the same Pod share a network namespace, meaning they have the same
Read more

What is react-query? Why should we use react-query?

Image
Introduction You might have heard or seen others mention the react-query library quite often. Why should we use react-query when we can use useEffect to fetch data from an API ? This article will answer that question. What is react-query? react-query is a set of hooks for fetching, caching, and updating asynchronous data in React . Simply put, react-query is a library for fetching , caching , and updating asynchronous data when used in React . Why should we use react-query? Normally, there are many ways to fetch data from a server. Some popular methods include using useEffect and useState , or using a state management library like redux . export const Page = () => { const [ data , setData ] = useState (); useEffect (() => { const loadData = async () => { const response = await fetch ( hostAPI ). then ( response => response . json ()); setData ( response ) } loadData () }) return < DisplayData /> } This me
Read more