Oliviercreativ / wp-vue-boilerplate

Boilerplate project for development envioronment with VueJS & Wordpress Headless CMS.

VueJs + Wordpress Headless Boilerplate

---

VueJs + Wordpress Headless Boilerplate is a project template for building fast, robust, and adaptable web apps or sites based on VueJS for the front-end & Wordpress as Headless CMS for the back-end.

This project is the product of lecture on Zoom, in Hebrew language.

Recording Video of the lecture on Youtube

Source files: https://github.com/Mosharush/wp-vue-boilerplate

Quick start

• Clone the git repo — git clone https://github.com/Mosharush/wp-vue-boilerplate.git
• Open the project with your favorite IDE — ex: codium wp-vue-boilerplate
• Install all dependencies with Yarn — yarn install
• Start All dev servers (include Dockers services) — yarn start:all
• All is ready! Go to http://localhost to view your app or Go to your WordPress Admin Dashboard.

Features

• A finely-tuned starter template to development End-to-End Web application.

• A Starter build of VueJs App integration with WordPress Headless.

• Docker for servers virtualization and quick startup.

• Nginx Reverse Proxy Server & Configs For serve WordPress & VueJS apps both on same port and one origin (CORS).

  • SSL Support on local machine.

• MySQL Server For a local DataBase to store WordPress data.

  • PhpMyAdmin Web-App to access MySQL Data via GUI.

• wp-content directory volume access included A headless plugin to write your custom code to integrate with WordPress Hooks and more...

  • Feature Ongoing: wp-config.php manipulate.

• An example global Yarn (worksapces) package.json file with commands built in to jumpstart application development

Commands

Install all dependencies with Yarn (not NPM, we using Yarn workspaces)

yarn install

• Post install action: we generate a SSL certificate for localhost domain to support https connections. you can change the registered domains on nginx/ssl/v3.ext file and run generate yarn generate:ssl

Start All Servers:

yarn start:all

Start Only Docker Services with Docker Compose:

yarn start:docker

Start Only Vue App Dev Server (HMR):

yarn start:client

Contributing

Hundreds of developers have helped to make the HTML5 Boilerplate. Anyone is welcome to contribute, however, if you decide to get involved, please take a moment to review the guidelines:

• Bug reports
• Feature requests
• Pull requests

License

The code is available under the MIT license.