:pencil: updating readme | clarifying some language | trying to standardize .env names

README.md

@@ -9,47 +9,39 @@ 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>`
 
-#### mysql Dump
-1. On the production machine:
-```
-docker-compose exec -T craft-db mysqldump -u root -p current_cia | gzip > /home/<user_name>/backups/"`date +"%Y-%m-%d"`"-craftdb-backup.sql.gz
-```
-2. On your development machine: `rsync -av <user>@<host>:/home/<user>/<date>-craftdb-backup.sql.gz <local directory>`
-
--------------------------------
-
-### Node.js 12+
+### Node.js 14+
 
  * 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/)
 
+### Docker & docker-compose
+
+ * OSX: TBD
+ * Linux: TBD
+ * Windows: TBD
+  
 :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 vue-wp`
-3. Spin up those containers with `docker-compose up -d`
-4. Navigate to the theme directory with `cd vue-theme`
-5. Install dependencies: `npm install`
-6. Verify it runs: `npm run dev`, then check [http://localhost:8081](http://localhost:8081)
+3. Copy the `sample.env` file to `.env` and substitute the variables with your own
+4. Spin up the database and Wordpress containers with `docker-compose up -d`
+5. Use a web-browser to navigate to `http://localhost:8080` and complete the Wordpress installer
+6. After Wordpress installation is complete, with your terminal navigate to the theme directory `cd vue-theme`
+7. Install the theme dependencies: `npm install`
 
-After Installation Gotchas
---------------------------
+### Post-Installation Configuration
 
-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>`
+The initial Wordpress installation does *not* include any content or user data beyond the default, so we'll need to adjust some settings before we can use our custom theme.
 
+1. The vue-theme is NOT enabled. Please enable it in the wp-admin page under `Appearance > Themes`
+2. The custom plugins must be enabled for our theme to work. Please activate them in the wp-admin page under `Plugins`. You should activate `craft-endpoints`, `craft-post-types`, and `posts-to-posts`
+3. Wordpress' `API` is NOT turned on by default, so the vue-theme won't have anything to display. You will need to start the `API` with the instructions below.
 
-Activate Wordpress API
-----------------------
+### Activate Wordpress API
 
 1. Navigate to Settings > [Permalinks](http://localhost:8080/wp-admin/options-permalink.php)
 2. Click the 'Custom Structure' radio button
@@ -57,39 +49,46 @@ Activate Wordpress API
 4. Click 'Save Changes'
 5. Verify the API by [visiting the API endpoint](http://localhost:8080/wp-json/wp/v2/)
 
-
 :construction_site: Development
-------------------------------------
-
-Setup a staging server and initialize a bare git repo in the `/opt` directoru
+-------------------------------
 
+After the `API` is active double check your settings in the `.env` file like so..
 ```
-git init --bare /opt/vue-wp.git
+DB_PASSWORD=<change_me>
+WORDPRESS_DB_USER=<default_user>
+WORDPRESS_DB_PASSWORD=<change_me>
+DB_NAME=<current_db>
+IS_DEV=true
+
 ```
 
-Copy over the `post-receive` script from `./deployment` to `/opt/vue-wp.git/hooks` and make it executable with the command `chmod ug+x /opt/vue-wp.git/hooks/post-receive`
+Make sure `IS_DEV` is set to `true`. This is important.
 
-On your development machine, add the staging server as a remote...
+Currently the API uses `localhost`. This should be changed in production. 
 
-```
-git remote add staging <user>@<server_ip>:/opt/staging/vue-wp.git 
-```
+Set your directory owner to `www-data` with `docker exec -it craft-vue chown -R www-data:www-data ./wp-content` so your Wordpress container can write files
+
+Lastly, run `npm run dev` to start the development server. 
+
+If successful, it will tell you that it is running on `http://localhost:8081`
 
 :electric_plug: Deployment
 --------------------------
+Setup a staging server and initialize a bare git repo in the `/opt` directory
 
-When you get ready to deploy your app to an actual server, run `git push && git push staging` and things will get pulled and built on the staging server. 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
+git init --bare /opt/staging/craft-vue.git
 ```
 
-Lastly set your directory owner to `www-data` with `docker exec -it vue-wp chown -R www-data:www-data ./wp-content`
+Copy over the `post-receive` script from `./deployment` to `/opt/staging/craft-vue.git/hooks` and make it executable with the command `chmod ug+x /opt/staging/craft-vue.git/hooks/post-receive`
 
+On your development machine, add the staging server as a remote...
+
+```
+git remote add staging <user>@<server_ip>:/opt/staging/craft-vue.git 
+```
+
+When you are ready to get your app to the new server, run `git push && git push staging` and things will get pulled and built on the staging server. Sweet!
 
 :robot: CI/CD
 -------------
@@ -101,6 +100,21 @@ Included is a drone config, and some recommended steps to build.
 
 You also need to setup a `post-receive` hook on the host server.
 
-* On your *development* machine, add the target host as a remote `git remote add </opt/staging/js-vue.git> staging master`
-* Login to the *remote* machine and setup a bare git repo on `git init --bare </opt/staging/js-vue.git>`
-* Copy the `post-receive` hook file into the `</opt/staging/js-vue.git/hooks/>` directory
+* On your *development* machine, add the target host as a remote `git remote add </opt/staging/craf-vue.git> staging master`
+* Login to the *remote* machine and setup a bare git repo on `git init --bare </opt/staging/craf-vue.git>`
+* Copy the `post-receive` hook file into the `</opt/staging/craf-vue.git/hooks/>` directory
+
+:question_mark: Misc
+--------------------
+
+### Backup commands
+
+#### Uploads Directories
+1. On your development machine: `rsync -av <user>@<host>:/opt/vue-wp/uploads/ <local directory>`
+
+#### mysql Dump
+1. On the production machine:
+```
+docker-compose exec -T craft-db mysqldump -u root -p current_cia | gzip > /home/<user_name>/backups/"`date +"%Y-%m-%d"`"-craftdb-backup.sql.gz
+```
+2. On your development machine: `rsync -av <user>@<host>:/home/<user>/<date>-craftdb-backup.sql.gz <local directory>`

docker-compose.yml

@@ -14,13 +14,13 @@ services:
             - ./vue-theme:/var/www/html/wp-content/themes/vue-theme
             - ./uploads.ini:/usr/local/etc/php/conf.d/uploads.ini
         ports:
-            - "8080:80"
+            - 8080:80
         links:
             - craft-db:mysql
         environment:
-            WORDPRESS_DB_PASSWORD: "${WORDPRESS_DB_PASSWORD}"
-            WORDPRESS_DB_NAME: current_cia
+            WORDPRESS_DB_NAME: "${DB_NAME}"
             WORDPRESS_DB_USER: "${WORDPRESS_DB_USER}"
+            WORDPRESS_DB_PASSWORD: "${WORDPRESS_DB_PASSWORD}"
             IS_DEV: "${IS_DEV}"
 
     craft-db:
@@ -32,9 +32,9 @@ services:
         environment:
             MYSQL_ROOT_PASSWORD: "${DB_PASSWORD}"
             INNODB_FLUSH_METHOD: O_DSYNC
-            MYSQL_DATABASE: current_cia
             MYSQL_USER: "${WORDPRESS_DB_USER}"
             MYSQL_PASSWORD: "${WORDPRESS_DB_PASSWORD}"
+            MYSQL_DATABASE: "${DB_NAME}"
         volumes:
             - db:/var/lib/mysql
 

sample.env

@@ -1,4 +1,5 @@
-DB_PASSWORD=changeme
-WORDPRESS_DB_USER=default_user
-WORDPRESS_DB_PASSWORD=changemetoo
-IS_DEV=false
+WORDPRESS_DB_USER=root
+WORDPRESS_DB_PASSWORD=<change_me>
+DB_PASSWORD=<change_me>
+DB_NAME=<current_db>
+IS_DEV=true