How to use PHP templates - dsktschy/mpa-boilerplate GitHub Wiki

If using Windows, consider using WSL2. Because commands in this article are for MacOS or Linux.

1. Select CSS preprocessor

PostCSS(Tailwind)
- Download main branch
SCSS
- Download scss branch

2. Setup

Move to project root
```
cd /path/to/mpa-boilerplate/
```

If using Docker, create docker-compose.yml, and edit it

touch docker-compose.yml
vi docker-compose.yml

Copy, and paste following settings

+ version: "3.9"
+
+ services:
+   app:
+     image: php:apache
+     ports:
+       - "8000:80"
+     volumes:
+       - ./dist:/var/www/html

Duplicate .env-sample, rename it to .env, and edit it

cp .env-sample .env
vi .env

Enable WEBPACK_BROWSER_SYNC_PROXY variable

- # WEBPACK_BROWSER_SYNC_PROXY=http://127.0.0.1:8000
+ WEBPACK_BROWSER_SYNC_PROXY=http://127.0.0.1:8000

Install dependencies
```
npm i
```

3. Develop

Move to project root
```
cd /path/to/mpa-boilerplate/
```
Start development server
```
npm run dev
```
Start web server to run PHP
- If using Built-in web server
```
php -S 127.0.0.1:8000 -t dist/
```
- If using Docker
```
docker-compose up
```
[Browser] Open http://localhost:3000
Edit in src/ and public/

4. Output production files

Move to project root
```
cd /path/to/mpa-boilerplate/
```
Output production files to dist/
```
npm run build
```

To add templates

Move to project root
```
cd /path/to/mpa-boilerplate/
```

Create new files

cp public/index.php public/new.php
cp src/assets/styles/index.css src/assets/styles/new.css
cp src/assets/scripts/index.ts src/assets/scripts/new.ts

Edit new template

vi public/new.php

Update link tag

- <link href="<?= $_('assets/styles/index.css') ?>" rel="stylesheet" />
+ <link href="<?= $_('assets/styles/new.css') ?>" rel="stylesheet" />

Update script tag

- <script src="<?= $_('assets/scripts/index.js') ?>"></script>
+ <script src="<?= $_('assets/scripts/new.js') ?>"></script>

Edit webpack.config.js

vi webpack.config.js

Add new script entries and style entries to entry option

  entry: {
    'assets/scripts/index': path.resolve(
      __dirname,
      `${process.env.WEBPACK_SRC_RELATIVE_PATH}/assets/scripts/index.ts` // or .js
    ),
    'assets/styles/index': path.resolve(
      __dirname,
      `${process.env.WEBPACK_SRC_RELATIVE_PATH}/assets/styles/index.css` // or .scss
+   ),
+   'assets/scripts/new': path.resolve(
+     __dirname,
+     `${process.env.WEBPACK_SRC_RELATIVE_PATH}/assets/scripts/new.ts` // or .js
+   ),
+   'assets/styles/new': path.resolve(
+     __dirname,
+     `${process.env.WEBPACK_SRC_RELATIVE_PATH}/assets/styles/new.css` // or .scss
    )
  },