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
NodeJS v16.18 or later
octez-client, a Tezos client used by Completium
Recommended: a Docker setup, to run a local blockchain sandbox
Recommended: a good IDE (Visual Studio Code is a good choice)
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? YesWould you like to use experimental
app/
directory with this project? NoWhat 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",
[...]
}
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
Last updated