CostaPy + Vite

Integrate Costapy with Vite, Vue, Tailwind CSS, and Mynaui Icons to create a modern web application.

Requirement & Installation

• Node.js (20+ recommended)
• Python (3.8+ recommended)
• pnpm (optional, you can use npm if preferred)

Clone the repository

Clone the repository with --recursive when cloning the repo.

git clone https://gitea.ditaajipratama.net/ridzimeko/costa-vite-myna.git --recursive

Note that if you forgot the --recursive flag you can do:

git submodule update --init

Note that when submodules have other submodules you need recursive option.

git submodule update --init --recursive

Dependencies

You need this libraries to use CostaPy:

• bottle
• gunicorn
• beaker
• mako

You can install it with run this command

sh install.sh

Usage

1. Install Node.js Packages

Install the frontend dependencies using pnpm (or any package manager like npm or yarn):

pnpm install

Alternatively, with npm:

npm install

2. Build the Project

Build the Vite project for production:

pnpm build

This will generate the build files in the static/vue directory.

3. Run the Backend Server

Use this command to start the web service

python3 costa.py

Folder Structure

project/
├── costa.py             # Bottle backend script
├── static/
    ├── vue              # Vite build output (generated after running pnpm build)
├── src/                 # Frontend source code
│   ├── components/      # Vue components
│   ├── pages/           # Vue pages
│   ├── assets/          # CSS, images, etc.
│   ├── App.vue          # Main Vue component
│   ├── router.js        # Vue router
│   └── main.js          # Entry point for the Vue app
├── package.json         # Node.js dependencies
├── tailwind.config.cjs  # Tailwind CSS configuration
├── vite.config.js       # Vite configuration
├── jsconfig.json        # VScode IDE configuration for Javascript
└── ...

Configuration

Global Variable (config/globalvar.py)

globalvar.py is the place for storing your Global Variable.

baseurl
Is the variable for your base URL (without / in the end).

title
Is the variable for your web title.

Directory (config/directory.py)

directory.py is the place for storing your path. It is useful to calling the path more efficiently.

Handling the modules

Handling the module is in handler.py.