{"id":553,"date":"2021-04-06T21:47:35","date_gmt":"2021-04-06T19:47:35","guid":{"rendered":"https:\/\/fileidea.com\/?p=553"},"modified":"2021-04-24T14:15:05","modified_gmt":"2021-04-24T12:15:05","slug":"create-a-nodejs-backend-app-that-use-express-with-typescript","status":"publish","type":"post","link":"https:\/\/fileidea.com\/2021\/04\/06\/create-a-nodejs-backend-app-that-use-express-with-typescript\/","title":{"rendered":"Create a nodejs backend app that use Express with Typescript"},"content":{"rendered":"\n

I am going to set up a nodejs backend app that use express with typescript. In other words, create a REST API in nodejs that uses TypeScript with the help of the express framework. For the database I am going to go with MySQL. With a backend like this you can easily have axios or similar in your frontend app to communicate with the backend application. This is a simple tutorial on how to do this, very similar to my other post about Creating a simple Angular 10 App with Nodejs Back-End using MySQL<\/a> although this time, we are using Typescript for express which is little bit different.<\/p>\n\n\n\n

For reference, I am using Visual Code and nodejs version 12.14.0. Always a good idea to keep nodejs updated or otherwise it can be tricky trying to use various packages and modules or even when deploying to Google Cloud for example. Download or update nodejs if you don’t have it at nodejs.org<\/a>.<\/p>\n\n\n\n

Create a new project<\/strong>
Alright so let us get started by creating a new project that uses express with typescript from scratch. First create a folder<\/strong> that the project is going to be in<\/strong>, I will call my project FileIdeaNews <\/strong>since this going to be just a plain app where you can write news. <\/p>\n\n\n\n

Open up your folder in Visual Code and then open up your terminal<\/strong> and type:<\/p>\n\n\n

\nnpx express-generator-typescript "Backend"\n<\/pre><\/div>\n\n\n
When we run this command we get the complete skeleton structure of express with typescript all ready for us to continue working on in a new folder we called Backend! That is pretty powerful and a simple way to get started quick. If you goal is to just set up the express with typescript you are already done here, but if you want to see how you can use the express framework with MySQL, tag along.<\/p>\n\n\n\n
We should then get a folder with a bunch of things in it.<\/p>\n\n\n\n
\"\"
The console from Visual Code<\/figcaption><\/figure>\n\n\n\n
Then use the cd command <\/strong>to go into the Backend <\/strong>folder in the terminal.<\/p>\n\n\n\n
To be sure everything we need is installed run npm install:<\/p>\n\n\n
\nnpm i\n<\/pre><\/div>\n\n\n
As a bonus we got nodemon <\/strong>applied to our nodejs project as well. So let us try out our back-end app by running nodemon like this in the terminal at the same location:<\/p>\n\n\n
\nnodemon\n<\/pre><\/div>\n\n\n
Let us take a look at the result by visiting localhost:3000<\/strong>.<\/p>\n\n\n\n
\"\"
The code we have from the generation<\/figcaption><\/figure>\n\n\n\n
There we go! We even have some UI to play around with as well. We can add and remove users, everything here is handled in our file under daos\/MockDb.json which we read, write and delete JSON data from. <\/p>\n\n\n\n
To make things more simple and try things out in our own way let us not focus on these daos structure that is already made. Since we want to use MySQL we want to do things little bit different and set up our own route we work with. First off <\/p>\n\n\n\n
Create a new route
<\/strong>Under the routes folder create a new file called Posts.ts<\/strong> similar to how it is made for Users.ts<\/strong>. In our route file we will then create a getAllPosts <\/strong>method. It will just return an empty array for now:<\/p>\n\n\n
\nimport { Request, Response } from 'express';\nimport { paramMissingError } from '@shared\/constants';\nimport { StatusCodes } from 'http-status-codes';\nconst { BAD_REQUEST, CREATED, OK } = StatusCodes;\n\nexport async function getAllPosts(req: Request, res: Response) {\n    return res.status(OK).json([]);\n}\n<\/pre><\/div>\n\n\n
You should be able to import the function by hovering the getAllPosts to import getAllPosts from our new .\/Posts<\/strong>.ts <\/strong>file. Let us proceed to make use of this new method and insert it into a new route.<\/p>\n\n\n\n
There is a lot of thing already made, but what is the fun in that? Let us create our own “posts” and remove all current routes from the index.ts file <\/strong>and add our own<\/strong> like this and rename userRouter <\/strong>to postRouter <\/strong>like this: <\/p>\n\n\n
\nimport { Router } from 'express';\nimport { getAllPosts } from '.\/Posts';\n\n\/\/ Posts-route\nconst postsRouter = Router();\npostsRouter.get('\/all', getAllPosts);\n\n\/\/ Export the base-router\nconst baseRouter = Router();\nbaseRouter.use('\/posts', postsRouter);\nexport default baseRouter;\n<\/pre><\/div>\n\n\n
We will also remove or comment out <\/strong>the front-end things we got inside the Server.ts<\/strong> file. We don’t want to handle any front-end things so let us just get rid of it. This is code we don’t want to use for our API:<\/p>\n\n\n
\n\/\/ const viewsDir = path.join(__dirname, 'views');\n\/\/ app.set('views', viewsDir);\n\/\/ const staticDir = path.join(__dirname, 'public');\n\/\/ app.use(express.static(staticDir));\n\/\/ app.get('*', (req: Request, res: Response) => {\n\/\/     res.sendFile('index.html', {root: viewsDir});\n\/\/ });\n<\/pre><\/div>\n\n\n
Okay so now we are now using \/posts<\/strong> for all the our routes, and we already defined one route which is to \/all<\/strong>. If we take a look at the Server.ts <\/strong>file we can see that our baseRouter<\/strong> are passed onto app.use which means that all our routes are under the\/api\/<\/strong> URL. If we go to localhost:3000\/api\/posts\/all<\/strong> we will then run the method getAllPosts<\/strong> and see the empty array from our newly created method.<\/p>\n\n\n\n
\"\"
Result by visiting our new all route<\/figcaption><\/figure>\n\n\n\n
So we just made our first API method ready to be used under api\/posts\/all<\/strong>! We don’t have any data though so it isn’t that interesting to just get “[]” so let us add the possibility to get data through MySQL. To keep it clean and structured we will create a new typescript file<\/strong> which will work as the service that hold all the methods for communicating with our MySQL database. First of all, let us see that we actually can work with MySQL.<\/p>\n\n\n\n
Set up a simple MySQL database<\/h3>\n\n\n\n
For us to store data we need a MySQL database.  If you don’t have MySQL installed on your computer. fear not, what I usually do is install XAMPP<\/a> which comes with apache and MySQL. What is good is that when getting MySQL you also get the phpmyadmin where you can easily manage and create databases. So that is what we will do, install XAMPP if you haven’t. Click the Admin <\/strong>button on XAMPP when having Apache and MySQL activated (they should be green).<\/p>\n\n\n\n
Default user and password when installing phpmyadmin on your local computer is this:
host<\/strong>: localhost
user<\/strong>: root
password<\/strong>: (empty)<\/p>\n\n\n\n
Create a new database<\/strong> or use one you already have. Mine will be called FileIdeaNews<\/strong>. Proceed to create a new table called<\/strong> posts<\/strong>.<\/p>\n\n\n\n
\"\"
Creating a new table in phpmyadmin<\/figcaption><\/figure>\n\n\n\n
I’ll create these columns for my posts table. <\/p>\n\n\n\n