Web App built with React Apollo
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.
If you want to write a story for WeLikeGraphQL, do not hesitate to do this and contact us!
If you like this repo, please star it on GitHub and share your comments below. You can also follow this GitHub user.
