Dapp deployment

Let's look at the two most convenient and popular hosting providers out there. They are not only rich in features but also have an outstanding developer experience.

Netlify deployment

The Netlify services are powerful because of two core things:

  1. Cloud systems possibilities.
  2. Excellent development experience.

At first sight, It looks like Netlify is suitable only for static and simple websites, but it is so wrong to claim that. I will tell you why in the context of NextJS support on which our Elven Tools Dapp is built.

Because NextJS is a full-stack framework, there is always a little more work to make the best custom setup. If you don't know what you are doing or want to have the best options right away, Netlify will be an excellent choice.

They built a lot of tools and ready-to-use configurations. Let's see what Ntlify can do in the context of NextJS:

  1. It discovers that you use NextJS and installs required plugins and configuration.
  2. It supports Incremental Static Regeneration (ISR).
  3. It supports NextJS Middlewares.
  4. It supports Page routing and NextJS API out of the box.
  5. It supports image optimization (next/image).
  6. It has docs pages, especially for NextJS. See it here.
  7. It supports SSL by default.

How is it possible?

Netlify services uses special NextJS build plugin. Don't worry. If you build on Netlify, you don't have to install it. It will be handled automatically.

Ok, but what you should do to prepare the Elven Tools Dapp for the deployment. Let's go through the steps. Let's assume that you've cloned the repository and provided changes. Then, when you need to deploy, you can follow these steps: You will also be able to see the walkthrough video below.

  1. Create a new project in the Netlify admin panel.
  2. You will do this by connecting to the GitHub repository.
  3. The only configuration you would need to provide is the environment variables (see it in the video).
  4. By default, all code pushed to the 'main' branch will trigger the Netlify deployment.
  5. Netlify creates the random domain name, but you can change it or/and you can connect your custom one.

For more details on deploying a NextJS app, check the official docs. And for this specific case, please watch the walkthrough video below:

Be aware that there were changes in the env vars list, the video is older, you will always find actual list in the .env.example file

Vercel deployment (TODO)

Soon there will also be some more information about how to deploy it using Vercel. Stay tuned!

Contents