Development environment setup

Setup the dev environment and install base dependencies

The entire project will be developed in a mono-repository. It will allow us to easily test and integrate smart contracts into our app.

Requirements

Compatiblity between dependencies is quite fragile, especially with taquito and completium. It is advised to follow exact version requirements for JavaScript dependencies to avoid hard-to-troubleshoot errors.

Installation

Next.js

Use the create-next-app tool to setup the environment:

npx create-next-app@13.2.0 --typescript

An installation wizard will prompt for a few questions. Answer as follows:

  • What is your project named? â€Ļ tzombies

  • Would you like to use ESLint with this project? Yes

  • Would you like to use src/ directory with this project? Yes

  • Would you like to use experimental app/ directory with this project? No

  • What import alias would you like configured? @/*

Let's replace npm with yarn for faster iteration:

cd tzombies
npm install --global yarn
rm package-lock.json
yarn install

At some point down the tutorial, we'll use some features that require a change in TypeScript compiler configuration. In tsconfig.json, change target and module values to match:

"compilerOptions": {
    "target": "es6",
    [...]
    "module": "commonJS",
    [...]
}

Some dependencies have issues with Next.js being executed on both the server and the client. To prevent these problems, let's add this in the nextConfig object in next.config.js:

webpack: (config, { isServer }) => {
    if (!isServer) {
      config.resolve.fallback = { fs: false }
    }
    return config
  }

An issue with Next and Taquito prevent the production build from working properly. While this issue is being fixed, a solution is to disable theswcminifier for prodution:

In next.config.js, set 

swcMinify: false

There might be CORS issues when the app needs to communicate with the sandbox node. To work around this issue, we'll configure a proxy on the next development server, that will redirect requests to the node. In next.config.js, add this to the nextConfig object:

rewrites: async () => [
  {
    source: "/sandbox/:path*",
    destination: "http://localhost:20000/:path*",
  },
],

You can now start the development server with

yarn dev

It will automatically reload after editing files. Note that some changes (such as installing a package) still require restarting the server.

Material UI

Material UI is a toolkit we'll use to design a standardised user interface. It takes care of styles, layouts, and comes with a set of common components, directly integrated with React. If you open a new terminal, be sure to navigate to the tzombies directory with cd tzombies before running the following commands: 

# base install
yarn add @mui/material@5.13.1 @emotion/react@11.11.0 @emotion/styled@11.11.0

# fonts and icons
yarn add @fontsource/roboto@5.0.0 @mui/icons-material@5.11.16

# peer dependencies from x-date-pickers
yarn add @mui/base@5.0.0-beta.1 @mui/system@5.13.1

# mui-x date picker and luxon date manager
yarn add @mui/x-date-pickers@6.5.0
yarn add luxon@3.3.0 
yarn add --dev @types/luxon@3.3.0

Wert Tools

Wert.io is a credit card crypto payment platform. It enables crypto on-ramp and credit card NFT purchase on Tezos. It can be tested for free on a testnet. Contact their sales team for more pricing information if you consider an integration with Wert.

Install Wert packages with the following commands:

yarn add @wert-io/widget-initializer
yarn add @wert-io/widget-sc-signer

Tezos tooling

Let's now install Archetype's tools:

yarn add --dev @completium/completium-cli@0.4.77
yarn add @completium/dapp-ts@0.1.11

Completium CLI is a command-line interface we will use to build, deploy and interact with our smart contracts. octez-client must be pre-installed (see Requirements section)

Smart contract interaction in your app will rely on taquito and Beacon:

yarn add @taquito/taquito@16.1.2 @taquito/beacon-wallet@16.1.2 

# peer dependencies
yarn add @taquito/michel-codec@16.1.2 @taquito/michelson-encoder@16.1.2 @taquito/signer@16.1.2 @taquito/utils@16.1.2

Extras (optional)

I recommend using prettier with your IDE to maintain a clean and coherent code base. Check the documentation of your IDE to see how it can be integrated. For VSCode, the extension documentation is exhaustive. The formatOnSave feature is quite a time-saver!

yarn add --dev prettier@2.7.1
PreviousArchitectureNextCompletium

Last updated