Installation
Requirements:
- TypeScript 5.4 or newer.
- Node.js, Deno, and Bun are supported.
To quickly set up a new Effect application, we recommend using create-effect-app
, which will handle all configurations for you. To create a new project, run:
npx create-effect-app@latest
pnpm create effect-app@latest
yarn create effect-app@latest
bunx create-effect-app@latest
deno init --npm effect-app@latest
Once you complete the prompts, create-effect-app
will create a folder with your project name and install all required dependencies.
For more details on the CLI, see the Create Effect App documentation.
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:
Terminal window npm init -ynpm install --save-dev typescriptTerminal window pnpm initpnpm add --save-dev typescriptTerminal window yarn init -yyarn add --dev typescriptThis creates a
package.json
file with an initial setup for your TypeScript project. -
Initialize TypeScript:
Terminal window npm tsc --initTerminal window pnpm tsc --initTerminal window yarn tsc --initWhen 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 thestrict
flag.Make sure to open the
tsconfig.json
file and verify that the value of thestrict
option is set totrue
.{"compilerOptions": {"strict": true}} -
Install the necessary package as dependency:
Terminal window npm install effectTerminal window pnpm add effectTerminal window yarn add effectThis 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.ts
Open the index.ts
file and add the following code:
import { Effect, Console } from "effect"
const program = Console.log("Hello, World!")
Effect.runSync(program)
Run the index.ts
file. Here we are using tsx to run the index.ts
file in the terminal:
npx tsx src/index.ts
You should see the message "Hello, World!"
printed. This confirms that the program is working correctly.
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:effectThis 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!")
Effect.runSync(program)
Run the main.ts
file:
deno run main.ts
You should see the message "Hello, World!"
printed. This confirms that the program is working correctly.
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.json
file that contains configuration options for TypeScript. One of the most important options to consider is thestrict
flag.Make sure to open the
tsconfig.json
file and verify that the value of thestrict
option is set totrue
.{"compilerOptions": {"strict": true}} -
Install the necessary package as dependency:
Terminal window bun add effectThis 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!")
Effect.runSync(program)
Run the index.ts
file:
bun index.ts
You should see the message "Hello, World!"
printed. This confirms that the program is working correctly.
Follow these steps to create a new Effect project for Vite + React:
-
Scaffold your Vite project, open your terminal and run the following command:
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-tsTerminal window pnpm create vite@latest hello-effect -- --template react-tsTerminal window yarn create vite@latest hello-effect -- --template react-tsTerminal window bun create vite@latest hello-effect -- --template react-tsTerminal 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:
Terminal window cd hello-effectnpm installTerminal window cd hello-effectpnpm installTerminal window cd hello-effectyarn installTerminal window cd hello-effectbun installTerminal window cd hello-effectdeno installOnce the packages are installed, open the
tsconfig.json
file and ensure that the value of thestrict
option is set to true.{"compilerOptions": {"strict": true}} -
Install the necessary package as dependency:
Terminal window npm install effectTerminal window pnpm add effectTerminal window yarn add effectTerminal window bun add effectTerminal window deno add effectThis 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 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.