How to use with WordPress - 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 Local, create self-signed certificate, and import it to browser

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

cp .env-sample .env
vi .env

If using Local

- WEBPACK_MANIFEST_PUBLIC_PATH=/
- # WEBPACK_MANIFEST_PUBLIC_PATH=/wp-content/themes/mpa-boilerplate/
+ WEBPACK_MANIFEST_PUBLIC_PATH=/wp-content/themes/mpa-boilerplate/

  ## Browsersync options
  WEBPACK_BROWSER_SYNC_HOST=localhost
  WEBPACK_BROWSER_SYNC_PORT=3000
- # WEBPACK_BROWSER_SYNC_PROXY=http://127.0.0.1:8000
- # WEBPACK_BROWSER_SYNC_HTTPS_CERT=/path/to/self-signed.crt
- # WEBPACK_BROWSER_SYNC_HTTPS_KEY=/path/to/self-signed.key
+ WEBPACK_BROWSER_SYNC_PROXY=https://sitename.dev
+ WEBPACK_BROWSER_SYNC_HTTPS_CERT=/path/to/self-signed.crt
+ WEBPACK_BROWSER_SYNC_HTTPS_KEY=/path/to/self-signed.key

If using Docker

- WEBPACK_MANIFEST_PUBLIC_PATH=/
- # WEBPACK_MANIFEST_PUBLIC_PATH=/wp-content/themes/mpa-boilerplate/
+ WEBPACK_MANIFEST_PUBLIC_PATH=/wp-content/themes/mpa-boilerplate/

  ## Browsersync options
  WEBPACK_BROWSER_SYNC_HOST=localhost
  WEBPACK_BROWSER_SYNC_PORT=3000
- # WEBPACK_BROWSER_SYNC_PROXY=http://127.0.0.1:8000
+ WEBPACK_BROWSER_SYNC_PROXY=http://127.0.0.1:8000

Install dependencies
```
npm i
```
Output files to dist/
```
npm run build
```
Construct and start WordPress
- If using Local
  - [Local] Update domain suffix to avoid slow response
    - Set "Preferences > NEW SITE DEFAULTS > Domain Suffix" to .dev
  - [Local] Set up new site
  - [Local] Enable SSL
    - Click "TRUST" in dashboard
  - Create symbolic link pointing to dist/
```
ln -s /path/to/mpa-boilerplate/dist /path/to/Local\ Sites/sitename/app/public/wp-content/themes/mpa-boilerplate
```
- If using Docker
  - Create docker-compose.yml, and edit it
```
touch docker-compose.yml
vi docker-compose.yml
```
    - Copy, and paste docker-compose.yml in this example
      + version: "3.9" + + services: + db: [...] + wordpress: [...] + + volumes: [...]
    - Update volumes option of WordPress service
      volumes: - wordpress_data:/var/www/html + - ./dist:/var/www/html/wp-content/themes/mpa-boilerplate
  - Start WordPress
```
docker-compose up
```
[Browser] Open WordPress and activate MPA Boilerplate theme
- If using Local
  - Open https://sitename.dev/wp-admin/themes.php
- If using Docker
  - Open http://127.0.0.1:8000/wp-admin/themes.php

3. Develop

Move to project root
```
cd /path/to/mpa-boilerplate/
```
Start WordPress
- If using Local
  - [Local] Start local site
- If using Docker
```
docker-compose up
```
Start development server
```
npm run dev
```
[Browser] Open site
- If using Local
  - Open https://localhost:3000
- If using Docker
  - 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/page-new.php
cp src/assets/styles/index.css src/assets/styles/page-new.css
cp src/assets/scripts/index.ts src/assets/scripts/page-new.ts

Edit new template

vi public/page-new.php

Update link tag

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

Update script tag

- <script src="<?= $_('assets/scripts/index.js') ?>"></script>
+ <script src="<?= $_('assets/scripts/page-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/page-new': path.resolve(
+     __dirname,
+     `${process.env.WEBPACK_SRC_RELATIVE_PATH}/assets/scripts/page-new.ts` // or .js
+   ),
+   'assets/styles/page-new': path.resolve(
+     __dirname,
+     `${process.env.WEBPACK_SRC_RELATIVE_PATH}/assets/styles/page-new.css` // or .scss
    )
  },