Setting up Typscript env

PreviousDeveloping on a Windows 11 machine NextVS Code Extension

Last updated 8 months ago

Setting up Typscript env

You will need to install several vital tools to set up your Windows 11 PC to successfully develop your TypeScript and Next.js website. Here’s a step-by-step guide:

1. Install Node.js and npm

Node.js is required to run JavaScript/TypeScript outside of a browser. When you install Node.js, it comes with npm (Node Package Manager), which is used to install libraries and tools.

Visit .
Download and install the LTS version (as it’s more stable).
After installation, verify the installation by running the following commands in your terminal (Command Prompt or PowerShell):
```
node -v
npm -v
```

This will display the version of Node.js and npm, confirming they were installed successfully.

2. Install Git

You’ll likely need Git for version control and working with GitHub or other Git-based repositories.

Visit the to download and install Git.
During installation, choose the default options unless you need a specific configuration.
Verify the installation by running the following command:
```
git --version
```

3. Install Visual Studio Code (VS Code)

VS Code is a lightweight yet powerful code editor with excellent support for TypeScript, Next.js, and JavaScript.

After installation, open VS Code and install the following extensions to enhance your development experience:
- ESLint (for linting your code)
- Prettier (for code formatting)
- TypeScript (for TypeScript support)
- Next.js Snippets (for Next.js-specific code snippets)
- GitLens (for better Git integration)

4. Install Next.js

Next.js requires you to initialize a new project. First, you’ll need to install it using npm or yarn.

Open your terminal and run the following command to install Next.js with create-next-app:
```
npx create-next-app@latest
```
Follow the prompts to set up your Next.js app. This will automatically install all necessary dependencies.
Change into your project directory and start the development server:
```
cd your-project-name
npm run dev
```

Your Next.js app should now be running at http://localhost:3000.

5. Install TypeScript

Next.js supports TypeScript out of the box. However, you may need to install TypeScript if it’s not included:

Inside your project directory, run the following command to install TypeScript and the necessary type definitions:
```
npm install --save-dev typescript @types/react @types/node
```
Create a tsconfig.json file in the root directory of your project by running:
```
npx tsc --init
```

This command initializes the TypeScript configuration for your project.

6. Install Docker (Optional but Recommended)

If you plan to work with containers for local development or for deployment, you’ll need Docker:

After installation, verify Docker is running by running:
```
docker --version
```

7. Install GCP / AWS CLI

To interact with your GCP or AWS environment directly from your terminal, you’ll need their respective CLI tools:

For GCP:

Follow the instructions to install it on Windows.
Authenticate your SDK using:
```
gcloud init
```

For AWS:

Configure the CLI using your AWS credentials:
```
aws configure
```

You’ll be prompted to enter your Access Key ID, Secret Access Key, Region, and Output Format.

8. Install Stripe CLI (for payments)

To test and develop payment flows locally, Stripe provides a CLI tool:

After installation, authenticate it using your Stripe account by running:
```
stripe login
```
You can use the Stripe CLI to forward webhooks, test payments, and more:
```
stripe listen --forward-to localhost:3000/api/webhooks
```

9. Install Postman (Optional but Helpful for API Testing)

Postman is a powerful tool that lets you easily send requests and inspect responses when testing your APIs.

10. Install Linter and Formatter (ESLint and Prettier)

Ensure consistent code quality by setting up ESLint and Prettier:

Inside your Next.js project, install ESLint and Prettier:

npm install eslint prettier eslint-plugin-prettier eslint-config-prettier --save-dev

Create a .eslintrc.json file for your ESLint configuration and a .prettierrc file for Prettier. This helps enforce code quality and formatting throughout your project.

Final Checks:

Make sure all tools and configurations are working correctly by running a simple npm run dev command to start your Next.js app, and ensure it runs successfully in your browser.

By setting up these tools, you'll have a robust development environment on Windows 11 to develop your TypeScript and Next.js website successfully.