DEV Community: Xavier577

Setting up a vanilla Typescript project the right way

Xavier577 — Mon, 04 Oct 2021 13:48:38 +0000

Are you new learning typescript or you are an experienced typescript developer? chances are you have the urge to use it in any and every project rather than using plain javascript maybe because it gives you that sense of security. If by any chance you haven't heard about typescript or have heard of it but never tried it (which i doubt is possible lol) ,Typescript is superset of Javascript which means it is essentially javascript with more features. Typescript is optionally statically typed which means you have to option to write code which has type checking during compile time. I am not gonna talk to much about that here, this is eslam's article on typescript and also the offical doc if you want to learn more about it.

A problem to be solved

Typescript is awesome no doubt but sometimes using it with just plain html and css was hassle for me . Running the tsc command every five minutes to see my changes was really annoying . I even tried tsc --watch, this worked for a while but presented me with a problem, it would compile every typecript file i create into their separate javascript counterpart. And using custom modules became a problem. I began to wonder if there was a way to compile all my typescript code including modules into a single javascript bundle. I made my research and I discover there was a way.

The solution

After searching through google and eventually youtube, I realize that there weren't many articles or video to solve this problem, could it be that most people only use typescript in frameworks such as React or Angular and never use it with plain html or css? who knows. I eventually found a way thanks to codingEnterpreneurs youtube channel. He did a variation of this in his youtube channel on his learn typescript playlist you can checkout his playlist here. Subscribe to his channel if you find his content interesting (I am not an affiliate or anything I just value good content, although I wish I were I wouldn't be broke all the time lol). With that said , this was one of the few solutions I found which is what inspired me to write this article. Without wasting any more time let's get to it!

Getting started with the project

Before we anything we need the following for this to work:

nodejs
npm
git
typescript
webpack and webpack-cli
ts-loader

Now let's Go!

In your projects root directory:

npm init -y

This will create a package.json file.

initialize git with:

 git init

create .gitignore file (so we can ignore the node modules folder that will be created when we install our dependencies)

in the .gitignore file add:

node_modules

Installing the required dependencies

Install webpack and webpack-cli

npm install webpack webpack-cli

Install typescript and ts-loader

npm install typescript ts-loader

You should now see all our installed dependencies in the package.json file under the dependencies property

Now we will create two folders:

public
src

In public, we will create our index.html, static folder and our assets folder index.html is our html file (obviously lol) assets folder will contain files such as images,svgs, videos and so on static folder will contain two additional folders:

css => this would contain our styles
bundle => this would be the destination of our compiled typescript code by webpack

In src, create index.ts files and tsconfig.json

Add this to tsconfig.json:

{ "compilerOptions": { "target": "es5", "module": "ESNEXT", "rootDir": "./", "strict": true, "moduleResolution": "node", "allowSyntheticDefaultImports": true, "esModuleInterop": true, "skipLibCheck": true, "forceConsistentCasingInFileNames": true } }

In the root directory, create webpack.config.js files and add this to the file:

const path = require("path"); module.exports = { mode: "production", entry: path.resolve(dirname, "./src/index.ts"), module: { rules: [ { test: /.ts?$/, use: "ts-loader", exclude: /node_modules/, }, ], }, resolve: { extensions: [ ".ts", ".js"], }, output: { filename: "script.js", path: path.resolve(dirname, "public", "static", "bundle"), }, };

what does this file do? well it essential gives webpack information such as what file to compile and what folder to compile to. For instance, the entry property above tells webpack what file we are compiling which is index.ts in src which we created earlier (note we used the path module to resolve the path to the index.ts file no pun intended). filename in the output property tells webpack what to name the compiled javascript bundle and path tells webpack where to place the javascript bundle which we have set to ./public/static/bundle (again we used the path module to resolve the path).You can change the name of the bundles output file to whatever you want just rember to point your html to that javascript bundle in your script tag.

open up the package.json file and under scripts Add the start and build script shown below

that wraps up everything with the configs

We are almost there

In our html let up set up our boilerplate and include our css and our bundled javascript (script.js which we named it in the webpack config this is important!!!)

now in css (in the static folder) create style.css so we can add some styles

Running your html

if you are like me and you are using vscode there is a 95% chance you have liveserver extension installed run the html with liveserver or if you don't just open it in your browser. You should see this page:

Open your terminal/command prompt

(assuming you are in the projects the root directory) npm start

This should run the start script that we set to webpack --watch earlier. This compiles our index.ts and recompiles automatically on every change to index.ts . If everything was configured properly this should show up in your terminal.
and our script.js file should be generated in bundle

now that we are done with all the boring stuff let's write some typescript in index.ts webpack automatically recompiles our code and the change should take effect in the browser because of liveserver. we should see this:

now let's code up the logic for the counter example.

First we need to select the required html elements
- our span tag with id counter-value
- our button with id increment-btn
- our button with id decrement-btn
Next we create a new file in src called helpers which will contain two files
- increment.ts which will contain our increment function which we will export
- decrement.ts which will contain our decrement function which we will also export
then will import these two functions in index.ts
Finally the complete snippet

Increment count

Decrement count

Summary

Now that we have everything is working fine it might appear like magic or maybe not but either way it is not magic. What essentially is happening is like I said before webpack would bundle all our typescript code including including all modules into a single file which we named script.js. The compiled code looks like this:
looks kinda ugly right? well this what is being run in the browser and we make changes in our typescript code webpack will recompile into the file which will trigger liveserver to reload, showing how changes automatically in the browser. This is a very simple example so you might node see the benefits straight away but in bigger projects relative to this were you don't want to use a framework this in my oppinon can be really helpful.

Conclusion

Setting this up might seen like a hassle but using typescript with plain html and css has a lot advantages than with plain Javascript for example type checking, and also enables us to split out code into modules which makes everything much cleaner and easier to debug and much more. If you don't want to bother yourself with setting this up yourself you can make your own vanilla typescript project from this boilerplate I set up so you don't have to set it up yourself.

A little bit about me the Author

If you have read this article to the end, I want you to know that i really appreciate it. My name is Joseph Tsegen, I have training to become a programmer now for 7 months now learning about the web and other technologies. I am aspiring to become a fullstack developer on the path to learn the GNERPT (Graphql Node Express React Postgresql Typescript), I also have interest in Python, Django and Kotlin. I am new to the community here on hashnode, this is in fact my first article please give it a like if you found it interesting or useful and comment on what you think about it and also what you think about building projects with this approach without any framework and what kind of projects you use this for. Feedbacks will be very helpful as it will help access myself and make better content, all feedbacks would be very appreciated. Let me know what you think I could have done better, thank you for reading.

Setting up a nodejs project with typescript and deploying to heroku

Xavier577 — Mon, 04 Oct 2021 13:39:47 +0000

Setting up nodejs with typescript can be quite troublesome if not done properly. To make this worse you probably won't see the issue with the way you set your project up until you want to deploy it. Today we are gonna go over how exactly we can set up nodejs with typescript in a way that would make deployment easy.

Getting started

For this tutorial we are gonna be using the following packages:

yarn
nodejs
typescript
ts-node
express
nodemon
@types/node (type definitions for nodejs)
@types/express (type definition for typescript)

Initializing the project

we are going to initialize the project with yarn and git

yarn init -y

git init

we should have our package.json file create for us like so

Installing the dependencies for the project

To make our lives easier let's install express

yarn add express

Installing typescript and ts-node as dev dependencies

yarn add -D typescript ts-node

installing the type definition for node and express

yarn add -D @types/node @types/express

and finally nodemon to run our server in development

 yarn add -D nodemon

After installing our dependencies it should be included in the package.json file

And our node_modules folder must have been created

Let's create a .gitignore file and add our node_modules in there to prevent it from being tracked by git

// (in .gitignore) node_modules

Adding the scripts

add the following to your package.json file

 "scripts": { "start": "node dist/index.js", "build": "tsc", "dev": "nodemon --exec ts-node ./src/index.ts --mode development" }

our package.json should look like this

Explaination for the script

The build script is responsible for making our javascript build of the project for deployment (it would build all our files into a dist folder with the tsc command which we would set up in a second)
start is what would run the app when we deploy it to service such as heroku
dev is to run our app in development

Generating our tsconfig file

Normally we would run tsc --init to create our tsconfig.json file but in this tutorial i would use a library created by one of my favourite youtubers (Ben Awad) called tsconfig.json. To use the package we'll run: npx tsconfig.json I'll select nodejs and that should create a tsconfig for us. so it contains some set rule for our project, feel free to change whatever you like to your liking but the most important options here are "outDir" which tells the typescript compiler where to compile our javascript file, "excludes" which tells typescript what files to ignore, "include" tells typescript what files to check during compilation, "target" the version of javascript we are compiling to (which Ben has set to es2017) and "module" which tells typescript what module syntax should be used.
The "outDir" has been set to dist but you can name it whatever you want (but remember to change that in the package.json file) but by convention it is usually best practise to call it dist or build.
we are gonna want to include the dist folder to the .gitignore file as this folder is only needed during deployment .

Creating our source folder

First we are gonna want to create a folder called "src", this is where we would write all our typescript code

I'll create a file called index.ts which would be our main input

Now let's write some code

Here we are importing express, setting the a new express application to the variable app. We set the PORT variable to use the process environment port if available and 8080 otherwise then we listen then PORT variable. And we handle our get request with the app.get() method by sending to the client "hello" + client hostname(which is localhost in this case)

now let's run our server

now let's run it in the browser

Let's make a change

That threw an error because in the tsconfig.json the "noUnusedParameters" property is set to true which prevent the unused parameters in the code (which is some best practice stuff :( ).

To remove the error you can either disable the rule by setting "noUnUsedParameters" to false in the tsconfig.json file or simply use the editor quick fix option which I am gonna use.

That was fixed by placing an underscore on the unused parameter, now let's restart the server

It works yay!

Deploying our app to heroku

Now let's see how exactly we can deploy our app which is the part which cause alot of issues especially when unusing typescript with nodejs.

first i am gonna run the build command so that we can see how our app would be built.

we'll run:

yarn run build

This should create a folder dist which contains our compiled code

This is gonna be what would be run on heroku when we deploy

I am gonna delete this file for now.

Assuming we did everything correctly up until this point, i am gonna list the step for deploying this add to heroku via the heroku-cli. If you don't have installed you can install it with npm install -g heroku

Logging in to heroku
Adding changes to git
```
git add . 
```
Committing changes

git commit -am "deploy"

Adding heroku remote

Pushing to heroku

git push heroku master

Deployed site 🚀🚀🚀

yay! we have our site deployed.

Conclusion

This is just a very basic example but the main purpose of this guide was to help give an idea on how you can host/deploy a nodejs typescript project of any sort. You can change the rules in the tsconfig.json file to match your use case but make sure the "outDir" is correctly specified. I have had issues deploying typescript nodejs projects myself but now I feel a little more confident doing it now so I decided to share it with the community. I hope this was able to help out in someway. Lemme know if there are better ways to do this. Please do like and comment if you found this interesting.

DEV Community: Xavier577

Setting up a vanilla Typescript project the right way

A problem to be solved

The solution

Getting started with the project

Installing the required dependencies

Running your html

Increment count

Decrement count

Summary

Conclusion

A little bit about me the Author

Setting up a nodejs project with typescript and deploying to heroku

Getting started

Initializing the project

Installing the dependencies for the project

Adding the scripts

Explaination for the script

Generating our tsconfig file

Creating our source folder

Now let's write some code

now let's run our server

now let's run it in the browser

Let's make a change

Deploying our app to heroku

Logging in to heroku

Adding changes to git

Committing changes

Adding heroku remote

Pushing to heroku

Deployed site 🚀🚀🚀

Conclusion