Run Foreach Over and Over Again Js

At that place are and so many tutorials online most how to setup TypeScript with Node.js and Limited, merely I establish them all overly disruptive, incomplete and missing important features such as recompilation, reloading and final build steps.

Not merely this, they miss out vital explanations and gloss over details. This post is aimed to be a comprehensive "how-to" guide on setting upward your ain Node.js server written in TypeScript.

✅ tl:dr; Check the Node + TypeScript + Limited project on GitHub and then follow forth below!

We'll be using Limited to then send back some information which volition be more than enough to get yous started. Ready? Let's dive in!

Table of contents

• Project setup
• Initialize a new GitHub project
• Creating a parcel.json
• Installing TypeScript
  • Generating a tsconfig.json
• Project Dependencies
  • Product Dependencies
  • Development Dependencies
• NPM Scripts: Serve and Beginning
• Creating an index.ts file
• Adding Express.js
  • TypeScript to ES5
• Pushing to GitHub
• Deploying your Node.js app

Project setup

Offset, we'll need to setup our workspace, or project. I'll exist using VSCode, equally it's admittedly fantastic. You're welcome to utilise whatever you want.

Open up a new Concluding window in VSCode or iTerm/etc.

When y'all open up up your Concluding, use the cd <directory-proper noun> to move into the directory you wish to create the project inside.

For me, that's this command:

Now, we need to create the project binder:

                          mkdir              node-express-typescript                      

So cd into that project folder:

                          cd              node-express-typescript                      

Now we're set to go setup!

Initialize a new GitHub project

We'll exist using GitHub, if you don't wish to push the lawmaking to your GitHub account so skip this pace.

Go to GitHub and create a new repo. Mine volition be called node-limited-typescript and therefore located at github.com/ultimatecourses/node-express-typescript.

We're not going to clone the repo, we'll connect it subsequently afterward adding our files. Now time to create the bundle.json which will specify our project dependencies, and concur our npm scripts that nosotros'll run our TypeScript projection with!

Creating a package.json

Before we can get our Node, Limited and TypeScript project upwards and running, we need a package.json to so declare and enable the states to install the project dependencies.

Run the post-obit to initialize a new project:

This will and so walk you through a few steps, every bit we've already initialized a GitHub repository, we can use the URL during the installation to include it in our bundle.json for us.

I've detailed each step beneath in a # comment and then please re-create them accurately (using your own username/repo name):

                          # node-express-typescript              package name:              (limited-typescript)              # Merely press "Enter" as we don't need to worry about this selection              version:              (1.0.0)              # Node.js setup with Limited and TypeScript              description:              # dist/index.js              entry point:              (index.js)              # Simply press "Enter"              exam command:              # Enter the GitHub URL you created earlier              git repository:              (https://github.com/ultimatecourses/node-express-typescript)              # Just press "Enter"              keywords:              # Add your name              author: ultimatecourses              # I similar to specify the MIT license              license:              (ISC)              MIT                      

Once you've reached the last step it volition say:

Hit enter and you'll meet your new package.json file that should look something like this:

                          {                                          "name"              :                                          "node-limited-typescript"              ,                                          "version"              :                                          "i.0.0"              ,                                          "clarification"              :                                          "Node.js setup with Express and TypeScript"              ,                                          "main"              :                                          "dist/index.js"              ,                                          "scripts"              :                                          {                                          "examination"              :                                          "echo                            \"              Error: no exam specified              \"                              && exit 1"                                          },                                          "repository"              :                                          {                                          "type"              :                                          "git"              ,                                          "url"              :                                          "git+https://github.com/ultimatecourses/node-express-typescript.git"                                          },                                          "writer"              :                                          "ultimatecourses"              ,                                          "license"              :                                          "MIT"              ,                                          "bugs"              :                                          {                                          "url"              :                                          "https://github.com/ultimatecourses/node-express-typescript/issues"                                          },                                          "homepage"              :                                          "https://github.com/ultimatecourses/node-limited-typescript#readme"                                          }                                                  

Installing TypeScript

Side by side up, run the following to install TypeScript as a local project dependency:

With TypeScript installed locally, not globally, you should come across this added to your package.json:

                          {                                          //...                                          "dependencies"              :                                          {                                          "typescript"              :                                          "^iv.ane.iii"                                          }                                          }                                                  

✨ You'll likewise accept a new packet-lock.json file generated, which we'll desire to commit to Git presently. You don't need to do annihilation with this file.

Generating a tsconfig.json

To configure a TypeScript project, it'due south all-time to create a tsconfig.json to provide some sensible defaults and tweaks to tell the TypeScript compiler what to exercise. Otherwise, we tin pass in compiler options.

Typically, y'all would npm i -g typescript (the -g means global) which so allows us to run tsc to create a tsconfig.json. However, with npm we accept something called npx which the "ten" essentially means "execute".

This allows us to skip a global install and use tsc within the local projection to create a tsconfig.json.

If we did try to run tsc --init to create a tsconfig.json, nosotros'd see this error (because typescript would not be available globally, thus tsc also would be unavailable):

            ⛔ tsc : The term              'tsc'              is not recognized every bit the name of a cmdlet,              office, script file, or operable plan. Cheque the spelling of  the name, or              if              a path was included, verify that the path is right and try again. At line:1 char:1 + tsc              --init              + ~~~     + CategoryInfo          : ObjectNotFound:              (tsc:String)              [], CommandNotFoundException     + FullyQualifiedErrorId : CommandNotFoundException                      

This is where npx comes into play to execute the local version of our typescript install, let's run the following:

And y'all should encounter something like this:

            bulletin TS6071: Successfully created a tsconfig.json file.                      

At present checkout your tsconfig.json file. Yep, it looks a fiddling overwhelming as in that location are lots of comments in at that place, only don't worry well-nigh them too much, there are some keen sensible defaults that yous tin simply get out as they are.

However, we're going to brand a quick tweak. Find the outDir line:

Uncomment it and change information technology to:

🚀 This dist folder will contain our compiled lawmaking, just JavaScript, which will and then be served up by Node.js when we run our app. Nosotros write our code with TypeScript, recompile and serve the dist directory as the final output. That'southward information technology!

If yous clean up all the comments and remove unused options, you'll end upward with a tsconfig.json like this:

                          {                                          "compilerOptions"              :                                          {                                          "target"              :                                          "es5"              ,                                          "module"              :                                          "commonjs"              ,                                          "outDir"              :                                          "dist"              ,                                          "strict"              :                                          true              ,                                          "esModuleInterop"              :                                          truthful              ,                                          "skipLibCheck"              :                                          true              ,                                          "forceConsistentCasingInFileNames"              :                                          true                                          }                                          }                                                  

Project Dependencies

As we're going to create a Node.js application with Limited, we'll need to install a few $.25 and pieces.

Production Dependencies

Here's what we can run next:

            npm i trunk-parser cross-env dotenv express helmet rimraf                      

Here are some further details on each of those:

• body-parser extracts the entire body of an incoming request stream (for Express) and exposes it on req.trunk equally something easier to work with, typically using JSON.
• cross-env sets environs variables without u.s. having to worry near the platform.
• dot-env loads in .env variables into process.env so we tin can admission them inside our *.ts files.
• express is a framework for edifice APIs, such as handling GET, Postal service, PUT, DELETE requests with ease and building your awarding effectually it. It'southward simple and extremely commonly used.
• helmet adds some sensible default security Headers to your app.
• rimraf is essentially a cross-platform rm -rf for Node.js and so we tin delete older copies of our dist directory earlier recompiling a new dist

Well-nigh of these packages ship with blazon definitions for TypeScript, and so we tin start using them right away. For annihilation else, their blazon definitions can usually be plant on Definitely Typed.

Let'southward install the types for the packages that don't send with them be default:

            npm i @types/body-parser @types/limited @types/node                      

You'll observe I've thrown in @types/node, which are type definitions for Node.js.

🎉 Download it free!

Prepare to go beyond ForEach? Get confident with advanced methods - Reduce, Find, Filter, Every, Some and Map.

✅ Success! Cheque your electronic mail, savour.

As an actress bonus, we'll likewise ship you some actress goodies across a few extra emails.

Development Dependencies

As nosotros demand to develop our Node.js and TypeScript app locally, nosotros'll want to use nodemon to monitor changes to our files. Similarly, as nosotros want to sentry our TypeScript lawmaking for changes, we'll install concurrently. This allows united states to run multiple commands at the aforementioned time (tsc --sentinel and nodemon).

Don't worry, this is the final install, which using --save-dev volition save to the devDependencies prop inside our package.json (instead of just dependencies like a regular npm i <packet>):

            npm i              --salvage-dev              meantime nodemon                      

Nosotros should then end up with a nice package.json that looks like and so:

                          {                                          "proper name"              :                                          "node-limited-typescript"              ,                                          "version"              :                                          "ane.0.0"              ,                                          "description"              :                                          "Node.js setup with Express and TypeScript"              ,                                          "primary"              :                                          "dist/index.js"              ,                                          "scripts"              :                                          {                                          "examination"              :                                          "echo                            \"              Error: no test specified              \"                              && exit 1"                                          },                                          "repository"              :                                          {                                          "type"              :                                          "git"              ,                                          "url"              :                                          "git+https://github.com/ultimatecourses/node-limited-typescript.git"                                          },                                          "writer"              :                                          "ultimatecourses"              ,                                          "license"              :                                          "MIT"              ,                                          "bugs"              :                                          {                                          "url"              :                                          "https://github.com/ultimatecourses/node-express-typescript/issues"                                          },                                          "homepage"              :                                          "https://github.com/ultimatecourses/node-express-typescript#readme"              ,                                          "dependencies"              :                                          {                                          "@types/body-parser"              :                                          "^1.19.0"              ,                                          "@types/express"              :                                          "^4.17.11"              ,                                          "@types/node"              :                                          "^14.14.22"              ,                                          "body-parser"              :                                          "^1.19.0"              ,                                          "cross-env"              :                                          "^vii.0.three"              ,                                          "dotenv"              :                                          "^8.2.0"              ,                                          "express"              :                                          "^iv.17.one"              ,                                          "helmet"              :                                          "^4.4.1"              ,                                          "rimraf"              :                                          "^3.0.two"              ,                                          "typescript"              :                                          "^4.i.three"                                          },                                          "devDependencies"              :                                          {                                          "concurrently"              :                                          "^5.iii.0"              ,                                          "nodemon"              :                                          "^2.0.seven"                                          }                                          }                                                  

You'll discover your parcel-lock.json file will also exist updated too, we'll commit this to GitHub before long too.

NPM Scripts: Serve and Start

Now time to get our project running locally via localhost, and then we'll talk nearly how it volition "run" on a real server when we deploy the application.

Before we can do that, I've already created the commands (npm scripts) that we'll need to run to get everything running locally for evolution and also built for product.

Accommodate your "scripts" holding to look like this:

                          "scripts"              :                                          {                                          "build"              :                                          "rimraf dist && tsc"              ,                                          "preserve"              :                                          "npm run build"              ,                                          "serve"              :                                          "cantankerous-env NODE_ENV=development concurrently                            \"              tsc --watch              \"                                          \"              nodemon -q dist/index.js              \"              "              ,                                          "prestart"              :                                          "npm run build"              ,                                          "start"              :                                          "cross-env NODE_ENV=production node dist/index.js"              ,                                          "test"              :                                          "echo                            \"              Error: no test specified              \"                              && exit i"                                          }              ,                                                  

Let's walk through these commands in detail, and then you can understand what's going on:

• "build" is used in a few places so let'southward start hither. When we npm run build our rimraf package will delete our existing dist binder, ensuring no previous files exist. Then, we run tsc to build our projection, which as nosotros know is compiled into dist (remember we specified this in our tsconfig.json). i.e. deletes the old code and replaces it with the new code.

• "preserve" but calls our "build" command to make clean up whatever existing dist folders and recompiles via tsc. This gets called earlier the "serve" command, when we run npm run serve (which we'll use to develop on localhost).

• "serve" uses our cross-env packet to set up the NODE_ENV to development, and then we know we're in dev fashion. We can and so access process.env.NODE_ENV anywhere inside our .ts files should nosotros need to. And so, using meantime we're running tsc --watch (TypeScript Compiler in "sentry way") which will rebuild whenever we change a file. When that happens, our TypeScript code is outputted in out dist directory (retrieve we specified this in our tsconfig.json). Once that'south recompiled, nodemon will encounter the changes and reload dist/index.js, our entry-point to the app. This gives u.s.a. total live recompilation upon every alter to a .ts file.

• "prestart" runs the same task as "preserve" and will clean up our dist, then use tsc to compile a new dist. This happens before the "commencement" is kicked off, which we run via npm start.

• "offset" uses cantankerous-env again and sets the NODE_ENV to production, so nosotros can detect/enable any "production style" features in our lawmaking. It then uses node dist/index.js to run our projection, which is already compiled in the "prestart" hook. All our "starting time" control does is execute the already-compiled TypeScript code.

• "test" pffft. What tests.

Information technology's a lot to take in, read it a few times if y'all demand to, merely that's about it.

At present we know this, let's create some files and get things up and running.

Creating an alphabetize.ts file

Otherwise known every bit our "entry-bespeak" to the application, nosotros'll exist using index.ts.

📢 You can use another filename if yous similar, such every bit app.ts, notwithstanding index.ts is a naming convention I prefer as information technology is too the default export for a folder. For case importing /src would be the same as importing /src/alphabetize. This cleans things upwards and can neatly adapt code in larger codebases, in my opinion.

Now, in the root of the project, create a src folder (or use mkdir src) and then create an alphabetize.ts with this inside (so y'all have src/index.ts):

                          panel              .              log              (              '              Hello TypeScript              '              );                      

Set to compile and run TypeScript? Let's become!

You should run into some output similar this (notice preserve, build, serve are executed in the specific gild):

                          >              [email protected] preserve              >              npm run build              >              [email protected] build              >              rimraf dist              &&              tsc              >              [email protected] serve              >              cross-env              NODE_ENV              =evolution concurrently              "tsc --watch"              "nodemon -q dist/index.js"              [0] Starting compilation              in              sentinel mode...              [ane] Howdy TypeScript                      

Smash! We've done it. It seems a lot to get going, but I've wanted to show you how to practice this from scratch. There's nothing more than for us to "setup" now, we can get coding and both our local development and deployed application are ready to whorl.

Now, change console.log('Hi TypeScript') to console.log('Hello JavaScript') and you'll see things recompile:

                          [0] File alter detected. Starting incremental compilation...              [0] Found 0 errors. Watching              for              file changes.              [1] Hullo JavaScript                      

Mission success. We've now setup a local development environment that'll recompile everytime nosotros save a *.ts file and then nodemon will restart our dist/index.js file.

Adding Limited.js

Let's get Limited setup and a server listening on a port.

We've actually got everything installed already, including any @types nosotros might need. Meliorate your index.ts to include the following to test out your new Express server:

                          import              limited              ,              {              Express              ,              Request              ,              Response              }              from              '              express              '              ;              import              bodyParser              from              '              body-parser              '              ;              import              helmet              from              '              helmet              '              ;              import              dotenv              from              '              dotenv              '              ;              dotenv              .              config              ();              const              PORT              =              process              .              env              .              PORT              ||              3000              ;              const              app              :              Express              =              express              ();              app              .              use              (              helmet              ());              app              .              utilize              (              bodyParser              .              json              ());              app              .              use              (              bodyParser              .              urlencoded              ({              extended              :              truthful              }));              app              .              become              (              '              /              '              ,              (              req              :              Request              ,              res              :              Response              )              =>              {              res              .              send              (              '              <h1>Hello from the TypeScript world!</h1>              '              );              });              app              .              heed              (              PORT              ,              ()              =>              console              .              log              (              `Running on                            ${              PORT              }                              ⚡`              ));                      

Now visit localhost:3000 in your browser and you lot should run into the text Howdy from the TypeScript earth!.

This is because we've setup an app.get('/') with Express to return usa some basic HTML.

TypeScript to ES5

Within our tsconfig we've set the compiler option "target": "es5", so if you actually leap into your dist/index.js file, you lot'll encounter the "transpiled" code, which is then fully compatible with near Node.js environments.

🎉 Download it complimentary!

Fix to get beyond ForEach? Get confident with advanced methods - Reduce, Observe, Filter, Every, Some and Map.

✅ Success! Bank check your email, enjoy.

As an extra bonus, we'll likewise send you some actress goodies beyond a few extra emails.

This is why using TypeScript is a great choice, as we can employ many modern features that aren't bachelor simply yet on Node.js environments (and even in browsers, TypeScript isn't but for Node.js).

Here's the code that tsc creates from our index.ts file, this is known as "emitting" in TypeScript talk:

                          "              apply strict              "              ;              var              __importDefault              =              (              this              &&              this              .              __importDefault              )              ||              function              (              mod              )              {              render              (              mod              &&              modern              .              __esModule              )              ?              modernistic              :              {              "              default              "              :              mod              };              };              Object              .              defineProperty              (              exports              ,              "              __esModule              "              ,              {              value              :              true              });              var              express_1              =              __importDefault              (              crave              (              "              express              "              ));              var              body_parser_1              =              __importDefault              (              require              (              "              body-parser              "              ));              var              helmet_1              =              __importDefault              (              require              (              "              helmet              "              ));              var              dotenv_1              =              __importDefault              (              require              (              "              dotenv              "              ));              dotenv_1              .              default              .              config              ();              var              PORT              =              process              .              env              .              PORT              ||              3000              ;              var              app              =              express_1              .              default              ();              app              .              use              (              helmet_1              .              default              ());              app              .              use              (              body_parser_1              .              default              .              json              ());              app              .              apply              (              body_parser_1              .              default              .              urlencoded              ({              extended              :              true              }));              app              .              get              (              '              /              '              ,              function              (              req              ,              res              )              {              res              .              ship              (              '              <h1>How-do-you-do from the TypeScript earth!</h1>              '              );              });              app              .              listen              (              PORT              ,              role              ()              {              render              panel              .              log              (              "              Running on                            "              +              PORT              +              "                                          \              u26A1              "              );              });                      

Information technology'south pretty similar, but you'll notice information technology's just ES5 which can run pretty much everywhere with no bug.

One of my biggest gripes with Node.js (especially with Serverless Lambda functions) is having to apply the CommonJS require('module-name') syntax and lack of import/export keywords, which you'll meet our ES5 version "backports". Significant, nosotros go to write shiny new TypeScript, a superset of JavaScript, without having to worry too much about different environments.

At present you're ready to become started with your Node.js and TypeScript development. Become build and I'd dearest to hear on Twitter how you become on, requite me a follow and check out my TypeScript courses if yous oasis't already.

Though, we're not done just yet… Nosotros still need to push our final project to GitHub.

Pushing to GitHub

In the projection root, create a .gitignore file (with the dot prefix) and add the following values like so (then save and exit the file):

A .gitignore file will stop us pushing those folders, and their containing files, to GitHub. Nosotros don't want to push our huge node_modules folder, that'due south pretty bad practise and defeats the purpose of dependencies.

Similarly, we don't want to push our compiled dist directory.

With Node.js development you lot'll also likely use a .env file as well, and then I've included that as a default too (even though we're non using i here).

👻 The .env file is used to proceed secrets such as API keys and more, then never push these to version control! Ready the .env locally then mirror the variables on your production environment too.

Now time to commit our lawmaking to GitHub!

Run each of these (line by line):

            git init git add              .              git commit              -k              "Initial commit"              git branch              -Chiliad              master git remote add origin https://github.com/ultimatecourses/node-limited-typescript.git git push button              -u              origin main                      

At present caput over to your Node + TypeScript + Limited GitHub project and check out your finished masterpiece.

🙌 If you want to learn even more, I've congenital a bunch of TypeScript Courses which might merely assist yous level upward your TypeScript skills even further. You should also subscribe to our Newsletter!

Deploying your Node.js app

Once yous've congenital out your awarding you tin simply push information technology to a service. I similar to use something like Heroku, where upon each commit to the GitHub repo it volition automatically deploy a new version.

Call back, all yous need is to take your production surroundings run npm start, and the project will build and execute the ES5 lawmaking. And that's it! Yous're fully setup and ready to go.

I hope y'all learned tonnes in this article, it was certainly fun breaking it all downwardly for you.

Happy TypeScripting!

rosenbergmoodderge.blogspot.com

Source: https://ultimatecourses.com/blog/setup-typescript-nodejs-express

Share this post