Skip to main content

Part 1: Setting up the application

You can access Tezos through any JavaScript framework. This tutorial uses the Svelte framework to create a simple UI quickly. 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 application​

  1. Run these commands to create a starter Svelte project:

    npm create vite@latest nft-consolidated -- --template svelte
    cd nft-consolidated
    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. 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, which Taquito uses to connect to wallets
    • It provides polyfills for readable-stream

  5. 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>Create NFTs</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 application requires this configuration to use the Beacon SDK to connect to wallets in a Vite app.

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

File structure​

The structure of the tutorial application looks 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.

Configuring the Svelte application​

Svelte files include several different types of code in a single file. This example page has separate sections for JavaScript, style, and HTML code:

<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>Create NFTs</h1>

    </main>

    You will add elements to the wbe application interface later.

  2. Replace the default <style> section with this code:

    <style>
    </style>

    Later, you can add styles to this section or the shared CSS files.

  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: This class provides a user interface for connecting to wallets, ensuring that users can securely sign transactions and call smart contracts
    • TezosToolkit: This is the base class for Taquito, which gives you access to most of its Tezos-related features
    • NetworkType: An enumeration that lists the different types of networks on the Tezos blockchain
    • MichelsonMap: This class represents the Michelson map data type, which Tezos uses to store data, including the metadata for the NFTs that the application creates
    • stringToBytes: A utility that converts strings to bytes to store in the token metadata

  4. In the <script lang="ts"> section, add the following code to initialize Taquito and set it to use a Ghostnet RPC node:

      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. You can change the RPC node to use a different Tezos network (such as switching to Tezos Mainnet when you are ready to deploy the application in production) or if the node you are using is slow or down, For URLs to other RPC nodes, see https://teztnets.com.

Now you have the framework of a web application that can access Tezos. In the next part, you add buttons that connect to the user's wallet and send transactions to Tezos on the user's behalf.

Last updated on