> For the complete documentation index, see [llms.txt](https://docs.noestafacil.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.noestafacil.com/the-section-on-software-engineering/software-engineering/toolkits/developing-on-a-windows-11-machine/setting-up-typscript-env.md).

# 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 [Node.js Downloads](https://nodejs.org/en/download/).
* 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):

  ```bash
  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 [Git website](https://git-scm.com/download/win) 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:

  ```bash
  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.

* Download and install [Visual Studio Code](https://code.visualstudio.com/).
* 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**.

1. Open your terminal and run the following command to install **Next.js** with **create-next-app**:

   ```bash
   npx create-next-app@latest
   ```
2. Follow the prompts to set up your Next.js app. This will automatically install all necessary dependencies.
3. Change into your project directory and start the development server:

   ```bash
   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:

1. Inside your project directory, run the following command to install TypeScript and the necessary type definitions:

   ```bash
   npm install --save-dev typescript @types/react @types/node
   ```
2. Create a `tsconfig.json` file in the root directory of your project by running:

   ```bash
   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**:

* Download and install Docker Desktop from [here](https://www.docker.com/products/docker-desktop).
* After installation, verify Docker is running by running:

  ```bash
  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:**

1. Download the [Google Cloud SDK](https://cloud.google.com/sdk/docs/install).
2. Follow the instructions to install it on Windows.
3. Authenticate your SDK using:

   ```bash
   gcloud init
   ```

**For AWS:**

1. Download and install the [AWS CLI](https://aws.amazon.com/cli/).
2. Configure the CLI using your AWS credentials:

   ```bash
   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:

1. Download the [Stripe CLI](https://stripe.com/docs/stripe-cli) for Windows.
2. After installation, authenticate it using your Stripe account by running:

   ```bash
   stripe login
   ```
3. You can use the Stripe CLI to forward webhooks, test payments, and more:

   ```bash
   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.

* Download and install [Postman](https://www.postman.com/downloads/).

#### 10. **Install Linter and Formatter (ESLint and Prettier)**

Ensure consistent code quality by setting up **ESLint** and **Prettier**:

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

   ```bash
   npm install eslint prettier eslint-plugin-prettier eslint-config-prettier --save-dev
   ```
2. 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.