Deploy dApp

Author of this section: @Fish

this lecture will introduce how to deploy our application to the server and complete the front-end functions from development to final launch.

Introduction

here will be a brief introduction to Next.js and some basic concepts of front-end deployment. If you are already familiar with the front end, you can skip this part.

Next.js it is a front-end framework that can help us quickly build React applications. After we have developed our application based on React and Next.js, we need to build and deploy it to the server so that users can access our application.

By executing in the project npm run build (The correspondence is package.json defined in next build ), it will build our application into JavaScript, CSS and other files, these files or files running in the browser, the browser essentially only supports the execution of JavaScript, and does not natively support React, so we need to compile it into files that the browser can execute. Or JavaScript executed in the Node.JS environment of the server. This part enables us to handle some server-side logic. This part was not covered in our previous courses, but in subsequent courses, logic such as signature verification depends on the implementation of the server.

Successful execution can see an effect similar to the following:

After the build is complete you can continue to execute npm run start in this way, your application will be successfully deployed locally. Correspondingly, if you need to deploy on your own server, then the process is the same, you need to install dependencies in your server, build and pass. npm run start or next start launch your app.

Of course, if you are using umi other front-end frameworks, such as, have similar logic and usually need to build and start services. If the build product is a static resource that only runs in the browser environment, then you only need a framework like Nginx or express to deploy a Web container for storage, or you can use it. Github Pages to deploy.

Vercel-based deployment

in this section we guide you based on Vercel deploy your application. Next.js is the framework that Vercel is officially supporting. It provides a very simple deployment method. You only need to upload your code to a code hosting platform such as Github or Gitlab, and then select your repository on Vercel. It will automatically help you build and deploy your application.

First of all, please push your previous code to your own Github, or you can Fork this repository. https://github.com/WTFAcademy/WTF-Dapp , we are in demo the complete code is available in the folder.

Log in to Vercel and create a new project in its console:

next, select and import your Github project. In this process, you may need to authorize Vercel to access your Github repository:

you need to select Root Directory as the Root Directory of your Next.js project and click Deploy:

everything will be done automatically:

finally, the Demo of this tutorial is presented in https://wtf-dapp.vercel.app/web3 it's in.

Custom Domain Name

Vercel will provide a default domain name, but usually we need a custom domain name, which is more professional. You can find your project in the Vercel console and add your domain name in Domains:

after adding, you need to add a CNAME record to your domain name service provider according to the prompts, so that your domain name can point to Vercel's server.