Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

How to deploy a TS Node.js project correctly and quickly

2025-03-30 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

Shulou(Shulou.com)06/03 Report--

This article focuses on "how to deploy a TS Node.js project correctly and quickly". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let the editor take you to learn how to deploy a TS Node.js project correctly and quickly.

As a full-stack developer, creating a project is very interesting, you can design architecture, brainstorm, and develop, but after the development is over, we have to deploy or release the application. So how to deploy a TS Node.js project correctly and quickly? today we will fix it.

Create a TS Node.js application

If you are already familiar with creating TS Node.js projects, you can skip directly to the "deploy and release applications" section

Initialize the Node.js project:

On our team, we like TS very much and use TS in all our new projects, so creating a TS project is not new.

Let's start with the basics:

Npm init initializes a Node.js project. Use the-y parameter to quickly skip step-by-step configuration.

Npm install express @ types/express installs express dependencies and types type files for express for TS development

Npm install typescript-save-dev installs typescript as a development dependency

Mkdir my-app & & cd my-appnpm init-ynpm install express @ types/express-- savenpm install typescript-- save-devTS configuration

Npx tsc-- init will create a default typescript profile, tsconfig.json

Declaration is used to specify whether to generate the corresponding * .d.ts file after compilation is completed. The default is false.

Outdir defines the directory compiled by TS. If there is no declaration, the default compiled file location will be in the same location as the ts source file.

Run command

Npx tsc-init

Modify the following configuration

CompilerOptions: {. "outDir": "dist", / / compiled output directory "declaration": true / / generate d.ts} create project entry file

Create a server.ts file

Import express from 'express'const app = express () const PORT = 3000app.use (express.json ()) app.get (' /', (req, res) = > {res.send ('Hello wordstones')}) app.listen (PORT, () = > {console.log (`Server is listening on port ${PORT} `)})

After completing the above steps, our file directory structure is as follows

.├── node_modules ├── package-lock.json ├── server.ts └── tsconfig.json compile TS

Our next step is to build and deploy our TS Node.js application, because in a production environment, instead of running the TS version, we run the compiled JS. Let's compile the project.

Modify the package.json file by adding the following command

Npm run tsc will compile our project according to our tsconfig.json configuration and output it to the specified directory

Npm run start:prod will run our compiled JS file

"scripts": {"tsc": "tsc", "start:prod": "node dist/server.js"}

Then test it locally.

Npm run tscnpm run start:prod# service started successfully, running port: 3000

Visit http://localhost:3000/ through the browser, and the visit is successful. Next, we deploy and publish our application.

Deploy release application

Here we mainly use two methods to distribute and deploy the compiled TS project to various environments.

The form of npm dependency package

Docker container mode

Form of NPM dependency package NPM lifecycle hook

Some special lifecycle hooks are triggered when the specified action is triggered. Here we will use the "prepare" hook, which will be triggered once before the npm publish command is issued to the NPM. So we can compile the TS application at this time.

Specify publish file

Through the "files" field, we can define which files should be included when publishing the NPM package. If you omit this attribute, it will default to ["*"] and all files will be uploaded.

The following is the modified package.json

"name": "my-app-xiaoshuai", / / the name we posted to NPM is "main": "dist/server.js", / / modify the entry file address "types": "dist/server.d.ts", / / specify the TS type file "files": ["dist", "package.json", "package-lock.json", "README.md"], "scripts": {"tsc": "tsc" "prepare": "npm run tsc" / / Edit typescript} npm publish

After modifying the package.json configuration, we run the npm publish command to publish our application to NPM

Npm publish

Output

After the release is successful, you can see that there is an extra my-app-xiaoshuai package on npmjs

Docker container mode

To publish our TS Node.js application as a container, we need to create the docker configuration file Dockerfile in the project root.

Let's write the Dockerfile file step by step.

Copy the compiled file into the container

Copy package.json and package-lock.json into the container

Install dependencies using npm install

Use node build/server.js to run our application

# Node version FROM node:14.18.0-alpineARG NODE_ENV=productionENV NODE_ENV $NODE_ENVCOPY. / dist/ distCOPY. / package.json / package.jsonCOPY. / package-lock.json / package-lock.jsonRUN NODE_ENV=$NODE_ENV npm installEXPOSE 3000CMD ["node", "dist/server.js"]

Now we can build the docker image in the root directory and run docker build-- tag my-app:test. Command

Docker build-- tag my-app:test.

After success, the output is as follows

Then we run the container and run our application using the docker run-p 3000 it my-app:test command, and we can see that the program runs successfully on port 3000

Docker run-p 3000 3000-it my-app:test# service started successfully, running port: 3000

Access to http://localhost:3000/ through the browser, the access is successful

At this point, I believe you have a deeper understanding of "how to deploy a TS Node.js project correctly and quickly". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report