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

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

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
  • 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
          )
        },
⚠️ **GitHub.com Fallback** ⚠️