Skip to main content

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​

  1. 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

  2. Install the Tezos-related dependencies:

    npm install @taquito/taquito @taquito/utils @taquito/beacon-wallet @airgap/beacon-types

  3. Install the buffer, events, and vite-compatible-readable-stream libraries:

    npm install --save-dev buffer events vite-compatible-readable-stream

  4. Install a plugin to handle SASS styling for the site:

    npm install -D sass-embedded

  5. 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 and stream

  6. 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 to globalThis 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:

  1. 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 { mount } from 'svelte';
    import App from './App.svelte'

    const app = mount(App, { target: document.body });

    export default app

    This code targets the body tag to inject the HTML produced by JavaScript instead of a div tag inside the body 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:

  1. 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.

  2. Remove the default <style> section like this:

    <style lang="scss">
    </style>

  3. 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";
      import { stringToBytes } from '@taquito/utils';
    </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 Taquito
    • NetworkType: 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.
    • stringToBytes: A utility that converts strings to bytes to store as the token metadata

  4. 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://rpc.ghostnet.teztnets.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.

Last updated on