Skip to main content

Creating an app

Coral is currently in an early experimental stage, and an official CLI tool for scaffolding new applications is under development. In the meantime, developers can create a new Coral-based application manually by following a simple process. This section outlines how to set up a starter application using the core framework files and get the development server running.

Step 1: Copy the Core Framework​

Coral’s source repository is structured into several isolated directories, including the core framework, and documentation tooling. To begin, you should manually copy the contents of the core/ directory into a new project folder.

You may either:

  • Clone the Coral repository and extract the core/ directory
  • Or directly copy it from an existing Coral-based project

This directory includes all the essential logic needed to run a basic fullstack Coral application, including routing, server function handling, and build configuration.

Step 2: Install Dependencies​

Once the core/ files have been copied into your project directory, navigate to that folder in your terminal and install the required dependencies using your package manager of choice.

For example, using npm:

npm install

This will install Coral's dependencies, which may include:

  • react and react-dom
  • @tanstack/router (for client-side routing)
  • vinxi (for server-side rendering, build pipeline, and routing integration)
  • @vinxi/server-functions and related internal utilities

You can inspect the package.json to review or customize any version constraints or additional packages.

Step 3: Start the Development Server​

Once dependencies are installed, you can launch the development server using Vinxi’s built-in dev command:

npx vinxi dev

This command performs the following tasks:

1. Starts the Dev Server​

Vinxi spins up both the client and server environments in development mode, enabling fullstack rendering, file-based routing, hot reload, and API request handling during development.

2. Generation of Internal Routing Artifacts​

When the development server starts, Vinxi and TanStack Router work together to automatically generate certain internal artifacts required by Coral’s routing layer:

.tanstack/​

This is a generated directory that holds temporary build-related routing data and metadata. It is typically excluded from version control and should be treated as a build artifact.

routeTree.gen.ts​

This TypeScript file is auto-generated by TanStack Router and represents a statically analyzable structure of your app’s client-side route definitions. It is used internally for optimized routing, type-safety, and efficient bundling.

Note: You should not manually edit these generated files. They are updated automatically during development and build processes.

Step 4: Verify the Application​

Once the development server is running, you can open the application in your browser, typically at:

http://localhost:3000/

(Port may vary depending on your setup and Vinxi configuration.)

You should see the Coral application running with basic routing and the included demo components or pages. You can begin modifying these files to build your own application logic.

Future Improvements​

A command-line interface (CLI) is planned for Coral that will allow developers to generate a new project using a single command.

The initial version of our upcoming CLI will be just a primitive starter app generator, however later down the line the CLI will eventually support:

  • Automated scaffolding of new projects
  • Integration with the Coral core framework
  • Optional configuration flags for rendering mode, routing structure, and testing setup
  • Automatic generation of test stubs, route files, and configuration scripts

Until the CLI is available, the manual setup described above is the recommended approach for getting started with Coral.