Container Based Wordpress
=========================

[![Build Status](http://gitea.yvvas.com:8000/api/badges/craft-in-america/vue-wp/status.svg)](http://gitea.yvvas.com:8000/craft-in-america/vue-wp)

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](http://brew.sh/)
 * Linux: `apt install nodejs` ([see Ubuntu/Debian specific instructions](https://nodejs.org/en/download/package-manager/#debian-and-ubuntu-based-linux-distributions)) or `pacman -S nodejs` (Arch Linux)
 * Windows: [Install](https://nodejs.org/en/download/)

: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](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](http://localhost:8080/wp-admin/customize.php?theme=vue-theme) and create `main_nav`, `footer`, and `sub_nav_<insert-custom-type-here>`


Activate Wordpress API
----------------------

1. Navigate to Settings > [Permalinks](http://localhost:8080/wp-admin/options-permalink.php)
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](http://localhost:8080/wp-json/wp/v2/)


: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](https://github.com/vuejs/vue).

### 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`

Uninstall packages:
`npm uninstall <package>`

: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`