Part 1: Setting up the application
You can access Tezos through any JavaScript framework. This tutorial uses the Svelte framework, and the following steps show you how to start a Svelte application and add the Tezos-related dependencies. If you are familiar with Svelte, note that this application includes its own Svelte SPA, so it does not require SvelteKit.
Setting up the app
-
Run these commands to install Svelte with JavaScript and Vite:
npm create vite@latest simple-nft-svelte -- --template svelte
cd simple-nft-svelte
npm install -
Install the Tezos-related dependencies:
npm install @taquito/taquito @taquito/beacon-wallet @airgap/beacon-types
-
Install the
buffer
,events
, andvite-compatible-readable-stream
libraries:npm install --save-dev buffer events vite-compatible-readable-stream
-
Update the
vite.config.js
file to the following code:import { defineConfig, mergeConfig } from "vite";
import path from "path";
import { svelte } from "@sveltejs/vite-plugin-svelte";
export default ({ command }) => {
const isBuild = command === "build";
return defineConfig({
plugins: [svelte()],
define: {
global: {}
},
build: {
target: "esnext",
commonjsOptions: {
transformMixedEsModules: true
}
},
server: {
port: 4000
},
resolve: {
alias: {
"@airgap/beacon-types": path.resolve(
path.resolve(),
`./node_modules/@airgap/beacon-types/dist/${
isBuild ? "esm" : "cjs"
}/index.js`
),
// polyfills
"readable-stream": "vite-compatible-readable-stream",
stream: "vite-compatible-readable-stream"
}
}
});
};This updated file includes these changes to the default Vite configuration:
- It sets the
global
object to{}
so the application can provide the value for this object in the HTML file - It includes the a path to the Beacon SDK
- It provides polyfills for
readable-stream
andstream
- It sets the
-
Update the default HTML file,
index.html
, to the following code:<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script>
const global = globalThis;
</script>
<script type="module">
import { Buffer } from "buffer";
window.Buffer = Buffer;
</script>
<title>Simple NFT dApp</title>
</head>
<body>
<script type="module" src="/src/main.js"></script>
</body>
</html>This updated file sets the
global
variable toglobalThis
and adds a buffer object to the window. The Beacon SDK requires this configuration to run in a Vite app.
File structure
The final structure of the tutorial application will look like this:
- src
- assets
- lib
- app.css
- App.svelte
- main.js
- vite-env.d.ts
- index.html
- jsconfig.json
- package-lock.json
- package.json
- svelte.config.js
- vite.config.js
Here are descriptions for each of these files:
- assets -> Contains the favicon and other static files such as images for the application.
- lib -> Contains the components that make up the app interface:
- app.css -> Contains global styles that apply to the entire app.
- App.svelte -> The entrypoint of the application, which contains the components that are bundled into the final application.
- main.js -> Where the JavaScript for the app is bundled before being injected into the HTML file.
- vite-env.d.ts -> A JavaScript declaration file automatically generated by Vite to provide type definitions for environment variables.
- index.html -> Contains the root element where the Svelte app gets attached.
- jsconfig.json ->
- package.json -> Contains metadata about the project like its name, version, and dependencies.
- svelte.config.js -> Configuration file for the Svelte application.
- vite.config.js -> Used to customize Vite's behavior, including defining plugins, setting up aliases, and more.
Importing the style sheets
These steps set up the style sheets for the application:
-
In the
src/main.js
file, import the style sheets by replacing the default code of the file with this code:import './app.css'
import App from './App.svelte'
const app = new App({
target: document.body
})
export default appThis code targets the
body
tag to inject the HTML produced by JavaScript instead of adiv
tag inside thebody
tag as Svelte apps do by default. Your applications can target any tag on the page.
Configuring Svelte
Svelte files include several different types of code in a single file. The files you will create have separate sections for JavaScript, style, and HTML code, as in this example:
<script lang="ts">
// Your JavaScript code
</script>
<style lang="scss">
/* Your Sass code */
</style>
<main>
<!-- Your HTML code -->
</main>
Svelte components are fully contained, which means that the style and JS/TS code that you apply inside a component doesn't leak into the other components of your app.
Styles and scripts that are shared among components typically go in the src/styles
and scripts
or src/scripts
folders.
Follow these steps to set up the src/App.svelte
file, which is the container for the other Svelte components:
-
In the
App.svelte
file, replace the default<main>
section with this code to set up a title for the interface:<main>
<h1>Simple NFT dApp</h1>
</main>The interface will change after connecting to the wallet and minting an NFT.
-
Remove the default
<style>
section like this:<style lang="scss">
</style> -
Remove the default JavaScript section and replace it with this code, which imports the libraries and components that the app uses:
<script lang="ts">
import { BeaconWallet } from "@taquito/beacon-wallet";
import { NetworkType } from "@airgap/beacon-types";
import { TezosToolkit, MichelsonMap} from "@taquito/taquito";
</script>The imports include these elements:
BeaconWallet
: The class provides a user interface for transaction requests, ensuring that users can securely and easily sign transactions or execute contract calls.TezosToolkit
: The class that gives you access to all the features of TaquitoNetworkType
: The class represents the different types of networks on the Tezos blockchain. Developers can ensure that their applications communicate with the desired network version or testnet such as Ghostnet.MichelsonMap
: The class helps developers work with Michelson's native map data type.
-
In the
<script lang="ts">
section, add the following code to initialize the Tezos toolkit and set your RPC URL to the Ghostnet endpoint:const rpcUrl = "https://ghostnet.ecadinfra.com";
const Tezos = new TezosToolkit(rpcUrl);This code creates an instance of the
TezosToolkit
object, which provides access to the Tezos chain itself. Then the code saves the object in the Svelte store for other components to use. This way, your entire application can use a single instance of the Tezos toolkit with a consistent configuration.Then it specifies the network to be
GHOSTNET
, which indicates that the application is set to interact with the Ghostnet version of the Tezos blockchain, a testnet used for experimentation and development without the risk of real-world financial consequences.