Installation
Requirements:
- TypeScript 5.9 or newer. TypeScript 7 is recommended for the best performance and compatibility with Effect’s TypeScript tooling.
- Node.js, Deno, and Bun are supported.
Manual Installation
Node.js
Follow these steps to create a new Effect project for Node.js:
-
Create a project directory and navigate into it:
Terminal window mkdir hello-effectcd hello-effect -
Initialize a TypeScript project:
npm
Terminal window npm init -ynpm install --save-dev typescriptpnpm
Terminal window pnpm initpnpm add --save-dev typescriptYarn
Terminal window yarn init -yyarn add --dev typescriptThis creates a
package.jsonfile with an initial setup for your TypeScript project. -
Initialize TypeScript:
npm
Terminal window npx tsc --initpnpm
Terminal window pnpm tsc --initYarn
Terminal window yarn tsc --initWhen running this command, it will generate a
tsconfig.jsonfile that contains configuration options for TypeScript. One of the most important options to consider is thestrictflag.Make sure to open the
tsconfig.jsonfile and verify that the value of thestrictoption is set totrue.{"compilerOptions": {"strict": true}} -
Install the necessary package as dependency:
npm
Terminal window npm install effect@rcpnpm
Terminal window pnpm add effect@rcYarn
Terminal window yarn add effect@rcThis 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 srctouch src/index.tsOpen the index.ts file and add the following code:
import { Effect, Console } from "effect"
const program = Console.log("Hello, World!")
const result = Effect.runSync(program) // => undefinedRun the index.ts file. Here we are using tsx to run the index.ts file in the terminal:
npx tsx src/index.tsYou 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:
-
Create a project directory and navigate into it:
Terminal window mkdir hello-effectcd hello-effect -
Initialize Deno:
Terminal window deno init -
Install the necessary package as dependency:
Terminal window deno add npm:effect@rcThis 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:
import { Effect, Console } from "effect"
const program = Console.log("Hello, World!")
const result = Effect.runSync(program) // => undefinedRun the main.ts file:
deno run main.tsYou 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:
-
Create a project directory and navigate into it:
Terminal window mkdir hello-effectcd hello-effect -
Initialize Bun:
Terminal window bun initWhen running this command, it will generate a
tsconfig.jsonfile that contains configuration options for TypeScript. One of the most important options to consider is thestrictflag.Make sure to open the
tsconfig.jsonfile and verify that the value of thestrictoption is set totrue.{"compilerOptions": {"strict": true}} -
Install the necessary package as dependency:
Terminal window bun add effect@rcThis 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:
import { Effect, Console } from "effect"
const program = Console.log("Hello, World!")
const result = Effect.runSync(program) // => undefinedRun the index.ts file:
bun index.tsYou 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
Terminal window # npm 6.xnpm create vite@latest hello-effect --template react-ts# npm 7+, extra double-dash is needednpm create vite@latest hello-effect -- --template react-tspnpm
Terminal window pnpm create vite@latest hello-effect -- --template react-tsYarn
Terminal window yarn create vite@latest hello-effect -- --template react-tsBun
Terminal window bun create vite@latest hello-effect -- --template react-tsDeno
Terminal window deno init --npm vite@latest hello-effect -- --template react-tsThis command will create a new Vite project with React and TypeScript template.
-
Navigate into the newly created project directory and install the required packages:
npm
Terminal window cd hello-effectnpm installpnpm
Terminal window cd hello-effectpnpm installYarn
Terminal window cd hello-effectyarn installBun
Terminal window cd hello-effectbun installDeno
Terminal window cd hello-effectdeno installOnce the packages are installed, open the
tsconfig.jsonfile and ensure that the value of thestrictoption is set to true.{"compilerOptions": {"strict": true}} -
Install the necessary package as dependency:
npm
Terminal window npm install effect@rcpnpm
Terminal window pnpm add effect@rcYarn
Terminal window yarn add effect@rcBun
Terminal window bun add effect@rcDeno
Terminal window deno add npm:effect@rcThis 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:
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 ( <> <div> <a href="https://vitejs.dev" target="_blank"> <img src={viteLogo} className="logo" alt="Vite logo" /> </a> <a href="https://react.dev" target="_blank"> <img src={reactLogo} className="logo react" alt="React logo" /> </a> </div> <h1>Vite + React</h1> <div className="card"> <button onClick={increment}>count is {count}</button> <p> Edit <code>src/App.tsx</code> and save to test HMR </p> </div> <p className="read-the-docs"> Click on the Vite and React logos to learn more </p> </> )}
export default AppAfter making these changes, start the development server by running the following command:
npm
npm run devpnpm
pnpm run devYarn
yarn run devBun
bun run devDeno
deno run devThen, 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.