Gatsby development docker project

Example project to develop application with GatsbyJS using Docker.

This project use bmeme/gatsby-dev image from BMEME.

TL;DR

Configure your project:

$ ./configure

Create and run the docker container:

$ docker-compose up -d --build

Run the Gatsby CLI to create your project:

$ rm app/.gitkeep
$ ./gatsby new .

Run your application

$ ./gatsby develop --host=0.0.0.0

Documentation

Project configuration

The configure script prepare the .env file for you.

What it does:

• set your project name and vendor;
• set the correct UID and GID the docker image must be bult with to fit your current user.

Project name and vendor are, respectively, the identifier of your project and the organization to which it belongs (ie: name could be webticketapp, and vendor myclientcorp). They are used to setup various docker related things: among them, most important is the DNS alias used for dinghy_http_proxy (macos) and dnsdock (linux).

You can pass vendor and name of your project from the command line:

$ ./configure bmeme myproject

The docker environment

This project create a docker environment that you can use to develop and build your GatsbyJS application. The docker environment lifecycle could be summarized as follow: build, start, stopand clean.

Build the docker development container

$ docker-compose build
$ docker-compose up -d

Stop the docker environment:

$ docker-compose stop

Start the docker environment:

$ docker-compose start

Clean up the docker environment:

$ docker-compose down -v

Use the GatsbyJs CLI wrapper

Create a new gatsby project:

$ rm app/.gitkeep
$ ./gatsby new .

Run gatsby develop:

$ ./gatsby develop --host=0.0.0.0

Run gatsby serve:

$ ./gatsby build && ./gatsby serve --host=0.0.0.0

Install a gatsby plugin:

$ ./npm install gatsby-plugin-styled-components styled-components babel-plugin-styled-components

References

• gatbsy-cli npm package
• Gatsby official tutorial
• Gatsby tutorial on youtube by Coding Addict
• Node.js Docker official images