Gatsby is a static site generator<\/em> built on React.<\/p>\n\n\n\n In this tutorial we will be building a Todo App using Gatsby, TDD (test driven development) and Docker.<\/p>\n\n\n\n Gatsby will be serving the frontend of our site but we also need an API for Gatsby to pull data from. For that we are going to use Django as our API. Using Django Graphene the API will serve Graphql end points for Gatsby to consume.<\/p>\n\n\n\n To get started we need to:<\/p>\n\n\n\n This is how our current directory structure should look:<\/p>\n\n\n\n Next we populate the frontend Dockerfile with instructions on how to build the Gatsby image.<\/p>\n\n\n\n Next populate the Nginx Dockerfile.<\/p>\n\n\n\n Before we can build our frontend Gatsby image we need to update the docker-compose.yml file populated.<\/p>\n\n\n\n With the docker-compose.yml file we are defining the backend service infrastructure (database and server) which we built in part I of this tutorial as well as our new frontend Gatsby service.<\/p>\n\n\n\n Lets look at the frontend service in detail:<\/p>\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 With <\/p>\n","protected":false},"excerpt":{"rendered":" What is Gatsby JS? Gatsby is a static site generator built on React. In this tutorial we will be building a Todo App using Gatsby, TDD (test driven development) and Docker. Gatsby will be serving the frontend of our site… Continue Reading →<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-2678","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/tutorials.leesonresearch.com\/tutorials\/wp-json\/wp\/v2\/posts\/2678","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tutorials.leesonresearch.com\/tutorials\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tutorials.leesonresearch.com\/tutorials\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tutorials.leesonresearch.com\/tutorials\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tutorials.leesonresearch.com\/tutorials\/wp-json\/wp\/v2\/comments?post=2678"}],"version-history":[{"count":13,"href":"https:\/\/tutorials.leesonresearch.com\/tutorials\/wp-json\/wp\/v2\/posts\/2678\/revisions"}],"predecessor-version":[{"id":2692,"href":"https:\/\/tutorials.leesonresearch.com\/tutorials\/wp-json\/wp\/v2\/posts\/2678\/revisions\/2692"}],"wp:attachment":[{"href":"https:\/\/tutorials.leesonresearch.com\/tutorials\/wp-json\/wp\/v2\/media?parent=2678"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tutorials.leesonresearch.com\/tutorials\/wp-json\/wp\/v2\/categories?post=2678"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tutorials.leesonresearch.com\/tutorials\/wp-json\/wp\/v2\/tags?post=2678"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}<\/h3>\n\n\n\n
Setting Up the Directory Structure<\/h4>\n\n\n
\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) Create our frontend Dockerfile script\ntouch frontend\/Dockerfile\n\n# 5) Create a directory for Nginx to serve in production\nmkdir nginx\n\n# 6) Create a Dockerfile and nginx.conf files for Nginx\ntouch nginx\/Dockerfile\ntouch nginx\/nginx.conf\n\n# 7) Create a new Docker Compose files for production and development\ntouch docker-compose.yml\ntouch docker-compose-dev.yml\n<\/pre><\/div>\n\n\n
Populate the Frontend Files<\/h4>\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
Docker-Compose.yml<\/h3>\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
Development Docker Compose Override<\/h3>\n\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
Building the Frontend Service<\/h3>\n\n\n\n