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

Popular posts from this blog

Kubernetes Practice Series

Docker Practice Series

NodeJS Practice Series

React Practice Series

Sitemap

Setting up Kubernetes Dashboard with Kind

Deploying a NodeJS Server on Google Kubernetes Engine

Create API Gateway with fast-gateway

Explaining Async/Await in JavaScript in 10 Minutes

A Handy Guide to Using Dynamic Import in JavaScript