Behind the scenes setup for https://resurf.com/

Readme.md

Architecture

Resurf is made of two sites, a wordpress backend, in the wp folder, and a node/express frontend, located in the site folder.

The backend is a standard wordpress site, managed by composer, where wordpress is set to be installed in public/wp (there is an .htaccess file which rewrites the "wp" part of the url away). The wp-graphql plugin is installed which exposes wordpress through a graphql api.

The entry point of the node frontend is site/server.js. graphql-yoga is used to set up a graphql server over express. http-proxy-middleware to proxy parts of wordpress to be exposed throught the frontend (such as wp-admin, etc.). The proxy assumes that wordpress is running on http://wp

Finally, one nuxt nuxt application is setup per theme. The code for each nuxt app is in site/themes. The app to be rendered is determined based on the hostname. There is a manual mapping of subdomains to the application to render.

The nuxt apps use apollo to get information from the wp graphql api (exposed locally via the proxy) and the local graphql server from graphql-yoga

Local environment

The local environment is managed with docker-compose running in a vagrant box. Each app (wp and site) have their own Dockerfile which sets up the infrastructure necessary for running them. The docker-compose file orchestrates everything by setting up 4 services

1. db: A standard mysql docker image, which mounts the folder dump as a volume, which has a multisites ready WP database setup.
2. adminer: is adminer docker image, and exposes itself on port 8080
3. wp: uses the Dockerfile in wp. Exposes port 1080 which is running mailcatcher, and links to db.
4. site: uses the Dockerfile in site. Exposes the node server (running on port 9500 in the container) as port 80, and port 9229, for the purposes of node debugging. Sets up link to wp service. In order not to actually have the server running, when docker-compose starts, the command is set to sleep infinity (docker/compose#1926 (comment))

There is an included vagrant box which has docker-compose installed and runs docker-compose when box is started.

The vagrant box exposes the root of the repo as ~/app, and sets that as the working directory when you SSH into the box. And if the hostsupdater plugin is installed, will automatically add local.resurf.com to your machine's hosts file.

Since the local environment is managed by vagrant, start it with vagrant up. This will start the database, wordpress and adminer servers.

To access local commands (such as npm or composer) you will need to access them through docker-compose, which means you need to be in the vagrant box, through vagrant ssh

For example, docker-compose exec wp composer install or docker-compose exec site npm start

Since the node server doesn't start right automatically, it must be started, as above, using docker-compose.

Deployment

The site is deployed using dokku and circleci. The circleci config detects which of the application has had a code change, and pushes to the respective remotes on the dokku server. On the dokku server, there is a custom network setup, and both applications are set to run on that network, using the docker-options configuration. The wp application is aliased on the network as wp so that it is accessable as http://wp (as mentioned above).