Skip to main content

​
Prerequisites

Before you begin, make sure you have the following installed:
Node.js version 18.0 or above
  • When installing Node.js, make sure to check all checkboxes related to dependencies
  • Node.js installation includes NPM (Node Package Manager) which is required
  • You can verify your installation by running:
node --version
npm --version
If you see version numbers displayed for both commands, you’re ready to start building with Modelence!

​
Creating a new project

You can create a new Modelence project using the create-modelence-app command. 
npx create-modelence-app@latest 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
  • client/index.html The main layout for your application. You usually don’t need to edit this file.
  • client/index.css Global CSS styles, including Tailwind CSS configuration.
  • client/index.tsx Entry point for your React frontend where you initialize the client app.
  • client/routes.ts Define your client-side routes and their corresponding components.
  • server/app.ts Server entry point where you configure your backend modules and start the server.
  • .modelence.env Environment variables for your application (including API tokens for applications connected to Modelence Cloud)
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.