​
Prerequisites

Before you begin, make sure you have the following installed:

​
Creating a new project

You can create a new Modelence project using the create-modelence-app command.

npx create-modelence-app my-app

This command will create a new directory named my-app with the necessary files and folders for your project.

​
Project structure

The project structure for a Modelence app is as follows:

my-app/
├── src/
│   ├── client/
│   │   ├── index.html
│   │   ├── index.css
│   │   ├── index.tsx
│   │   ├── routes.ts
│   ├── server/
│   │   ├── app.ts
│   ├── .modelence.env

All client-side code goes in the src/client directory, while server-side code belongs in src/server. Modelence uses a clear separation between client and server code to help maintain a clean architecture. You can also use any other directories at the same level as src/client and src/server for shared code between client and server.

​
Start your application

1

Install dependencies

Navigate to your project directory and install the required packages:

cd my-app
npm install
2

Run the development server

Start the development server:

npm run dev

The npm run dev command builds your website locally and serves it through a Vite development server, ready for you to view at http://localhost:3000/ (or the port you specified in the .env file).

3

View your application

If everything is set up correctly, you should see the Modelence new project home page in your browser.

​
Prerequisites

Before you begin, make sure you have the following installed:

​
Creating a new project

You can create a new Modelence project using the create-modelence-app command.

npx create-modelence-app my-app

This command will create a new directory named my-app with the necessary files and folders for your project.

​
Project structure

The project structure for a Modelence app is as follows:

my-app/
├── src/
│   ├── client/
│   │   ├── index.html
│   │   ├── index.css
│   │   ├── index.tsx
│   │   ├── routes.ts
│   ├── server/
│   │   ├── app.ts
│   ├── .modelence.env

All client-side code goes in the src/client directory, while server-side code belongs in src/server. Modelence uses a clear separation between client and server code to help maintain a clean architecture. You can also use any other directories at the same level as src/client and src/server for shared code between client and server.

​
Start your application

1

Install dependencies

Navigate to your project directory and install the required packages:

cd my-app
npm install
2

Run the development server

Start the development server:

npm run dev

The npm run dev command builds your website locally and serves it through a Vite development server, ready for you to view at http://localhost:3000/ (or the port you specified in the .env file).

3

View your application

If everything is set up correctly, you should see the Modelence new project home page in your browser.