DEV Community

chauhoangminhnguyen
chauhoangminhnguyen

Posted on • Originally published at howtodevez.blogspot.com

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.

NodeJS to GAE

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}`)
})
Enter fullscreen mode Exit fullscreen mode

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"]
}
Enter fullscreen mode Exit fullscreen mode

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"
  }
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.

Terminal

Web application

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}
Enter fullscreen mode Exit fullscreen mode

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

gcloud app services delete {serivce name}
Enter fullscreen mode Exit fullscreen mode

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.


If you found this content helpful, please visit the original article on my blog to support the author and explore more interesting content.

BlogspotBlogspotDev.toFacebookX


Some series you might find interesting:

Top comments (0)