Getting started

A quick guide on how to install and get the Shophub monorepo project to run in your local docker.

Initialization

Thanks to Yarn we just need to execute one command to initialize the monorepo.

yarn install:frozen

This will add a node_modules folder to the root and for each package. Furthermore, will this handle the symlinking of our packages, if necessary.

Build the types package

To being able to actually run packages in this monorepo, you first need to build the types package, which is one of the packages in this monorepo, used to share types across all other packages. The package.json at the root of the monorepo provides some handy commands, to circumvent the necessity to change the directory and run several commands.

So at root level run the following command:

yarn types:init

On success, this will have build the type project and create a dist, which the frontend and backend make use of.

Docker

Several volumes have to be created manually, to be able to run the application via docker:

• docker volume create shophub-postgres-data
• docker volume create shophub-cms-uploads
• docker volume create shophub-redis-data

Furthermore, you should make sure your environments are set up correctly, that you have build-time environment ready in your root-level env file and that your run-time environment is ready in your package-scoped env files. For specific information about the structure of the environment files for each package, refer to the env.example files in said packages.

When everything is set up correctly, you should now be able to build the docker with the following command in root level:

yarn run:build:compose

The first build could take a moment to be ready. Afterwards, most of the data gets cached, ensuring quick rebuilds.

To solve this, just wait a moment and just start up the builded docker files with:

yarn run:compose

Now your files should be all dockered up, and you can locate the frontend via the url localhost, no port defining necessary! The backend can be reached under localhost:3333.

Environment files

The root and each project in the monorepo includes a dedicated environment file. Here is a list of all example .env files for each project.

Root

# Build-time env goes here
NODE_ENV="development" | "production"
API_BASE_URL="some server to server url with service hostnames"
NEXT_PUBLIC_API_BASE_URL="some public server to server url with service hostnames"
APP_ORIGIN_URL="some actual browser consumed url"
NEXT_PUBLIC_FC_SITE_KEY=
# Comma seperated list. e.g.: url1,url2...
CDN_URLS="getshophub.com,https://my-image-host-domain.com/my/path"

Frontend

APP_ORIGIN_URL="http://localhost:3000"
API_BASE_URL="http://localhost:3333"
NEXT_PUBLIC_API_BASE_URL="http://localhost:3333"
NODE_ENV="development"
NEXT_PUBLIC_FC_SITE_KEY=
REDIS_URL=
# Comma seperated list. e.g.: url1,url2...
CDN_URLS="getshophub.com,https://my-image-host-domain.com/my/path"
USE_SSR_CACHE='1'

Backend

NODE_ENV="development"
PORT="3333"
DATABASE_URL="postgres://USER:PASSWORD@postgres:PORT"
DRIZZLE_STUDIO_DB_URL="postgres://USER:PASSWORD@localhost:PORT"
SHOPIFY_GRAPHQL_URI="https://mystore.myshopify.com/api/year-version/graphql.json"
SHOPIFY_ADMIN_GRAPHQL_URI="https://mystore.myshopify.com/admin/api/year-version/graphql.json"
SHOPIFY_STOREFRONT_ACCESS_TOKEN=
SHOPIFY_STOREFRONT_PRIVATE_TOKEN="shpat_"
SHOPIFY_CLIENT_SECRET=
FC_CAPTCHA_SECRET=
APP_ORIGIN_URL="http://localhost:3000"
INTERNAL_API_TOKEN="username:password"
CORS_ORIGINS="http://localhost:3000,http://localhost"
MAILCHIMP_API_KEY="fc123456e67890f-us2"

Types

Next steps

After wrapping up the technical part, learn more about configuring the constant values for your project here.