---
title: "Quick Start"
locale: "en"
version: "1.x"
canonicalUrl: "https://farmfe.org/docs/1.x/quick-start"
publicationStatus: "prerelease"
---

<a id="quick-start"></a>
# Quick Start



> [!WARNING]
> warning
> 
> Farm needs **Node 16.18.0 and above**.



<a id="online-experience"></a>
## Online experience


[![Edit Farm](<https://codesandbox.io/static/img/play-codesandbox.svg>)](<https://codesandbox.io/p/github/ErKeLost/react/main>)


<a id="create-a-farm-project"></a>
## Create a Farm Project


**npm**

```sh
npm create farm@latest
```

**pnpm**

```sh
pnpm create farm@latest
```

**yarn**

```sh
yarn create farm@latest
```

**bun**

```sh
bun create farm@latest
```



> [!NOTE]
> Then follow the prompts!
> 
> You can also directly specify the project name and the template you want to use via additional command line options:



**npm**

```sh
npm create farm farm-app --template react
```

**pnpm**

```sh
pnpm create farm farm-app --template react
```

**yarn**

```sh
yarn create farm farm-app --template react
```

**bun**

```sh
bun create farm farm-app --template react
```


| Template | Description | Optional Features |
| --- | --- | --- |
| vanilla | Vanilla JavaScript | TypeScript |
| react | react18 | TypeScript |
| vue3 | vue3 | TypeScript |
| vue2 | vue2 | TypeScript |
| svelte | svelte | TypeScript |
| solid | solid | TypeScript |
| preact | preact | TypeScript |
| lit | lit | TypeScript |
| nestjs | nestjs | TypeScript |
| tauri | tauri2 | TypeScript |
| electron | electron | TypeScript |


<a id="2-start-the-project"></a>
## 2. Start the Project


Choose the package manager you like, install dependencies, then start the project.
Then, start the project:


**npm**

```sh
cd farm-app && npm install && npm dev
```

**pnpm**

```sh
cd farm-app && pnpm install && pnpm dev
```

**yarn**

```sh
cd farm-app && yarn install && yarn dev
```

**bun**

```sh
cd farm-app && bun install && bun dev
```


> The project will start at ` http://localhost:9000 ` by default.


<a id="3-configuring-the-project"></a>
## 3. Configuring the Project


The project is configured by ` farm.config.ts/js/mjs ` file in the root directory of the project.


```ts
import { defineConfig } from "@farmfe/core";
import react from '@farmfe/plugin-react';

export default defineConfig({
  // Additional plugins
  plugins: [react()],
});
```



> [!NOTE]
> note
> 
> See **[Configuring Farm](</docs/config/configuring-farm>)** for details.



<a id="4-building-the-project"></a>
## 4. Building the project


Build the Farm project as production-ready static files:


**npm**

```sh
npm run build
```

**pnpm**

```sh
pnpm run build
```

**yarn**

```sh
yarn run build
```

**bun**

```sh
bun run build
```


The built product is downgraded to ` ES2017 ` by default, and the product will be compressed and Tree Shake. If you want to preview the build product locally, you can execute ` npm run preview ` or ` npx farm preview `.



> [!NOTE]
> note
> 
> See **[Build For Production](</docs/tutorials/build>)** for details.



<a id="4-preview-the-build-products"></a>
## 4. Preview the build products


Start preview server


**npm**

```sh
npm run preview
```

**pnpm**

```sh
pnpm run preview
```

**yarn**

```sh
yarn run preview
```

**bun**

```sh
bun run preview
```


<a id="next-steps"></a>
## Next Steps


- [Why Farm?](</docs/why-farm>)
- [Features](</docs/features/html>)
- [Configuring Farm](</docs/config/configuring-farm>)
- [Plugins](</docs/plugins/official-plugins/overview>)



---