\n# 1) Install Gatsby CLI on local computer\nnpm install -g gatsby-cli\n\n# 2) Generate Gatsby starter site\ngatsby new frontend https:\/\/github.com\/gatsbyjs\/gatsby-starter-hello-world\n\n# 3) Remove the Gatsby git resources since we will use our git installation at the root of our project\nrm -rf frontend\/.git\nrm -rf frontend\/.gitignore\n\n# 4) Remove node_modules from local computer since we will be installing the node modules on the Docker frontend container\nrm -rf frontend\/node_modules\n\n# 5) Create our frontend Dockerfile script\ntouch frontend\/Dockerfile\n\n# 6) Create a directory for Nginx\nmkdir nginx\n\n# 7) Create a Dockerfile and nginx.conf files for Nginx\ntouch nginx\/Dockerfile\ntouch nginx\/nginx.conf\n\n# 8) Create a new Docker Compose files for production and development\ntouch docker-compose.yml\ntouch docker-compose-dev.yml\n\n# 9) Initialize git repository\ngit init\n<\/pre><\/div>\n\n\nThis is how our current directory structure should look:<\/p>\n\n\n\n
- todo_gatsby-django-graphene (directory root of the project)
- frontend (directory)
- Dockerfile<\/li><\/ul><\/li>
- nginx (directory)
- Dockerfile<\/li>
- nginx.conf<\/li><\/ul><\/li>
- server (the Django Graphene app we created in Part 1)<\/li>
- docker-compose.yml<\/li>
- docker-compose-dev.yml<\/li>
- .env <\/li>
- .gitignore <\/li>
- Makefile<\/li><\/ul><\/li><\/ul>\n\n\n\n
Populate Frontend Files<\/h4>\n\n\n\n
- Our goal is to build a todo application with Gatsby as our frontend which will interface with the Django Graphene server we built in Part 1 of this tutorial. We start by installing the Gatsby CLI on our local computer which is the main entry point for setting Gatsby up on our computer.<\/li>
- We created a new Gatsby project using the Gatsby Hello World starter site which we renamed to frontend<\/strong>.<\/li>
- When Gatsby generated its own git repo which we don’t need since we already have our git repo at the root of our project. We also deleted the .gitignore from the frontend<\/strong> directory.<\/li>
- Create our frontend<\/strong> Dockerfile to configure the Gatsby env.<\/li>
- Create a directory for nginx.<\/li>
- Create a nginx\/Dockerfile and nginx\/nginx.conf file to configure Nginx server for our production build.<\/li>
- Create two Docker Compose files, one for deploying our Gatsby build to nginx which will serve our site using SSR, (server side rendering)<\/a>, which comes with the Gatsby build.<\/li>
- Initialize our git repository for this project.<\/li><\/ol>\n\n\n\n
Lets begin by populating frontend Dockerfile.<\/p>\n\n\n\n
Frontend Dockerfile<\/h3>\n\n\n
\n# frontend\/Dockerfile\n\n# 1)\nFROM node:16-alpine\n\n# 2)\nEXPOSE 8000\n\n# 3)\nWORKDIR \/frontend\n\n# 4)\nRUN apk update && apk add python3 g++ make && rm -rf \/var\/cache\/apk\/*\n\n# 5)\nRUN npm install -g gatsby-cli\n\n# 6)\nCOPY . .\n\n# 7)\nRUN npm install\n\n# 8) Building Gatsby generating public directory that can be copied to Nginx service in production\nCMD [ "gatsby", "build" ]\n<\/pre><\/div>\n\n\n
- Using node:16-alpine image we build our node environment. I’m specifying node version 16 here because Gatsby requires a minimum of node 14 for Gatsby 3.14.4 which is the latest version at the time of writing this blog. I found that Gatsby <\/li>
- Open a port on the frontend container.<\/li>
- Set the working directory with the WORKDIR Docker command. Doing this in one of the first layers is very important otherwise when we run npm install Gatsby will be installed at the root of the container instead of the working directory frontend. When we try running Gatsby commands such as Gatsby build, an error will be thrown saying that Gatsby is not installed. Declaring the WORKDIR early fixes this problem.<\/strong><\/li>
- Since Node.js is built with node-gyp which is written in Python we need Python installed. You can read more about this Python requirement for GYP here<\/a>.<\/li>
- Install Gatsby CLI.<\/li>
- Copy the contents of the frontend directory on the host machine into the frontend container that we are building. Note that in step 3 when we set the working directory with WORKDIR, Docker creates the frontend directory for us and cd into the frontend directory so all the subsequent commands are executing in the frontend directory.<\/li>
- Install all the packages defined in the package.json file.<\/li>
- Using the Dockerfile CMD we define the default command to set Gatsby into production mode which will serve the production build from the \/www\/public.<\/li><\/ol>\n\n\n\n
Now we can build the frontend container:<\/p>\n\n\n
\ndocker-compose build frontend\n<\/pre><\/div>\n\n\n
Notes on How I Built the Gatsby Frontend Dockerfile<\/h5>\n\n\n\n
I was not able to find much documentation on how to use Docker with Gatsby. Some of the Dockerfile solutions I did find didn’t work for me. I did find one solution by Ari Palo<\/a> that did work but seemed a bit complex so I decided to write my own with the intention of serving the Gatsby build with Nginx as a separate service.<\/p>\n\n\n\n
Building this Dockerfile was the most challenging part of this tutorial for me. I ran across many gotchas in the process. For example, Gatsby 3.14.4 will not work with the latest version of Node hence my use of node 16 which is compatible with Gatsby 3.14.4. As Gatsby keeps evolving this will probably change in the future.<\/p>\n\n\n\n
Trouble Shooting Tips!<\/h4>\n\n\n\n
What proved invaluable for me in developing and sifting out all the errors was to use the Docker exec<\/strong> command to gain shell access to the frontend container and run each of the commands above in the shell of the container. This is the command I used to gain shell access to the running frontend container:<\/p>\n\n\n
\ndocker exec -it frontend ash\n<\/pre><\/div>\n\n\n
Running the commands manually in the container allowed me to catch two subtle issues that docker-compose logs<\/strong> frontend<\/strong> for the frontend container missed:<\/p>\n\n\n\n
- The WORKDIR command has to run in one of the first layers so Gatsby will install in the frontend directory as opposed to the root of the container.<\/li>
- While running npm install I would get the error that node-gyp could not find Python so I needed to install Python before<\/strong> running npm install.<\/li>
- Manually running gatsby build<\/strong> directly in the container flagged two issues
- Gatsby requiring a minimum of node 14 for this version of Gatsby thus I was able through trial and error find the most recent version of node alpine that is compatible with Gatsby.<\/li>
- Gatsby was not installed in the working frontend directory.<\/li><\/ol><\/li><\/ol>\n\n\n\n
As I mentioned earlier, as Gatsby continues to evolve the issues I encountered will change so if you, dear reader, in the process of following this tutorial in the future run into problems, I encourage you to start with a bare bones version of a Dockerfile and manually run the each command incrementally so you can catch the errors as they occur with more verbose documentation than docker-compose logs frontend<\/strong> might give you.<\/p>\n\n\n\n
Here’s an example of a bare-bones Dockerfile to begin with:<\/p>\n\n\n
\nFROM node:16-alpine\n\nEXPOSE 8000\n\nWORKDIR \/frontend\n\nCMD tail -f \/dev\/null\n<\/pre><\/div>\n\n\n
Note the CMD tail -f \/dev\/null<\/strong> command. If we don’t have a Docker command specified the container will build itself and shut itself down so using CMD tail -f \/dev\/null<\/strong> keeps the container up and running allowing us shell access.<\/p>\n\n\n\n
From here spin up the container and start manually running subsequent commands such as installing python, installing gatsby-cli, etc.<\/p>\n\n\n
\ndocker-compose -f docker-compose.yml -f docker-compose-dev.yml up -d\n\n# gain shell access to the container\n# docker exec -it [name of container] ash\ndocker exec -it frontend ash\n<\/pre><\/div>\n\n\n
Once we are able to hit Gatsby’s development frontend with http:\/\/localhost:8000<\/a> we can move on with building the Nginx service which will serve our Gatsby production build.<\/p>\n\n\n\n
Nginx Dockerfile<\/h5>\n\n\n
\n# nginx\/Dockerfile\n\n# 1)\nFROM nginx:alpine\n\n# 2)\nEXPOSE 80\n\n# 3)\nCOPY nginx.conf \/etc\/nginx\/conf.d\/default.conf\n<\/pre><\/div>\n\n\n
- We pull the nginx alpine image to build the Nginx service<\/li>
- Expose port 80 of the Docker container<\/li>
- Copy our nginx.conf file to the Docker container’s nginx conf.d directory where we tell Nginx where to serve the frontend build files from<\/li><\/ol>\n\n\n\n
Configure Nginx<\/h5>\n\n\n
\n# nginx\/nginx.conf\n\nserver {\n root \/frontend\/public;\n\n location \/ {\n index index.html;\n }\n}\n<\/pre><\/div>\n\n\nNext we update docker-compose.yml with our new frontend:<\/p>\n\n\n\n
Docker Compose<\/h5>\n\n\n
\n# docker-compose.yml\n\nversion: '3'\n \nservices:\n database:\n container_name: postgres\n image: postgres:latest\n environment:\n - POSTGRES_DB=$DATABASE_NAME\n - POSTGRES_USER=$DATABASE_USER\n - POSTGRES_PASSWORD=$DATABASE_PASSWORD\n - POSTGRES_PORT=$DATABASE_PORT\n volumes:\n #- .\/server\/initial.sql:\/docker-entrypoint-initdb.d\/initial.sql\n - .\/server\/db_backups\/backup.sql:\/docker-entrypoint-initdb.d\/backup.sql\n - postgres-data:\/var\/lib\/postgresql\/data\n \n server:\n build: .\/server\/\n container_name: dj02\n working_dir: \/var\/www\/server\n ports:\n - '$SERVER_PORT:$SERVER_PORT'\n volumes:\n - .\/server\/:\/var\/www\/server\n command: python manage.py runserver 0.0.0.0:$SERVER_PORT\n environment:\n - DJANGO_SETTINGS_MODULE=$DJANGO_SETTINGS_MODULE\n - PGHOST=$DATABASE_HOST\n env_file:\n - .env\n depends_on:\n - database\n\n \n # 1)\n frontend:\n # 2)\n build:\n context: .\/frontend\n dockerfile: Dockerfile\n # 3)\n ports:\n - 8000:8000\n # 4)\n volumes:\n - .\/frontend\/:\/frontend\n # 5)\n container_name: frontend\n # 6)\n depends_on:\n - server\n\nvolumes:\n postgres-data:\n<\/pre><\/div>\n\n\n
With our additions we are defining the frontend service for the development mode of our project.<\/p>\n\n\n\n
- Name of service.<\/li>
- Tell docker-compose where the Dockerfile is for the frontend service.<\/li>
- Map the outside port 8000 to port 8000 the container’s port.<\/li>
- Map the \/frontend files from the frontend container onto our host machine which allows us to edit and save files from our host machine dynamically updating the files in the frontend container and triggers a browser hot-reload.<\/li>
- Give the container the name frontend<\/li>
- Using depends_on tell the frontend to wait for the server to finish launching<\/li><\/ol>\n\n\n\n
Development Docker Compose Override<\/h5>\n\n\n\n
To run Gatsby in development mode we override the docker-compose file with the docker-compose-dev file.<\/p>\n\n\n
\n# docker-compose-dev.yml\nversion: '3'\n\nservices:\n frontend:\n # 1)\n command: gatsby develop --host 0.0.0.0 --port 8000\n<\/pre><\/div>\n\n\n
- The command: develop –host 0.0.0.0 –port 8000 sets Gatsby in development mode<\/li><\/ol>\n\n\n\n
Booting Up the Development Environment for Gatsby Frontend<\/h4>\n\n\n\n
To bring Gatsby up in development mode we need only run:<\/p>\n\n\n
\ndocker-compose -f docker-compose.yml -f docker-compose-dev.yml up\n<\/pre><\/div>\n\n\n
… which should allow you to hit http:\/\/localhost:8000<\/a> to view the frontend index page.<\/p>\n\n\n\n
If you were to edit the copy in the frontend index.js file:<\/p>\n\n\n
\nvi frontend\/src\/pages\/index.js\n# Edit the copy, close and save\n<\/pre><\/div>\n\n\n
The changes should show up immediately in the browser without having to do a manual refresh of your browser. Is this not cool?<\/p>\n\n\n\n
You should also be able to access the backend server we built in Part 1 at http:\/\/localhost:5555\/admin:<\/p>\n\n\n\n
![\"\"](\"http:\/\/10.0.0.14\/wp-content\/uploads\/2020\/10\/django_admin_pt2-1024x636.png\")
<\/figure>\n\n\n\nIf you get an error on this page or you can’t log in you need to run Django migrations and create a super user:<\/p>\n\n\n\n
![\"\"](\"http:\/\/10.0.0.14\/wp-content\/uploads\/2020\/06\/initial_bootup_error.jpg\")
<\/figure>\n\n\n\ndocker-compose run server .\/manage.py makemigrations\ndocker-compose run server .\/manage.py migrate\ndocker-compose run server .\/manage.py createsuperuser\n<\/pre><\/div>\n\n\n
Booting Up the Production Environment for Gatsby Frontend and the Django Backend Server<\/h4>\n\n\n\n
To boot up, build and deploy run:<\/p>\n\n\n
\ndocker-compose build frontend\ndocker-compose up -d\n<\/pre><\/div>\n\n\n
This command invokes the frontend Dockerfile which will run the Gatsby build command to compile the site into files that can be delivered to a web browser later.<\/p>\n\n\n\n
You should be able to access the production version being served by Nginx at http:\/\/localhost:8080.<\/p>\n\n\n\n
As well you should be able to access the Django server as well at http:\/\/localhost:5555\/admin.<\/p>\n\n\n\n
To power down the production environment run:<\/p>\n\n\n
\ndocker-compose down\n<\/pre><\/div>\n\n\n
Trouble Shooting<\/h4>\n\n\n\n
If you have trouble booting up all the docker services successfully with docker-compose up -d<\/strong> or the development override command docker-compose -f docker-compose.yml -f docker-compose-dev.yml up -d<\/strong> you can always try booting up each service separately because sometimes the Docker Compose depends_on attribute doesn’t always work so the server may boot up before Postgres service is ready to accept connections.<\/p>\n\n\n
\ndocker-compose up -d database\ndocker-compose up -d server\ndocker-compose up -d nginx\n\n# for the Gatsby development server\ndocker-compose -f docker-compose.yml -f docker-compose-dev.yml up -d\n<\/pre><\/div>\n\n\n
After running these commands you should be able to hit each of the different services this app is using via the browser:<\/p>\n\n\n\n
- Production frontend: http:\/\/localhost:8080<\/a><\/li>
- Development frontend, (if using the docker compose override): http:\/\/localhost:8000<\/a><\/li>
- Django admin: http:\/\/localhost:5555\/admin<\/a><\/li>
- Django graphql playground: http:\/\/localhost:5555\/graphql<\/a><\/li><\/ul>\n\n\n\n
Since the docker compose commands are a bit cumbersome we can populate our Makefile with shortcut commands for development and production processes:<\/p>\n\n\n
\n# Makefile\n\ndev:\n docker-compose up -d \n\nprod:\n docker-compose -f docker-compose.yml -f docker-compose-prod.yml up -d\n\nprod-down:\n docker-compose down --remove-orphans\n\n# Production Build\nprod-build:\n docker-compose -f docker-compose.yml -f docker-compose-prod.yml build\n<\/pre><\/div>\n\n\n
Now if we want to boot up the production environment we need only run:<\/p>\n\n\n
\nmake prod\n<\/pre><\/div>\n\n\n
To power down simply:<\/p>\n\n\n
\nmake prod-down\n<\/pre><\/div>\n\n\n
To power up the development environment we run:<\/p>\n\n\n
\nmake dev\n<\/pre><\/div>\n\n\n
To power down the development environment:<\/p>\n\n\n
\nmake dev-down\n<\/pre><\/div>\n\n\n
Now that we have both development and production environments for Gatsby operational as well as the Django Graphene server operational — we can push on to the actual development of building out our frontend user interface.<\/p>\n\n\n\n
How do we know we haven’t broken anything with our server while setting up our frontend development environment. We could manually test the Django admin, and \/ or run ALL the Django queries and mutations in Django’s GraphiQL UI. Ugh!<\/p>\n\n\n\n
Testing the Django Graphene Server<\/h4>\n\n\n\n
But have we broken anything in the backend in the process of building the frontend? Easy enough to find out. We need only to run our unit tests.<\/p>\n\n\n
\ndocker-compose run server pytest\n<\/pre><\/div>\n\n\n
Voila! Our tests will tell us what and where if we have any failing tests. In my case all my tests passed. This gives me enormous confidence moving forward with the development of our frontend site.<\/p>\n\n\n\n
We will continue in our next chapter using TDD for Gatsby.<\/p>\n\n\n\n
- Development frontend, (if using the docker compose override): http:\/\/localhost:8000<\/a><\/li>
- Production frontend: http:\/\/localhost:8080<\/a><\/li>
- The command: develop –host 0.0.0.0 –port 8000 sets Gatsby in development mode<\/li><\/ol>\n\n\n\n
- Manually running gatsby build<\/strong> directly in the container flagged two issues
- Since Node.js is built with node-gyp which is written in Python we need Python installed. You can read more about this Python requirement for GYP here<\/a>.<\/li>
- When Gatsby generated its own git repo which we don’t need since we already have our git repo at the root of our project. We also deleted the .gitignore from the frontend<\/strong> directory.<\/li>
- frontend (directory)