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)
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:
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:
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:
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:
An issue with Next and Taquito prevent the production build from working properly. While this issue is being fixed, a solution is to disable theswc
minifier for prodution:
In next.config.js
, set
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:
You can now start the development server with
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:
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:
Tezos tooling
Let's now install Archetype's tools:
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:
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!
Last updated