Extend Your Trellis WordPress Site with React – Part 1: Creating a Non-WordPress Sub-site

I have been using Roots Trellis, Bedrock and Sage tools for building WordPress sites for a few years now. The learning the technology although it felt like quite a steep learning curve at the start has paid itself back tenfold both in teaching how to creating industry quality websites and how to rocket web development and deployment.

With an aspiration to build a series of sub-sites branching off from elvinos.uk, I wanted to see if I could extend the capabilities of my server; simultaneously hosting my Trellis configured WordPress site and a React Node.js application (or any node.js app for that matter). After spending a lot of time searching, I struggled to find much good literature on the subject. On both adding additional non-Wordpress sub-sites to Trellis and creating and hosting react on the local and production Ubuntu servers which host my site. This article aims to pass on my learnings and maybe save a few others sometime when they try to do this.

I am going to assume that if you are reading this article that you already have a fully working Trellis/ Bedrock WordPress website up and running. I am going to give instructions for how I created elvinos.uk , however, when you re following along make sure you replace the credentials with your subs-time name.

New Trellis Site Folder

We are going to be creating a new sub-site side by side with our other WordPress website. Traditionally a Trellis folder structure is as follows:

.
|-- elvinos.uk
|
|----- site
|      |...
|
|
|----- Trellis
      |...

We are going to add a new folder named something identifiable, in my case blockchain:

.
|-- elvinos.uk
|
|----- site
|      |...
|
|----- blockchain
|      |...
|
|
|----- Trellis
      |...

The blockchain folder is where we are going to store all the project files an build ours react app. Inside here we want to add a composer .json file to aid configuration at the site folders root, in my case, this is the blockchain folder.

{
  "name": "Blockchain Subsite",
  "type": "Blockchain Project",
  "description": "A Blockchain website",
  "keywords": ["Blockchain"],
  "homepage": "https://github.com/elvinos/",
  "license": "MIT”,
   “config": {
    “preferred-install”: “dist"
  },
  "require": {
  }
}

You may want to add an index.html file to this folder for testing to check that the site’s setup. As standard Trellis points NGINX to a web folder, so you will need to add this to the site and place your index.html file In here first if you want to check your setup (don’t worry you can always change this later)

Updating group_vars

Next we need to update group_vars to add our new sub-site.

Update trellis/group_vars/production.yml:

block.elvinos.uk:
  site_hosts:
    - canonical: block.elvinos.uk
  local_path: ../blockchain # path targeting local Bedrock site directory (relative to Ansible root)
  site_install: false # Prevents wordpress from install
  db_create: false # Stops a wordpress database being configured
  ensure_wordpress: false 
  wp_installed: false
  repo: git@github.com:elvinos/elvinos.uk.git # replace with your Git repo URL
  repo_subtree_path: blockchain # relative path to your Bedrock/WP directory in your repo
  subtree_path: blockchain
  branch: master
  multisite:
    enabled: false
  ssl: #Lets use Trellis to add HTTPS to our new subsite
    enabled: true
    provider: letsencrypt
  cache:
    enabled: false
    duration: 30s

This code is appended to the bottom of the file, using the same indentation as the other site. Along with the local path, the most important lines are:

site_install: false # Prevents WordPress from the install
  db_create: false # Stops a wordpress database being configured
  ensure_wordpress: false 
  wp_installed: false

These try to prevent Trellis from running code that setups and install WordPress on the new sub-site. We will do the same for trellis/group_vars/development.yml:

block.elvinos.uk:
  site_hosts:
    - canonical: block.elvinos.uk
      redirects:
        - www.block.elvinos.uk
  local_path: ../blockchain # path targeting local Bedrock site directory (relative to Ansible root)
  admin_email: admin@elvinos.uk
  site_install: false
  db_create: false
  ensure_wordpress: false
  multisite:
    enabled: false
  ssl:
    enabled: false
    provider: self-signed
  cache:
    enabled: false

Finalize.yml

Next, we need to get a little more “hacky” to help enforce that WordPress is not installed. Go to trellis/roles/deploy/tasks/finalize.yml and add project.ensure_wordpress | default(true):

---
- include_tasks: "{{ include_path }}"
  with_items: "{{ deploy_finalize_before | default([]) }}"
  when: project.ensure_wordpress | default(true) #### ADD THIS LINE
  loop_control:
    loop_var: include_path
  tags: deploy-finalize-before

- name: Finalize the deploy
  deploy_helper:
    current_path: "{{ project_current_path }}"
    path: "{{ project_root }}"
    release: "{{ deploy_helper.new_release }}"
    state: finalize
    keep_releases: "{{ project.deploy_keep_releases | default(deploy_keep_releases | default(omit)) }}"

- include_tasks: "{{ include_path }}"
  with_items: "{{ deploy_finalize_after | default([]) }}"
  when: project.ensure_wordpress | default(true) #### ADD THIS LINE
  loop_control:
    loop_var: include_path
  tags: deploy-finalize-after

- debug:
    msg: "{{ project_version }}@{{ git_clone.after | truncate(7, True, '') }} deployed as release {{ deploy_helper.new_release }}"

This will try to prevent the WordPress setup tasks from being run. We can also add this to the build-before.yml tasks. Note this was being a bit temperamental when I last tested it.

Update Server to New Sub Domain

The final part of the configuration is to add a subdomain to our server. On Digital Ocean, and this is very simple.

  1. Login into Digital Ocean
  2. On your server, click the more button then add a domain
  3. Click on your domain name
  4. Now a new A record with the hostname being your new subdomain.

My configuration looks like this:

Re-Provision and Deployment

Finally, now everything has been configured and setup, we can re-provision both our local and production servers to host the new sub-site, Note: you will need to have committed the changes we have made here via git

  • Local: go to the trellis directory and run vagrant provision.
  • Production:
    • Provision your production server again in trellis directory run ansible-playbook server.yml -e env=production
    • Deploy new subset with ./bin/deploy.sh production block.elvinos.uk

And that’s it; you should now be able to access your subset locally and online! In part 2 I will be adding a node.js React server to our new sub-site!

This next part in this series will discuss how to add React to our new sub-site.

Thanks for reading!

Join the Mailing List

Get the latest blog posts delivered straight to your inbox