WARNING: PICTURE HEAVY Mobile wildlife stay safe!
For us Windows PC Master race individuals everything’s harder then those Apple Heathens have it… Although we may not realize it at first, Windows does this not to frustrate us, but to help us in understanding more about ourselves and our roles in the universe.
In this tutorial you will take my hand and together walk through setting up the node-js-api-starter, Docker, and have you making queries against your local Relay Modern compliant Nodejs GraphQL backend. In the future we will connect this to a frontend and create a working application ready to scale to infinity with Google Cloud Platform.
If your like me and dun read that good, I also made a video of this tutorial:
Prerequisite Yarn (optional)
Prerequisite VSCode (optional)
As of 9/10/2017 this is arguably the best code editor out right now (I assume Webstorm users are to good for tutorials and probably only look at source code keeping them away from this statement)
Here are my personal extensions that I would recommend:
Do you know of one I should have? Let me know in the comments!
My VSCode Settings:
“editor.fontFamily”: “Fira Code”,
“workbench.colorTheme”: “Dark (Monokai)”,
Prerequisite Docker (Required)
Go to Dockers website to download it:
Select the operating system (Windows)
Select Get Docker
When your download is complete launch the exe
If you get the below pop up click Install anyway, you will then be asked to allow permissions by Windows.
Let it install. After it is complete and you click close you will be asked to restart your computer
After restarting, click the Docker for windows exe it created on your desktop (or find it in the start menu).
IF this is your first time installing Docker you will get a pop up like below saying it requires Hyper-V to run. YOU NEED THIS So click Install & Restart (this should be the last time you need to restart)
Next Create a folder for where you want to download the repository to.
We will create a root folder to put our backend and our Frontend(not in this tutorial) inside to keep things organized
- Your Application
|- Frontend (coming soon…)
|- Backend (nodejs-api-starter)
For this example I named my app split-application. You can do whatever
Next open VSCode and open the folder we just created
Now lets clone the nodejs-api-starter repository
Copy the code below
git clone https://github.com/kriasoft/nodejs-api-starter.git example-api
New cloner tip: At the end where it says example-api, what this does is renames your cloned repository to that name (you could put whatever you want here, but it is recommended you do -api at the end so you and others know its for your backend. Also no spaces)
Open up your console (either your own command window or the one built into VSCode works to)
Change directories to the folder you had just created using the cd command.
Example: My folder path
Then inside there paste the clone command
I hope it looks like this for you
Now we will do the Windows 10 fix. Right now if you were to run this project on your computer and edit one of the files, your server would NOT rebuild and refresh. This means you would have to cancel the process and restart it for every change(I am WAY to impatient to do that, and you should be to).
Here is how we fix it:
COPY the docker-compose.xml file and paste it back into your folder (so it sits next to the oringal)
RENAME that file to docker-compose.override.yml
Delete all the lines in this file except for version: ‘3’, services, api, and environment like below
and THEN add the following line under environment (Above image has this command) NOTE spacing matters
You can now Save and close the file
Right click the Docker icon in the bottom right corner and select Settings
Go to Shared Drives, and then Select the drive you created your project folder in (Remember myn was in Z).
Clicking apply will restart Docker which may take a few seconds
NOTE: After clicking Apply you may be prompted to type the password for your computer (you have to do this for Docker to get access to it)
Now we can go back to our console (Make sure it is in your cloned repo path — example-api ) and paste the following command.
Note: It will take a few minutes for everything to get setup at first
This will launch Docker containers with the Node.js API app running inside and install some packages
If everything went alright it should look like this at the end and you can see Node.js API server is listening on http://api:8080/
Next we will open a new console tab
Cd into the example-api directory (the name of your cloned repo) and paste the following line
yarn docker-db-seed// OR with npm if you dont have Yarn yet (hint: you should)npm run docker-db-seed
I hope yours looks something like this
Now we can get to the fun part. Open up localhost:8080/graphql and start typing out a query. Don’t worry about not knowing the structure of the data, you can find it out by just playing around in it. The type checking is AMAZING!
The query you build here is something you would take and place in your frontend Relay Modern code. It holds a GraphQL query (along with doing alot more). When your application needs that data, Relay then sends its request to the server and asks for its data (where GraphQL is. Relay ONLY asks for the exact data that it needs). GraphQL gathers up all your applications queries into 1 and sends it to the database. The database returns all the data asked for + extra data that was not asked for (what normal APIs return), GraphQL picks out only the data it asked for and smacks the rest out of the databases hands to the ground and walks away laughing. GraphQL then gives the data to Relay. Relay can then do whatever it wants with the data, but normally gives it to React components.
If you want to know more about the backend schema you only have to look at the documentation explorer. A huge benefit to GraphQL is the GraphiQL interface to explore your code. You can navigate through your types and see all their content types (string, boolean, numbers, edges, sub types, etc)
We are now done and the backend is successfully set up.
In a future tutorial we will hook up a frontend to this and get data to React Components with Relay Modern.
After that we will move the project into the future of backends — Google Cloud Platform where we can build apps that scale to infinity and beyond without hiring a single person. If your app takes off be prepared for a big bill as running apps cost money… Always have a way to monetize in mind!