# Getting started

# Step 0 - Pre-requisites

Ensure you have the following pre-requisites installed and ready:

  • Node.js v20+.
    • We recommend using NVM to manage multiple Node.js versions simultaneously.
  • PNPM.
  • PostgreSQL 11+ running locally on port 5432, with a default admin user called postgres.

# Step 1 - Source code

Unzip the QuickDapp zip file you received when you purchased a license. If you are pro user then you can visit the repository at https://github.com/QuickDapp/QuickDapp and download a ZIP of any of the git version tags or you can just fork the master branch (if you're feeling brave!).

# Step 2 - Dependencies

In the project folder, let's install the dependencies:

pnpm i

Now, let's bootstrap the project and generate the initial scaffolding:

pnpm bootstrap

This installs a Git hook which ensures your future commit messages adhere to the conventional commits. It also generates the Prisma client.

# Step 3 - PostgreSQL database

By default, QuickDapp assumes the existence of a PostgreSQL database. The default connection parameters (defined in the .env file) are:

  • host: localhost
  • port: 5432
  • user: postgres
  • db: quickdapp
  • schema: public

If you haven't already, create the quickdapp database, ensuring the postgres user has full system-level privileged access to it:

psql -U postgres -c 'CREATE DATABASE quickdapp'

Let's get the dev database setup:

pnpm dev db migrate

# Step 4 - Demo contracts deployed locally

The QuickDapp source code is actually a fully working Dapp which lets you deploy and interact with custom ERC-20 token contracts. The smart contract used is from the public @QuickDapp/contracts repository.

This @QuickDapp/contracts repository contains commands to setup a local node (using Anvil) and deploy the proxy contract to it.

First, clone this repository into the QuickDapp project folder:

git clone git@github.com:QuickDapp/contracts.git

There should now be a ./contracts folder. Now let's set it up:

pnpm contracts bootstrap

Now let's run the local Anvil node and deploy the Diamond Proxy to it, and watch for changes:

pnpm contracts dev

When you run the above command you will see output which looks like this:

Enter the following line into your .env.development or .env.local file:
                                                                               
NEXT_PUBLIC_DIAMOND_PROXY_ADDRESS="0x79D219573A2b042479604aBA46BE7CECc52A57cd"

This address (usually it's 0x79D219573A2b042479604aBA46BE7CECc52A57cd) is the address of the Diamond proxy contract that is now deployed to your locally running Anvil node.

Follow the instructions and place this line into either one of those files. Create the file if it doesn't exist.

At this point we have locally running Anvil node with our upgradeable proxy contract deployed to it.

# Step 5 - Setup metamask

The local node pre-funds a number of test wallets with money. The mnemonic used to generate these wallets is usually:

test test test test test test test test test test test junk

Note: Double-check that this mnemonic is correct by comparing with with the anvil node output above

Enter this mnemonic into your browser Metamask wallet to ensure you can use these accounts to interact with the contract that is now deployed on your local node.

# Step 6 - Run dev servers

Now we're ready to run the dapp and test it locally. In the QuickDapp project folder:

pnpm dev

This does the following:

  • Starts the Next.js dev server mode.
  • Starts the worker process dev server.

# Step 7 - Interact with the dapp

Goto http://localhost:3000 in your Metamask-enabled browser to interact with the dapp!

# Step 8 - Deploying to production

The following steps all deal with deploying our dapp to production.

We will do the following:

  • Deploy smart contracts to Sepolia test network.
  • Deploy the dapp (both Next.js + background worker process) as a Docker image to DigitalOcean's App platform.
  • Use a hosted PostgreSQL database on DigitalOcean as the production database.

# Step 9 - Setup production database

We will setup a PostgreSQL database on DigitalOcean as our production database.

Pre-requisites:

  1. Sign-up to DigitalOcean.
  2. Obtain a Personal Access Token.
  3. Create a PostgreSQL database cluster.

In the QuickDapp project folder, create a .env.production file, entering the access token as follows:

DIGITALOCEAN_ACCESS_TOKEN="<the access token>"

Now let's setup a database in the cluster named quickdapp, with a user named quickdappuser to access it:

pnpm do-cloud db setup --name quickdapp --user quickdappuser

This command will output the database connection string, which will look similar to:

postgres://quickdappuser:password@postgres.digitalocean.com:25060/quickdapp?schema=public

Enter this connection string as the DATABASE_URL environment variable in the .env.production file, e.g:

DATABASE_URL="postgres://quickdappuser:password@db.digitalocean.com:25060/quickdapp?schema=public"

Now setup the production database schema:

pnpm prod db deploy

# Step 9 - Deploy contracts to Sepolia

We will deploy the contracts to the Sepolia test network. This means the production dapp will require the user's wallet be connected to Sepolia in order for interactions to work.

Pre-requisites:

  1. Setup a new Ethereum wallet using a mnemonic (you can do this in Metamask).
  2. Fund this new allet using the Sepolia ETH faucet.

The following two environment variables need to be set in the shell environment for the deployment to work:

  • MNEMONIC - Mnemonic to the new wallet setup earlier.
  • SEPOLIA_RPC_URL - RPC endpoint for accessing Sepolia. You can get one from Alchemy.

Set these environment variables in the shell environment:

export MNEMONIC=
export SEPOLIA_RPC_URL=

Now go into the contracts folder and run:

pnpm dep sepolia

Note down the deployed proxy contract address from the log output. The address can also be found inside the gemforge.deployments.json file.

Go back into the QuickDapp project folder and edit the .env.production file, adding the proxy address follows:

NEXT_PUBLIC_DIAMOND_PROXY_ADDRESS="<Sepolia deployed proxy address>"

You are now ready to build the production dapp.

# Step 10 - Test-run production build locally

Note: This step is optional, and is useful it you want to debug some production issues locally

In the project folder, build the production apps:

pnpm build

Now, run the production apps:

pnpm prod

Now goto http://localhost:3000 in your Metamask-enabled browser to interact with the dapp. You will need to connect to the Sepolia test network in your wallet.

# Step 11 - Build docker image

We are going to build a Docker image to run both the Next.js app and background worker processes in tandem.

Pre-requisites:

  1. Install Docker and ensure that the Docker daemon is running in the background.

In the project folder run:

pnpm docker build

This will build a Docker image named quickdapp-all.

You can test-run this image locally using:

pnpm docker run

Now goto http://localhost:3000 in your Metamask-enabled browser to interact with the dapp. You will need to connect to the Sepolia test network in your wallet.

# Step 12 - Deploy to DigitalOcean

To push the quickdapp-all image to DigitalOcean:

pnpm do-cloud docker push

This will create a container registry named quickdapp if it doesn't already exist and push the local image to it.

At this point we can use the App platform to create an app from this image. Follow the official docs for instructions on how to do this.

If the App build succeeds (and it should!) your dapp will be up and running at the URL presented by DigitalOcean.

Now, every time you push an updated image to the container registry the App will auto-redeploy.

# Step 13 - Hurrah!

Congratulations! your dapp is now available on the web in production mode.

If you wish to gain more insight into what your dapp is doing a good starting point is to enable cloud logging.