# Installation
Requirements:
- TypeScript 5.9 or newer. TypeScript 7 is recommended for the best performance and compatibility with [Effect's TypeScript tooling](/docs/v4/getting-started/devtools/).
- Node.js, Deno, and Bun are supported.
> **Installing version 4**
>
> Effect 4 is currently a release candidate, published under the `rc` tag on npm. Installing the `effect` package without a tag gives you the latest stable release, which is version 3. Use the `effect@rc` tag shown in the commands below to install version 4.
## Manual Installation
### Node.js
Follow these steps to create a new Effect project for [Node.js](https://nodejs.org/):
1. Create a project directory and navigate into it:
```sh
mkdir hello-effect
cd hello-effect
```
2. Initialize a TypeScript project:
**npm**
```sh
npm init -y
npm install --save-dev typescript
```
**pnpm**
```sh
pnpm init
pnpm add --save-dev typescript
```
**Yarn**
```sh
yarn init -y
yarn add --dev typescript
```
This creates a `package.json` file with an initial setup for your TypeScript project.
3. Initialize TypeScript:
**npm**
```sh
npx tsc --init
```
**pnpm**
```sh
pnpm tsc --init
```
**Yarn**
```sh
yarn tsc --init
```
When running this command, it will generate a `tsconfig.json` file that contains configuration options for TypeScript. One of the most important options to consider is the `strict` flag.
Make sure to open the `tsconfig.json` file and verify that the value of the `strict` option is set to `true`.
```json
{
"compilerOptions": {
"strict": true
}
}
```
4. Install the necessary package as dependency:
**npm**
```sh
npm install effect@rc
```
**pnpm**
```sh
pnpm add effect@rc
```
**Yarn**
```sh
yarn add effect@rc
```
This package will provide the foundational functionality for your Effect project.
Let's write and run a simple program to ensure that everything is set up correctly.
In your terminal, execute the following commands:
```sh
mkdir src
touch src/index.ts
```
Open the `index.ts` file and add the following code:
```ts
import { Effect, Console } from "effect"
const program = Console.log("Hello, World!")
const result = Effect.runSync(program) // => undefined
```
Run the `index.ts` file. Here we are using [tsx](https://github.com/privatenumber/tsx) to run the `index.ts` file in the terminal:
```sh
npx tsx src/index.ts
```
You should see the message `"Hello, World!"` printed. This confirms that the program is working correctly.
### Deno
Follow these steps to create a new Effect project for [Deno](https://deno.com/):
1. Create a project directory and navigate into it:
```sh
mkdir hello-effect
cd hello-effect
```
2. Initialize Deno:
```sh
deno init
```
3. Install the necessary package as dependency:
```sh
deno add npm:effect@rc
```
This package will provide the foundational functionality for your Effect project.
Let's write and run a simple program to ensure that everything is set up correctly.
Open the `main.ts` file and replace the content with the following code:
```ts
import { Effect, Console } from "effect"
const program = Console.log("Hello, World!")
const result = Effect.runSync(program) // => undefined
```
Run the `main.ts` file:
```sh
deno run main.ts
```
You should see the message `"Hello, World!"` printed. This confirms that the program is working correctly.
### Bun
Follow these steps to create a new Effect project for [Bun](https://bun.sh/):
1. Create a project directory and navigate into it:
```sh
mkdir hello-effect
cd hello-effect
```
2. Initialize Bun:
```sh
bun init
```
When running this command, it will generate a `tsconfig.json` file that contains configuration options for TypeScript. One of the most important options to consider is the `strict` flag.
Make sure to open the `tsconfig.json` file and verify that the value of the `strict` option is set to `true`.
```json
{
"compilerOptions": {
"strict": true
}
}
```
3. Install the necessary package as dependency:
```sh
bun add effect@rc
```
This package will provide the foundational functionality for your Effect project.
Let's write and run a simple program to ensure that everything is set up correctly.
Open the `index.ts` file and replace the content with the following code:
```ts
import { Effect, Console } from "effect"
const program = Console.log("Hello, World!")
const result = Effect.runSync(program) // => undefined
```
Run the `index.ts` file:
```sh
bun index.ts
```
You should see the message `"Hello, World!"` printed. This confirms that the program is working correctly.
### Vite + React
Follow these steps to create a new Effect project for [Vite](https://vitejs.dev/guide/) + [React](https://react.dev/):
1. Scaffold your Vite project, open your terminal and run the following command:
**npm**
```sh
# npm 6.x
npm create vite@latest hello-effect --template react-ts
# npm 7+, extra double-dash is needed
npm create vite@latest hello-effect -- --template react-ts
```
**pnpm**
```sh
pnpm create vite@latest hello-effect -- --template react-ts
```
**Yarn**
```sh
yarn create vite@latest hello-effect -- --template react-ts
```
**Bun**
```sh
bun create vite@latest hello-effect -- --template react-ts
```
**Deno**
```sh
deno init --npm vite@latest hello-effect -- --template react-ts
```
This command will create a new Vite project with React and TypeScript template.
2. Navigate into the newly created project directory and install the required packages:
**npm**
```sh
cd hello-effect
npm install
```
**pnpm**
```sh
cd hello-effect
pnpm install
```
**Yarn**
```sh
cd hello-effect
yarn install
```
**Bun**
```sh
cd hello-effect
bun install
```
**Deno**
```sh
cd hello-effect
deno install
```
Once the packages are installed, open the `tsconfig.json` file and ensure that the value of the `strict` option is set to true.
```json
{
"compilerOptions": {
"strict": true
}
}
```
3. Install the necessary package as dependency:
**npm**
```sh
npm install effect@rc
```
**pnpm**
```sh
pnpm add effect@rc
```
**Yarn**
```sh
yarn add effect@rc
```
**Bun**
```sh
bun add effect@rc
```
**Deno**
```sh
deno add npm:effect@rc
```
This package will provide the foundational functionality for your Effect project.
Now, let's write and run a simple program to ensure that everything is set up correctly.
Open the `src/App.tsx` file and replace its content with the following code:
```diff
+import { useState, useMemo, useCallback } from "react"
import reactLogo from "./assets/react.svg"
import viteLogo from "/vite.svg"
import "./App.css"
+import { Effect } from "effect"
function App() {
const [count, setCount] = useState(0)
+ const task = useMemo(
+ () => Effect.sync(() => setCount((current) => current + 1)),
+ [setCount]
+ )
+
+ const increment = useCallback(() => Effect.runSync(task), [task])
return (
<>
Vite + React
+
Edit src/App.tsx and save to test HMR
Click on the Vite and React logos to learn more
)
}
export default App
```
After making these changes, start the development server by running the following command:
**npm**
```sh
npm run dev
```
**pnpm**
```sh
pnpm run dev
```
**Yarn**
```sh
yarn run dev
```
**Bun**
```sh
bun run dev
```
**Deno**
```sh
deno run dev
```
Then, press **o** to open the application in your browser.
When you click the button, you should see the counter increment. This confirms that the program is working correctly.