CODEWITHSUNDEEP
node.jstypescriptwebpack
Plastikfan
Plastikfan

Reputation: 4012

How to setup a SERVER side Node.js project to use Typescript and Webpack

I'm looking for resources (youtube or other articles) that show how to setup a server side Node.js project using Typescript and Webpack. I have found too many articles that describe adding typescript to a client/browser side project. I do not need to know this because I'm using Angular. I would like to use webpack, because that's what's embedded inside an Angular project, so using the same technology on the server would seem to make sense from a learning point of view. I can't seem to find the information I need on Typescriptlang.org. I know how to create a node.js project, so I don't need a node.js beginner tutorial/resource. The key thing here is how to add Typescript and Webpack to a Node.js server project. Thanks.

Upvotes: 4

Views: 3334

Answers (2)

severin.julien
severin.julien

Reputation: 1354

It's not a lot different from the browser environnement configuration. First, you have to use the target option of Webpack to make your code compile for usage in a NodeJS environnement like so :

module.exports = {
    target: 'node'
};

Here's the documentation for this part : Webpack Targets

Also you have to make sure that you have @types/node installed.

A typical webpack configuration for this could be :

const path = require("path");

module.exports = {
    entry: "./src/index.ts",
    target: "node",
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, "build")
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/
            }
        ]
    },
    resolve: {
        extensions: [ ".tsx", ".ts", ".js" ]
    },
}

Here a small working project I've made as an exemple : node-typescript-boilerplate

I recommend using the nodemon plugin for webpack : nodemon-webpack-plugin, it will help you to auto restart your app after each change to your code source.

Upvotes: 5

Jorawar Singh
Jorawar Singh

Reputation: 7621

It can not be different from client side. You can use same kind of configuration in webpack in server side. Just gave it your entry point and it will resolve all dependencies and bundle for you and you can use ts-loader in webpack to compile your typescript to javascript

Upvotes: 1

Related Questions