NEAR Svelte Dapp Template

Spun off from https://github.com/cemfahli/near-counter-dapp

Tech Used

• Svelte as a component framework
• Tailwind as a CSS framework
• Rust to write smart contracts for deployment on NEAR
• NEAR as the blockchain platform our Svelte front-end communicates with.

How to Build

Smart Contract

The contract must be built and deployed separately from the front-end of the dapp. The near-sdk is used to build the smart contract, while the NEAR CLI is used to deploy it onto the chain. You must create an account first

1. Pre-requisites of compiling the smart contract

2. Pre-requisites of deploying the smart contract to the chain

3. From the near-counter directory, build by running:

   env RUSTFLAGS='-C link-arg=-s' cargo build --target wasm32-unknown-unknown --release
   

4. Login with the account you wish to deploy to:

   near login
   

5. From the near-counter directory, deploy by running:

   near deploy --wasmFile target/wasm32-unknown-unknown/release/rust_counter_tutorial.wasm --accountId YOUR_ACCOUNT_HERE
   

   where YOUR_ACCOUNT_HERE is the account you previously logged into

Front-end

There are several environmental variables used while building the front-end. The defaults can be seen in the .env file and can be overwritten. The descriptions of the variables are:

• CONTRACT_ACCOUNT: The account id you will be deploying the contract to
• APP_NAME: The name of your application
• VIEW_METHODS: Space delimited string of your contract's view methods (methods that don't change state/require gas)
• CHANGE_METHODS: Space delimited string of your contract's call methods (methods that change state/require gas)
• NETWORK_ID, NODE_URL, WALLET_URL, HELPER_URL, EXPLORER_URL : Network specific configuration set according to https://docs.near.org/docs/api/naj-quick-reference#connect

Once the environmental variables are set (or the defaults are used), the front-end can be built:

1. Install the dependencies:

   npm i
   

2. Create a production build:

   npm run build
   

   you can also serve a development environment with live reloading using:

   npm run dev
   

   or serve a build with:

   npm run start