Installation

Requirements:

TypeScript 5.4 or newer.
Node.js 22.18 or newer, Deno, and Bun are supported.

Manual Installation

JavaScript runtimes

Follow these steps to create a new Effect project for Node.js, Bun, or Deno:

Create a project directory and navigate into it:
Terminal window
```
mkdir hello-effect
cd hello-effect
```
Initialize a TypeScript project:
Terminal window
npm init -y npm install --save-dev typescript
Terminal window
pnpm init pnpm add --save-dev typescript
Terminal window
yarn init -y yarn add --dev typescript
Terminal window
bun init
Terminal window
deno init
This creates a package.json file with an initial setup for your TypeScript project. For Bun, this also generates a tsconfig.json file. For Deno, this generates a deno.json file.

Make sure the package.json file contains the "type": "module" field, so that Node.js treats your source files as ES modules (bun init adds this automatically):
```
{
  "type": "module"
}
```
Initialize TypeScript:
Terminal window
npx tsc --init
Terminal window
pnpm tsc --init
Terminal window
yarn tsc --init
bun init has already generated a tsconfig.json file.

Deno runs TypeScript out of the box, and deno init has already generated a deno.json file with strict mode enabled by default. No further configuration is needed.
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.
```
{
  "compilerOptions": {
    "strict": true
  }
}
```
Install the necessary package as dependency:
Terminal window
npm install effect
Terminal window
pnpm add effect
Terminal window
yarn add effect
Terminal window
bun add effect
Terminal window
deno add npm:effect
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:

mkdir src
touch src/index.ts

Open the src/index.ts file and add the following code:

1
import { Effect, Console } from "effect"
2

3
const program = Console.log("Hello, World!")
4

5
Effect.runSync(program)

Run the src/index.ts file. Node.js 22.18 or newer, Bun, and Deno can run TypeScript files directly, so no additional tooling is needed:

node src/index.ts

node src/index.ts

node src/index.ts

bun src/index.ts

deno run src/index.ts

If you are using an older version of Node.js, run the file with tsx instead: npx tsx src/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 + React:

Scaffold your Vite project, open your terminal and run the following command:

# 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 create vite@latest hello-effect -- --template react-ts

yarn create vite@latest hello-effect -- --template react-ts

bun create vite@latest hello-effect -- --template react-ts

deno init --npm vite@latest hello-effect -- --template react-ts

This command will create a new Vite project with React and TypeScript template.

Navigate into the newly created project directory and install the required packages:
Terminal window
cd hello-effect npm install
Terminal window
cd hello-effect pnpm install
Terminal window
cd hello-effect yarn install
Terminal window
cd hello-effect bun install
Terminal window
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.
```
{
  "compilerOptions": {
    "strict": true
  }
}
```
Install the necessary package as dependency:
Terminal window
npm install effect
Terminal window
pnpm add effect
Terminal window
yarn add effect
Terminal window
bun add effect
Terminal window
deno add npm:effect
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:

1
import { useState, useMemo, useCallback } from "react"
2
import reactLogo from "./assets/react.svg"
3
import viteLogo from "/vite.svg"
4
import "./App.css"
5
import { Effect } from "effect"
6

7
function App() {
8
  const [count, setCount] = useState(0)
9

10
  const task = useMemo(
11
    () => Effect.sync(() => setCount((current) => current + 1)),
12
    [setCount]
13
  )
14

15
  const increment = useCallback(() => Effect.runSync(task), [task])
16

17
  return (
18
    <>
19
      <div>
20
        <a href="https://vitejs.dev" target="_blank">
21
          <img src={viteLogo} className="logo" alt="Vite logo" />
22
        </a>
23
        <a href="https://react.dev" target="_blank">
24
          <img src={reactLogo} className="logo react" alt="React logo" />
25
        </a>
26
      </div>
27
      <h1>Vite + React</h1>
28
      <div className="card">
29
        <button onClick={increment}>count is {count}</button>
30
        <p>
31
          Edit <code>src/App.tsx</code> and save to test HMR
32
        </p>
33
      </div>
34
      <p className="read-the-docs">
35
        Click on the Vite and React logos to learn more
36
      </p>
37
    </>
38
  )
39
}
40

41
export default App

After making these changes, start the development server by running the following command:

npm run dev

pnpm run dev

yarn run dev

bun run dev

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.