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.
- PostCSS(Tailwind)
- SCSS
- 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
- If using Local
- 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
-
[Local] Update domain suffix to avoid slow response
- 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
- Copy, and paste docker-compose.yml in this example
- Start WordPress
docker-compose up
- Create docker-compose.yml, and edit it
- If using Local
-
[Browser] Open WordPress and activate MPA Boilerplate theme
- If using Local
- If using Docker
- Move to project root
cd /path/to/mpa-boilerplate/
- Start WordPress
- If using Local
- [Local] Start local site
- If using Docker
docker-compose up
- If using Local
- Start development server
npm run dev
-
[Browser] Open site
- If using Local
- If using Docker
- Edit in src/ and public/
- Move to project root
cd /path/to/mpa-boilerplate/
- Output production files to dist/
npm run build
- 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>
- Update link tag
- 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 ) },
- Add new script entries and style entries to entry option