This template provides a ready-to-use environment for building and packaging a cross-platform application using Vite for the frontend and Quart for the backend. The setup utilizes Docker to containerize both services and Electron to create a standalone executable for your application.
Before you start, ensure you have Docker, Docker Compose, and Node.js installed on your system. You can find the installation instructions for these tools here:
The boilerplate is structured as follows:
├── README.md # This README file
├── .env.template # Environment variable template file, to be copied to .env
├── .gitignore # Git ignore file
├── docker-compose.yml # Docker Compose configuration file with hot reload for development
├── docker-compose-packaged.yml # Docker Compose configuration file for packaged application
├── frontend/ # Frontend Vite-React application directory
│ ├── index.html # Main HTML file
│ ├── Dockerfile # Dockerfile for the frontend
│ ├── .eslintrc.cjs # ESLint configuration
│ ├── vite.config.js # Vite configuration
│ ├── .gitignore # Git ignore file for the frontend
│ ├── package.json # Frontend package configuration
│ ├── public/ # Public assets directory
│ │ └── vite.svg # Vite logo
│ ├── src/ # Source code for the frontend
│ │ ├── App.css # CSS for the App component
│ │ ├── index.css # Global CSS
│ │ ├── main.jsx # Main entry point for React
│ │ ├── App.jsx # React App component
│ │ └── assets/ # Assets directory
│ │ └── react.svg # React logo
├── backend/ # Backend application directory
│ ├── requirements.txt # Python dependencies
│ ├── Dockerfile # Dockerfile for the backend
│ └── app.py # Quart application
└── electron/ # Electron application directory
├── main.js # Main script for Electron
├── package.json # Electron package configuration
├── forge.config.js # Electron Forge configuration for packaging
└── src/ # Source code for Electron
└── utilities.js # Utility functions for Electron
-
Clone the repository:
git clone git@github.com:albertbuchard/vite-quart-cross-platform-boilerplate.git cd vite-quart-cross-platform-boilerplate
-
Create the
.env
file:Copy the
.env.template
file to.env
and adjust the PORT variables if needed.cp .env.template .env
-
Install Docker, Docker Compose, and Node.js: Follow the Docker, Docker Compose, and Node.js installation guides.
-
Build for local development:
Navigate to the root directory and use Docker Compose to build and start the services defined in the
docker-compose.yml
file. This will start the frontend and backend services for local development.docker-compose up --build
-
Run the Electron application:
- Navigate to the
electron
directory and start the Electron application. - This will launch a window that opens the frontend and controls the backend services
- If you use
npm start
ornpm run package
to package the application the hot reload will still work - Use
npm run make
to package the application for prod without hot reload.
cd electron npm install npm start
- Navigate to the
To package the application into a standalone executable for different platforms, follow these steps:
-
Navigate to the
electron
directory:cd electron
-
Install the necessary npm packages:
npm install
-
Run the packaging script:
- This will create executables for Linux, macOS, and Windows in the
dist
orout
directory depending on the packaging script used. - The packaging options should be defined in the
electron/forge.config.js
file (see Electron Forge Configuration for more details).
npm run package # in /out # OR npm run make # in /out
- This will create executables for Linux, macOS, and Windows in the
-
Access the packaged application: After a make on macOS with the
@electron-forge/maker-dmg
maker set in theforge.config.js
file, the.dmg
file will be created in theout/make
directory. You can then install the application by dragging it to the Applications folder.
- Frontend: The Vite-based frontend is located in the
frontend
directory. Usenpm run dev
for development andnpm run build
to build the production assets. - Backend: The Quart-based backend is in the
backend
directory. You can run it locally withpython app.py
, or use Docker to containerize it. - Electron: The Electron application is in the
electron
directory. You can develop and test the Electron app by runningnpm start
inside theelectron
directory.
- Environment Variables: The
.env
file is crucial for setting up the environment. Ensure it is properly configured. - Electron: The
main.js
script in theelectron
directory is responsible for starting the Docker services and launching the frontend URL in a window. It also ensures Docker services are shut down when the window is closed. - Packaging: The
electron/package.json
file contains scripts and configuration for packaging the application into standalone executables usingelectron-builder
.
For detailed configuration, refer to each respective file within the repository.
This project is licensed under the MIT License - see the LICENSE file for details.
For any inquiries or issues, please contact the repository maintainer.
Enjoy building with Vite, Quart, and Electron! 🚀