React and Vue join JavaScript in Apillon’s NFT website template library

New NFT website templates in two more programming languages - to showcase your Apillon-minted NFTs. Check them out!

Apillon

Jul 18, 2023 • 5 min read

You can now use NFT website templates in two more languages and customize them to showcase Apillon-minted NFTs.

Why NFT website templates?
JavaScript template
React (JavaScript) template
Vue (TypeScript) template

Why NFT website templates?

The Apillon NFT Service allows you to launch an NFT collection on Moonbeam or Astar using a no-code approach and a few minutes of your time.

But once you deploy your NFTs, they only live as a code on-chain — that’s until you make them visible online, i.e., on a website.

To do so, Apillon compiled a simple website template that retrieves NFT information directly from the chain you chose. It uses a wallet like MetaMask to ensure an NFT connection.

Using the website template, you can deliver an NFT collection to your audience much faster and without the hassle of developing the website from scratch. Or, you can alter certain parts of the code and integrate it into your existing website for the same result.

An example of an NFT website template set-up

The original version of the NFT Service offered a website template based on JavaScript, usable for NFT collections on both Moonbeam and Astar. Recently, Apillon’s NFT module added support for React and Vue to give you greater flexibility in designing your NFT-bearing website.

If you are a front-end developer, two more environments to showcase your NFT goodies surely come in handy.

The process of using them is quite similar, but there are certain details that make them different. Feel free to choose the optimal one for your needs.

JavaScript template

The earliest Apillon template of an NFT website is written in JavaScript.

To make the template interact with the NFT smart contract deployed via the Apillon dashboard, you should manually configure it. Here’s how:

https://github.com/Apillon-web3/nft-template/tree/master/js

Open the js template folder.
Locate the env.js file within the js folder.
Open the env.js file in your code editor.
Change the first line by entering your smart contract address between parentheses.
Select the chain version by commenting and uncommenting the right chain.

const nftAddress = ""; // Paste the address of the NFT collection. 
// uncomment the chain you are using: 
const chainId = "0x507"; // Moonbase 
// const chainId = "0x504"; // Moonbeam 
// const chainId = "0x250"; // Astar

Once you have updated the js/env.js file, save it. You can now deploy your website files.

🔎 Find the full JavaScript template here. 👇

React (JavaScript) template

The second option to deploy your NFT website is to use the React library.

For the template to interact with your NFT smart contract on Apillon, configure the React template:

https://github.com/Apillon-web3/nft-template-react/tree/master

Open the .env file in your code editor.
Change the first line by entering your smart contract address between parentheses.
Select the chain version by commenting and uncommenting the right chain.

# Paste the address of the NFT collection. 
REACT_APP_NFT_ADDRESS= 
 
# Uncomment the chain you are using: 
# Moonbase  
REACT_APP_CHAIN_ID=0x507 
 
# Moonbeam 
# REACT_APP_CHAIN_ID=0x504 
 
# Astar 
# REACT_APP_CHAIN_ID=0x250

Once you have updated the .env file, save it, and deploy your website.

🔎 Find the full React template here. 👇

GitHub — Apillon-web3/nft-template-react: React template for NFTs

React template for NFTs. Contribute to Apillon-web3/nft-template-react development by creating an account on GitHub.

Vue (TypeScript) template

And lastly, you can create an NFT website template using the Vue framework.

Configure it to interact with your NFT smart contract on Apillon:

https://github.com/Apillon-web3/nft-template-vue/tree/master/config

Open the config template folder.
Locate the production.ts file within the config folder.
Open the production.ts file in your code editor.
Change the first line by entering your smart contract address between parentheses.
Select the chain version by commenting and uncommenting the right chain.

// Moonbase 
const config: ConfigInterface = { 
  CHAIN_ID: '0x507', 
  NFT_ADDRESS: '', 
}; 
// Moonbeam 
// const config: ConfigInterface = { 
//   CHAIN_ID: '0x504', 
//   NFT_ADDRESS: '', 
// }; 
// Astar 
// const config: ConfigInterface = { 
//   CHAIN_ID: '0x250', 
//   NFT_ADDRESS: '', 
// }; 
export default config;

Once you have updated the config/${env}.ts file, save it, and deploy website files to display your NFTs.

🔎 Find the full Vue template here. 👇

NFTs done your way

Besides offering end-to-end decentralized deployment of NFTs on Moonbeam or Astar, metadata included, Apillon goes a step further — it gives you a hand in bringing them to life on your own website, bypassing third-party marketplaces.

Go wild in showcasing your non-fungible goodies, and let us know how it went!

⧓ About Apillon

The Apillon platform serves as a unified gateway to the Web3 services provided by linked Polkadot parachains. Following the multi-chain vision, Apillon powers the transition of developers to Web3, simplifying its adoption in the real economy, and expanding its versatility as the ecosystem grows. With Apillon, Web3 services are within reach for every developer, regardless of their background and experience with blockchain technology.