104 lines
2.4 KiB
Markdown
104 lines
2.4 KiB
Markdown
# 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`.
|