Container Based Wordpress

Docker + Wordpress for SPEED

Vue.js for sanity

:tools: Requirements

Backup commands

Uploads Directories

1. On your development machine: rsync -av <user>@<host>:/opt/vue-wp/uploads/ <local directory>

MariaDb Container

1. On the production machine: docker commit -p d3346eb32de0 <snapshot_name>
2. On the production machine: docker save -o ~/<snapshot_name>.tar <snapshot_name>
3. On your development machine: rsync -av <user>@<host>:/home/<user>/<snapshot_name> <local directory>

---

Node.js 10+

• OSX: brew install node using Homebrew
• Linux: apt install nodejs (see Ubuntu/Debian specific instructions) or pacman -S nodejs (Arch Linux)
• Windows: Install

:gear: Installation

1. Clone repo: git clone ssh://git@gitea.yvvas.com:4022/craft-in-america/vue-wp.git
2. Get into the directory with cd craft-vue
3. Spin up those containers with docker-compose up -d
4. Navigate to the theme directory with cd cia-vue-theme
5. Install dependencies: npm install
6. Verify it runs: npm run dev, then check http://localhost:8081

After Installation Gotchas

1. Wordpress starts completely without any data so you’ll have to install it, name your dev site, create a login, etc.
2. The vue-theme is NOT enabled. Please enable it in the wp-admin page under Appearance > Themes
3. Wordpress’ API is NOT turned on by default, so the vue-theme won’t display anything.
4. Navigation, footers, and submenus are API driven. Navigate to the customize page and create main_nav, footer, and sub_nav_<insert-custom-type-here>

Activate Wordpress API

1. Navigate to Settings > Permalinks
2. Click the ‘Custom Structure’ radio button
3. Type in /%postname%/ in the text field
4. Click ‘Save Changes’
5. Verify the API by visiting the API endpoint

:construction_site: Where from here?

Now that your pipeline is in place, you can start writing your application. Start by modifying the entry point main.js and creating new .js files to store your other modules (which you’ll import from main.js).

A really great library to quickly prototype is Vue.js.

Directory Structure

In the src folder there will already be a base HTML page. Any other assets can be put in src or just create subfolders where you will import from (E.G. styles, scripts, assets, fonts, images, etc.). The structure is up to you.

Installing Dependencies

Search for packages: npm search <query>

Install packages (for production dependencies like d3, three.js, etc.): npm install <package> --save

Install packages(for dev dependencies like Jasmin, Protractor, etc.) npm install <package> --save-dev

npm uninstall <package>

install `

:electric_plug: Deployment

When you get ready to deploy your app to an actual server, run npm run build and things get compressed and tidied up into a public directory. Sweet!

Currently the API uses localhost. This should be changed in production. Set your passwords in the .env file like so..

DB_PASSWORD=<changeme>
WORDPRESS_DB_USER=root
IS_DEV=false

Lastly set your directory owner to www-data with docker exec -it vue-wp chown -R www-data:www-data ./wp-content