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

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

Build the Project

Build the Vite project for production:

pnpm build

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

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.

2.4 KiB Raw Blame History