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.
1
-
You can find some boilerplate projects such as github.com/jsecademy/webpack-express-typescript which do all the hard work for you. If you are insterested to do it by yourself you can even take projects like this as an example, see what they actually do and try to do yourself, looking at docs.Jose Hermosilla Rodrigo– Jose Hermosilla Rodrigo2017-10-23 18:28:38 +00:00Commented Oct 23, 2017 at 18:28
Add a comment
|
2 Answers
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.
2 Comments
Plastikfan
Thanks Sapher, I think this serves as a good starting point. Probably not as complex as I thought it was going to be, cheers
severin.julien
@Zephilim Mind you that it took a lot of times to figure this out :) and was amaze by the lack of documentation about that. You should take a look at this link too : github.com/liady/webpack-node-externals.
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
2 Comments
Plastikfan
Sorry, Jorawar, I don't understand your statement!?? I just want to learn how to setup a server side Node project to use WP & TS.
Jorawar Singh
In your server side project you can make a webpack.config.js file which will take care of transpiling ts to js and bundling. It works exactly same as it works in client side. Try to set a simple nodejs project with one ts file which says hello world and transpile it using webpack and you will se bundled js file which you can execute by using node filename.