Getting started

Display Hello, world with your first Effront application.

Run a minimal Effront application that displays Hello, world. Then examine the files that define the page.

Run the sample

The current Node.js LTS and Vite+ are required. Bun is needed only when selecting the Bun production runtime.

vp create effront -- my-app --platform node
cd my-app
vp install
vp dev

Open the local URL printed by the development server. The page displays Hello, world. For other configurations, refer to Platforms.

Explore the sample

The Node.js starter has one page and five primary files:

File	Purpose
`src/entry.effront.tsx`	Defines the page content, its HTML layout, and the `/` route.
`src/entry.rsc.ts`	Connects the application to the development and production servers.
`src/entry.server.ts`	Starts the Node.js server for a production build.
`vite.config.ts`	Configures Effront development and builds.
`package.json`	Lists dependencies and commands for running the example.

The generated project's src/entry.effront.tsx defines the page (also available in the Node example). HomePage contains the displayed heading. RootLayout supplies the surrounding HTML. Routes makes the page available at /.

Change the heading

In src/entry.effront.tsx, change the heading:

const HomePage = EFFRONT.Page.make({
  // Replace the heading text.
  render: () => Effect.succeed(<h1>Hello, Effront</h1>),
});

Save the file. The browser updates to display Hello, Effront. To add another page, continue with Pages, layouts, and routes.