WordPress GraphQL API Example was published some time ago and now it is about time to open source a web app that consumes this API! The app was prepared using React with Apollo:

universal-react-apollo-example

All steps needed to be taken to set up the project are explained in Readme in the repo. This article will focus on the idea behind.

Why?

We published this repo to complement server-side part of the project with client side. Now, you can launch end-to-end application written for GraphQL.

The application was written to give you the view how to use GraphQL, but also to provide the full set-up both for development and production environment. The idea is to write some stories in the future to explain intricacies of the app and the current set-up.

Development vs Production Mode

As we mentioned, we created two application modes:

development

production

List of differences between development and production mode:

— development

the page is rendered on the server side

hot module replacement is switched on, so you can develop the website almost in real time :)

bundling and no minification of own code

bundling and minification of vendor code

— production

the page is rendered on the server side

bundling and minification of all code

Optimizing Webpack for Development Mode

We optimized also Webpack in development mode. We assume that you know basics of it and at least its purpose. If not, we recommend this source. Short FAQ:

What are Webpack incremental builds?

Incremental builds are executed every time when we change something in our code (watch mode). Webpack detects our changes and refreshes the browser or apply changes instantly thanks to Hot Module Replacement.

When are Webpack incremental builds slow?

Most of Webpack configurations that we saw bundle vendor code together with developer code. It is not a bad practice when there is a small number of dependencies. If the situation is to the contrary, then, the more external dependencies we have, the longer incremental builds.

How can we optimize Webpack incremental builds?

There are a lot of ways to do so, however, two main ways are:

We have chosen the second option, because it gives us a possibility to set-up a separate webpack build for vendor code and in every time we can decide to uglify and minimize vendor code. Webpack configuration for vendor code is defined in the project in: `webpack/dll.js` and run by `npm run build:dll`.

What further

We will try to describe intricacies of the app in more detail, however, we would highly appreciate if someone else want to help us. The reason is that we are quite busy with creating a new GraphQL integration for one of the biggest e-commerce platforms, so please be patient.