Design Process
of React-GraphQL App
Consuming Virta REST API
Mustafa Enes Ertarhanacı
Senior Front-End Developer
Contents
- Demo - End Result
- Initial thoughts
- API (Node - GraphQL)
- Front-end (React - Apollo)
- Production (Docker - DigitalOcean)
Demo 🚀
Initial Thoughts
API
NODE - GRAPHQL
Node.js as the runtime
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7836777/pasted-from-clipboard.png)
Express makes spinning up a simple http server so easy
API
NODE - GRAPHQL
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7836777/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7837120/pasted-from-clipboard.png)
Provided GraphQL API by using an Express middleware
API
NODE - GRAPHQL
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7836777/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7836894/pasted-from-clipboard.png)
GraphQL
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7837120/pasted-from-clipboard.png)
Some other Express middlewares
API
NODE - GRAPHQL
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7836777/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7837120/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7836894/pasted-from-clipboard.png)
cors()
morgan()
GraphQL
Nodemon handles auto-refreshing
API
NODE - GRAPHQL
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7836777/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7837000/pasted-from-clipboard.png)
+
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7837120/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7836894/pasted-from-clipboard.png)
cors()
morgan()
GraphQL
TypeScript as a safety belt
API
NODE - GRAPHQL
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7836777/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7836894/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7837000/pasted-from-clipboard.png)
+
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7836150/pasted-from-clipboard.png)
TypeScript
GraphQL
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7837120/pasted-from-clipboard.png)
cors()
morgan()
Front-end
REACT - APOLLO
React
Using React for the UI was a requirement
Front-end
REACT - APOLLO
React
I picked "create-react-app" to do so
Front-end
REACT - APOLLO
React
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7836138/pasted-from-clipboard.png)
Styled-components is a good companion to React components
Front-end
REACT - APOLLO
React
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7836138/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7836146/pasted-from-clipboard.png)
Apollo looked like a balanced choice for a GraphQL client
Front-end
REACT - APOLLO
React
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7836138/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7836146/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7836150/pasted-from-clipboard.png)
TypeScript
TypeScript is my favorite way of taming the JavaScript and ensuring type safety
Front-end
REACT - APOLLO
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7836138/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7836146/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7836150/pasted-from-clipboard.png)
TypeScript
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7838121/pasted-from-clipboard.png)
React
Testing
Library
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7838128/pasted-from-clipboard.png)
Jest
DOM
Helpers
React Testing Library encourages decoupling of tests from inner workings of implementations
React
Production
Let's minify the representations and visualise the environments. First, development
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7837337/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7836894/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7837397/pasted-from-clipboard.png)
DEVELOPMENT
:3000
:4000
https://api.virta
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7837000/pasted-from-clipboard.png)
DOCKER - DIGITALOCEAN
Production
I thought containerizing the parts and having docker-compose manage them in production would be neat
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7837337/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7836894/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7837397/pasted-from-clipboard.png)
:3000
:4000
https://api.virta
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7836777/pasted-from-clipboard.png)
PRODUCTION
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7837441/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7837000/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7837397/pasted-from-clipboard.png)
https://api.virta
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7837337/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7836894/pasted-from-clipboard.png)
DEVELOPMENT
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7837763/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7837763/pasted-from-clipboard.png)
web
graphql
:80
DOCKER - DIGITALOCEAN
Production
At this point, I decided to use DigitalOcean, as it provides better support for deploying docker-compose (compared to Heroku)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7837337/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7836894/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7837397/pasted-from-clipboard.png)
:3000
:4000
https://api.virta
PRODUCTION
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7837000/pasted-from-clipboard.png)
DEVELOPMENT
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7836777/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7837441/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7837397/pasted-from-clipboard.png)
https://api.virta
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7837337/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7836894/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7837763/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7837763/pasted-from-clipboard.png)
web
graphql
:80
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7837811/pasted-from-clipboard.png)
DOCKER - DIGITALOCEAN
Production
DOCKER - DIGITALOCEAN
I used a separate repo (Hub) to configure production environment. i.e.: docker-compose and nginx configs, deploy scripts
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7837337/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7836894/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7837397/pasted-from-clipboard.png)
:3000
:4000
https://api.virta
PRODUCTION
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7837000/pasted-from-clipboard.png)
DEVELOPMENT
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7836777/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7837441/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7837397/pasted-from-clipboard.png)
https://api.virta
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7837337/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7836894/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7837763/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7837763/pasted-from-clipboard.png)
web
graphql
:80
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7837811/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7837763/pasted-from-clipboard.png)
Hub.git
Production
I didn't set up a CI/CD pipeline for this repo. So, I used ssh and git to pull changes to DO whenever I needed
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7837337/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7836894/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7837397/pasted-from-clipboard.png)
:3000
:4000
https://api.virta
PRODUCTION
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7837000/pasted-from-clipboard.png)
DEVELOPMENT
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7836777/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7837441/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7837397/pasted-from-clipboard.png)
https://api.virta
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7837337/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7836894/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7837763/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7837763/pasted-from-clipboard.png)
web
graphql
:80
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7837811/pasted-from-clipboard.png)
$ ssh; git pull
DOCKER - DIGITALOCEAN
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7837763/pasted-from-clipboard.png)
Hub.git
Production
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7837337/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7836894/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7837397/pasted-from-clipboard.png)
https://api.virta
PRODUCTION
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7837000/pasted-from-clipboard.png)
DEVELOPMENT
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7836777/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7837441/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7837397/pasted-from-clipboard.png)
https://api.virta
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7837337/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7836894/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7837763/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7837763/pasted-from-clipboard.png)
web
graphql
:80
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7837811/pasted-from-clipboard.png)
$ ssh; git pull
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7838055/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7838063/pasted-from-clipboard.png)
$ git push
$ npm run test;
$ ssh;
$ ./deploy_react
.travis.yml
But I wanted to set up pipelines for the project codebases
DOCKER - DIGITALOCEAN
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7840038/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/764403/images/7837763/pasted-from-clipboard.png)
Hub.git
Design Process of React-GraphQL App
By mustastum
Design Process of React-GraphQL App
Presentation showing how I implemented a React-GraphQL web application to show "EV charging stations", using various technologies.
- 257