Skip to main content

Quick Start

Modelence applications are primarily relying on Modelence Cloud, which provides an admin dashboard for managing your applications, even when running local dev environments. However, you can also use an offline setup with your own configuration.

Getting Started​

Get started by creating a new project.

Prerequisites​

  • 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 modelence create-app npx command.

npx modelence create-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
│   ├── .env
  • src/client/index.html: The main HTML template for your application. You usually don't need to edit this file.
  • src/client/index.css: Global CSS styles, including Tailwind CSS configuration.
  • src/client/index.tsx: Entry point for your React frontend where you initialize the client app.
  • src/client/routes.ts: Define your client-side routes and their corresponding components.
  • src/server/app.ts: Server entry point where you configure your backend modules and start the server.
  • .env: Environment variables for your application (for example Modelence Studio tokens)
tip

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​

Install the dependencies:

cd my-app
npm install

Run 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).