Create A Project

In this chapter, we will create a new Farm React project from scratch, and launch it in development mode.

note

In this tutorial, we use pnpm as default package manager. This chapter is build a Farm react project from scratch, If you are trying to init a new Farm Project rapidly, use our official template with command pnpm create farm. See Quick Start.

Create A Package

First we execute pnpm init to create a new package.

A package.json file will be autogenerated.

Install Dependencies

Install necessary dependencies:

react and react-dom:

farm related dependencies:

There are 3 packages that are necessary for a react project:

• @farmfe/cli: This package provides commands like farm start, farm build, farm preview, it must be used with @farmfe/core and can not be used separately.
• @farmfe/core: This package provides Compilation and Dev Server abilities, provides all necessary component for local development and product build. It exports Compiler, DevServer and Watcher, which is used for compile the project, serve the project in development mode and watch the project for Hot Module Replacement.
• @farmfe/plugin-react: This package provides abilities for React Jsx compilation, and react-refresh support.

Create Farm Config File

Create a farm.config.ts file under project root:

and add following configuration:

For configuration file above, we use input, output and plugins, which is the most basic configuration in Farm.

• input: Configure the entry point. Farm will compile and build a module graph from the entries.
• output: Confiture the output dir, file name and so on. For full options, see compilation.output.
• plugins: Configure farm plugins, all extended abilities like React, Vue SFC are supported by plugins. Here we use a Rust Plugin(@farmfe/plugin-react) to support compiling React jsx.

Check Configuring Farm for more options.

note

In above example, we config input as index: './src/index.html', if we do not configure input, it's default to index: './index.html'. And we can configure multiple entries in input, see Multi Page App for details

Create A Entry Html and Tsx File

Create 2 files src/index.html and src/index.tsx under project root:

Content of src/index.html is:

note

Note that we must add at least one <script> to refer to a script module.

Content of src/index.tsx is:

src/index.tsx

Start Your Farm Project!

Now every thing is ready, add a start script to your package.json:

package.json

then run npm start, if farm output following messages, means your project are launched successfully:

Open http://localhost:9000 in browser.