MobApp

Mobile web application UI template kit based on Bootstrap 5

This project is still in development and there will still be many changes in the structure and code.

🚀 Development Mode (Dev Mode)

To run the project in development mode, use PHP's built-in development server:

php -S localhost:8080 -t src/

This command will start a local server and serve files from the /src/ directory. You can then access the project at http://localhost:8080/

📦 Build Static Files

To export the project into static HTML files:

1. Edit pages.txt

Add the paths of the PHP pages you want to build, one per line. Example:

index.php
components/index.php
components/listview.php
components/buttons.php

2. Run the build script

Execute the following command in the terminal:

php build.php
# will build to dist/
# or
php build.php output
# will build to output/

3. Check the output

• The generated static files will be available in the /dist/ directory.
• PHP files will be converted into .html and all links inside will be updated automatically.

4. Set Base Path (optional)

If you'll host your site inside subfolder, i.e. mysite.com/app/, then you have to make sure all urls prefixed with the right base path. To do that, copy config.php.bak to config.php and set $basePath to '/app/' or any folder name you want. Make sure folder name begin and end with slash. After that you can then build the site.

📂 Project Structure

/mobapp
│── /src/               # Development source files
│   ├── index.php
│   ├── /components/    # UI components
│   │   ├── index.php
│   │   ├── listview.php
│   │   ├── buttons.php
│   ├── /partials/      # Reusable parts (header, footer, etc.)
│   │   ├── header.php
│   │   ├── footer.php
│   ├── /assets/        # Static assets (CSS, JS, Images)
│── /dist/              # Built static HTML output
│── pages.txt           # List of PHP files to be built
│── build.php           # Build script

🔥 Features

• Dev Mode: Easily test changes using php -S localhost:8080 -t src/
• Build Mode: Convert PHP files to static .html
• Automatic Link Conversion: All .php links in the HTML output will be changed to .html
• Asset Copying: The /assets/ folder is automatically copied to /dist/assets/
• Minify /dist/assets/style.css

🔥 Now you're ready to develop and deploy your static mobile app UI! If you have any issues or suggestions, feel free to improve the project! 🚀