0xgreat.art

HOW TO DEPLOY YOUR DAPP TO GITHUB PAGES

In the previous sections, we prepared the image files for NFT. Our metadata is prepared for each image file. Then we prepared our Smart Contract to be used in Polygon Mumbai network using Hardhat. We got it approved on the network. Or after that? You need to deploy your dapp to somewhere such github pages and then your community should mint one of them.

In the next part, we can allow collectors to mint it. For this, we just need to buy a new domain and find a hosting that can run the next.js application. However, we can also do this in a cheaper way. Using applications such as Gitbug, Vercel, Netifly, we can publish our NFT collection without the hassle of hosting. It contains similarities as a concept. If we only need to publish on GitHub, we will need to make some adjustments. I start the article assuming that the NFT collection is ready, you have Contract Abi and you have a GitHub account.

On Github Side for deploying Github Pages

There are several alternatives to creating a new repository on Github. The method I prefer here will be to create the repository first and then start using it on VSCode.

Login to Github and add a new repository. Use default settings and try to give it a meaningful name. The name I used was “ethereumdappwithghpages” because I wanted it to be compatible with the article. How significant is that? 😀 We create a branch called “gh-pages” by going to Braches section and saying add brach from there.

On VSCode Settins

Then, by opening the VScode application, choose the place where we want our ethereum dApp locate. .

Open>Folder

After opening, create a new terminal with Terminal > New Terminal in the top menu of the application.

npm install Next.js

After the terminal is opened, move on to the Next.js installation. Next.js is a js environment that is often used in dApp applications. With a single code;

npx create-next-app@latest

When we run this code, the installation will start and it will ask us for a name for the next.js application.

Create New Next.js app

Create new next project.

Let the installation begin after the name and wait until it completes. To test if the installation works when all processes are complete:

npm run dev

Which Folders and Files You Need To Add

You can use code. If you go to

https://localhost:3000

you will encounter a basic next application. Now start making changes. First, create a constants folder under the main directory and a new file named index.js in it.Add the following lines to this file.

Export const NFT_CONTRACT_ADDRESS= “”;
Export const abi = “”;

By reading our previous articles, we stated that we should register our verified NFT contract address. Now we can paste that address into the relevant field in this section. Those who create it themselves can use their own NFT Contract addresses. In the ABI part, you can see our verified contract from polygon scan and you can get our contract ABI from the abi part.

.github Workflow (Actions)

We create a new folder in our home directory and name it .gitbub. In that folder, we add a new folder named workflows under it. We will create a file named

node.js.yml

inside the Workflows folder. This file will automatically install and run our application on github. Add the code below into it.

Get 0xgreatart’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Workflow Sample

# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
name: GitHub Pages deploy
on:
   push:
     branches: [main]
jobs:
   build:
     runs-on: ubuntu-latest
     steps:
       – name: Checkout 🛎️
         uses: actions/checkout@v2.3.1
       – name: Use Node.js 14.x
         uses: actions/setup-node@v1 
         with: 
           node-version: “14.x”
       – name: Installing my packages
         run: npm ci
       – name: Build my App 
         run: npm run build && npm run export && touch out/.nojekyll
       – name: Deploy 🚀
         uses: JamesIves/github-pages-deploy-action@v4.3.3
         with:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           BRANCH: gh-pages # The branch the action should deploy to.
         FOLDER: out # The folder the action should deploy.

How automatically Files will out

At this stage, we add another line under the scripts header in package.json.

“scripts”: {
  “export”: “next export”,
  “dev”: “next dev”,
  “build”: “next build”, 
  "start”: “next start”,
  “lint”: “next lint”
},

Tailwind Installation and Usage

We will use tailwind css for page layout and css related operations. This part is actually optional. The page will appear more organized. Run the codes below in order.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init –p

After completion, tailwind.config.js file will be created automatically. This file contains the file types on which to run tailwind. Also where to run the theme. Replace with the code below.

/** @type {import(‘tailwindcss’).Config} */
module.exports = {
  content: [
    “./pages/**/*.{js,ts,jsx,tsx}”,
    “./components/**/*.{js,ts,jsx,tsx}”,
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Go to styles/global.css and add the following 3 codes at the top.

@tailwind base;
@tailwind components;
@tailwind utilities;

We will make changes in Pages/index.js. For this, go to the GITHUB link and take all the code and paste it into the page.

Back to Github Pages Events

Finally, create another file called

.nojekyll

under the pages folder. This file will prevent github from automatically creating templates. If all processes are completed;

git remote add origin https://github.com/[GITHUB_USERNAME]/[YOUR_REPOSITORY_NAME].git

We connect the repository we created with this folder. Then to create the main branch.

git branch -M main

Indicating that the transactions are done and sending the current status to github;

git push -u origin main

We write and run. Transactions will be completed quickly. This part will help us sync with Github.

Check If Workflow Working Normally and Fix NPM Error

Go to your Github and check if your project has been uploaded. If it is installed, proceed to Action’s and check if the workflow is running successfully. If you’ve had problems, it’s NPM related. Go to the ethereumdapp folder on your computer and remove the package-lock.json and node_modules folders. Immediately after that, run the code below to install the necessary packages.

npm install

Once the installation is complete, do github push again and check the workflow working status. It should have worked flawlessly.

Finalize: Github pages will be activated

As the last step, in Settings > Pages, select Branch as “gh-pages“. You will see your page name at the top of the page.

Source: https://creatorhome.xyz