Development Setup

Welcome to Development Setup!

If you are reading this you are ready to contribute to c0d3.com!

To begin we will need to set up the code base on your own machine. To do this we will be creating a copy of the c0d3 GitHub repository.

Prerequisites

• Yarn
• Node
• Docker
• Docker-compose

Instructions

Forking and cloning the repository

1. Click on the button in the top right corner with the text Fork to create a copy of this repository.

2. After forking you will be redirected to your fork repository page. Click on the "Code" green button and copy the ssh or https url.

3. Navigate to your terminal and clone git clone *url-goes-here*.

4. After cloning, you will want to change the current directory to the c0d3-app folder that was created with cd c0d3-app.

Setting up the project

1. Run yarn install to install all of the dependencies needed to run the app.

2. Copy and rename the .env.example file to .env in your c0d3-app directory (on Linux and MacOS this can be done with cp .env.example .env). That file already contains the correct database environment variables for the docker container we use for development. For the API keys ask in engineering chat. Port numbers are completely arbitrary, as long as docker-compose.yml is consistent with this .env file you're good. Never commit the .env file as it may contain secret API keys.

3. Build docker images. Go to docker directory (cd docker) and type docker-compose build. It will take some time for docker to pull and install everything. In the end you will have one container with a postgres database and one container for mattermost.

4. Prepare volume directories. Volumes are mappings from containers to your local machine.

mkdir -pv ./volumes/app/mattermost/{data,logs,config,plugins,client-plugins}
sudo chown -R 2000:2000 ./volumes/app/mattermost/

5. Now you can start the docker containers with docker-compose up -d. To stop all containers run docker-compose down.

6. Go back to the root directory (cd ..) and run yarn db:init to create the development database with fake data, needed to run the app. When prompted to reset the database just confirm by pressing y.

Configure Mattermost

1. When you open http://localhost:8000, you will be greeted with the mattermost login page. Enter any email (this setup won't have an SMTP server, so no actual mails will be sent). First user automatically becomes the server admin. Create new team and enable use of personal access tokens System Console > Integrations > Custom Integrations.

2. Generate a personal access token. Close system console, go to team chat (town square) and click on three horizontal bars near your name Account settings > Security , then generate personal access token. This value will be used as MATTERMOST_ACCESS_TOKEN.

3. Allow new users to join your team. As mattermost admin go to Team settings/Allow any user with an account on this server to join this team.

Start the app

Start the app by running PORT=4000 yarn dev. If everything went right you will see the landing page. There are two premade users:

• admin:password (admin, passed all lessons, can review submissions)
• newbie:password (new user).

To submit challenges through the c0d3 cli:

1. Logout c0d3 logout.
2. Login to your local server c0d3 login --url http://localhost:4000/api/graphql.
3. Submit your code c0d3 submit --url http://localhost:4000/api/graphql It should be visible on your local setup.

To connect to postgres database inside container:

1. Open bash console inside postgres container docker exec -it c0d3_db /bin/bash.
2. Connect to postgres psql -U c0d3_admin -d c0d3.

If you have psql installed locally you can type psql -U c0d3_admin -h localhost -p 7000 -d c0d3 with the same result.

There are also various useful graphical database management tools like pgAdmin and dBeaver.

package.json scripts

• db:init: initializes the database, clears tables if they exist, runs all Prisma migrations, and seeds with fake data.
• db:seed: only seeds the database with the fake data.
• db:up: shortcut to start the Postgres docker container.
• db:down: shortcut to stop the Postgres docker container.
• dev: starts the Next.js dev server.
• build: runs Next.js builder.
• start: starts the Next.js prod server, requires running build before it.
• lint: checks the project for linting errors.
• lint:fix: same as lint but also applies automatic fixes.
• autofix: same as lint:fix but also applies SVG optimization.
• storybook: starts the storybook server.
• build-storybook: build storybook components.
• test: runs the testing suites and calculates the coverage.
• ts-node: used to run typescript files in the cli.
• type-check: runs the typescript compiler to check for type errors.
• generate: generates the graphql/index.tsx file from the graphql schema.
• postinstall: runs automatically after yarn install, used to generate the local Prisma client.
• prepare: runs automatically after yarn install, used to set the git hooks with husky.
• vercel-build: used only when deploying on Vercel, custom build command for deployment.

Known problems

Snapshots are failing with:

- colSpan={5} + colSpan={4}
- href="#" + href="/#" Or yarn autofix is failing with Component definition is missing display name in containers/withQueryLoader.tsx error.

You most likely installed a new module by using npm instead of yarn. While in theory these tools should be interchangeable, in practice it can result in such weird errors. Recloning git repo should help.

You are now all set up on your machine! Keep up the great work and thank you for your contributions

👍