# 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` </br>
Is the variable for your base URL (without `/` in the end).

`title` </br>
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`.