How to set up a simple Node.js and Typescript development environment

How to set up a simple Node.js and Typescript development environment

·

3 min read

For the last few months, I configured a Node.js development environment multiple times. And to save my and hopefully your time, I want to provide a set of clear instructions that you can use to configure a simple Node.js and Typescript development environment. Let's begin right away:

  1. Create a project folder and enter it

    # Run:
    mkdir app && cd app
    
  2. Initialize project:

    # Run:
    npm init -y
    # or
    yarn init -y
    
  3. Install required dependencies:

    # Run:
    npm install -D typescript ts-node-dev @types/node
    # or
    yarn add typescript ts-node-dev @types/node --dev
    
  4. Create Typescript config:

    # Run:
    touch tsconfig.json
    
    # Add this config to the file:
    {
    "compilerOptions": {
     "strict": true,                           
     "target": "es5",                        
     "outDir": "./dist", 
     "declaration": true,                   
     "skipLibCheck": true,                     
     "module": "commonjs",                     
     "esModuleInterop": true,            
     "resolveJsonModule": true,     
     "forceConsistentCasingInFileNames": true,
    }
    }
    
  5. (Optional) Initialize Git

    # Run:
    git init && touch .gitignore
    
    # Add this to the .gitignore:
    node_modules
    dist
    
  6. Create the initial project structure:

    # Run:
    mkdir src && touch src/index.ts && echo "console.log('Hello Typescript!')" > src/index.ts
    

    It will create the src folder with the index.ts file and console.log('Hello Typescript!') as the content.

  7. Replace scripts to the package.json:

    # ...
    
    "scripts": {
    "build": "tsc",
    "dev": "tsnd --respawn src",
    "start": "node dist/index.js"
    },
    # ...
    
  8. Run the project:

# To start the development environment run
npm run dev
# or
yarn dev

# To create the production build run
npm run build
# or
yarn build

# To start the production server run
npm run start
# or
yarn start

Now you are all set and have a good starting point to develop your environment as you go.

I hope it saved a little bit of time that you can spend working on your awesome project!

By the way, I have a short article about configuring the frontend: How to quickly wire up Next.js with Tailwind CSS and Typescript