Deploy Solana Dapp to vercel

Introduction

In this tutorial, we'll walk through the process of deploying a Solana dapp to Vercel. We'll cover everything from setting up your project to deploying your application and configuring the build process.

Project structure

Before we can deploy our Solana dapp to Vercel, we need to understand the project structure and build process.

Let's examine the project root directory to get an overview of our application's structure.

(base) dylankyc@smoltown ~/Code/solana/projects/bank (master)> l
drwxrwxr-x    - dylankyc  5 Jan 15:49 anchor
.rw-r--r--  124 dylankyc  1 Jan 04:41 Makefile
.rw-r--r--  201 dylankyc  1 Jan 04:52 next-env.d.ts
.rw-r--r--   92 dylankyc  6 Dec  2024 next.config.mjs
drwxr-xr-x    - dylankyc  5 Jan 16:04 node_modules
.rw-r--r-- 1.5k dylankyc  1 Jan 05:06 package.json
.rw-r--r-- 358k dylankyc  1 Jan 05:06 pnpm-lock.yaml
.rw-r--r--  135 dylankyc  6 Dec  2024 postcss.config.mjs
drwxrwxr-x    - dylankyc 31 Dec  2024 public
.rw-r--r-- 2.0k dylankyc  1 Jan 12:16 README.md
drwxrwxr-x    - dylankyc 31 Dec  2024 src
.rw-r--r--  311 dylankyc  6 Dec  2024 tailwind.config.ts
.rw-r--r--  728 dylankyc  6 Dec  2024 tsconfig.json

Setup

First, we need to install the Vercel CLI:

npm install -g vercel

Then, we can deploy the project to Vercel:

vercel

The output will look something like this:

Vercel CLI 39.1.3
? Set up and deploy β€œ~/Code/solana/projects/bank”? yes
? Which scope should contain your project? dylankyc's projects
? Link to existing project? no
? What’s your project’s name? bank
? In which directory is your code located? ./
Local settings detected in vercel.json:
No framework detected. Default Project Settings:
- Build Command: `npm run vercel-build` or `npm run build`
- Development Command: None
- Install Command: `yarn install`, `pnpm install`, `npm install`, or `bun install`
- Output Directory: `public` if it exists, or `.`
? Want to modify these settings? no
πŸ”—  Linked to dylankycs-projects/swap (created .vercel and added it to .gitignore)
πŸ”  Inspect: https://vercel.com/dylankycs-projects/bank/5TMVYeZkKmvmt9FeTZE7B6KT7C63 [4s]
βœ…  Production: https://bank-382d3cupz-dylankycs-projects.vercel.app [4s]
πŸ“  Deployed to production. Run `vercel --prod` to overwrite later (https://vercel.link/2F).
πŸ’‘  To change the domain or build command, go to https://vercel.com/dylankycs-projects/bank/settings

Build

Build and deploy the project using vercel build and vercel deploy. This will compile your Next.js application and prepare it for deployment:

(base) dylankyc@smoltown ~/Code/solana/projects/bank (master)> vercel build && vercel deploy
Vercel CLI 39.1.3
Detected `pnpm-lock.yaml` version 9 generated by pnpm@9.x
WARNING: You should not upload the `.next` directory.
Installing dependencies...
Lockfile is up to date, resolution step is skipped
Already up to date

Done in 1.3s
Detected Next.js version: 14.2.5
Running "pnpm run build"

> template-next-tailwind-counter@0.1.0 build /Users/dylankyc/Code/solana/projects/bank
> next build

  β–² Next.js 14.2.5

   Creating an optimized production build ...
 βœ“ Compiled successfully

./src/components/ui/ui-layout.tsx
21:13  Warning: Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element  @next/next/no-img-element

info  - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
 βœ“ Linting and checking validity of types
 βœ“ Collecting page data
   Generating static pages (2/9)  [=   ]bigint: Failed to load bindings, pure JS will be used (try npm run rebuild?)
(node:74320) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
bigint: Failed to load bindings, pure JS will be used (try npm run rebuild?)
(node:74319) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
bigint: Failed to load bindings, pure JS will be used (try npm run rebuild?)
(node:74326) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
bigint: Failed to load bindings, pure JS will be used (try npm run rebuild?)
(node:74318) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
   Generating static pages (2/9)  [==  ]bigint: Failed to load bindings, pure JS will be used (try npm run rebuild?)
(node:74321) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
 βœ“ Generating static pages (9/9)
 βœ“ Collecting build traces
 βœ“ Finalizing page optimization

Route (app)                              Size     First Load JS
β”Œ β—‹ /                                    610 B           254 kB
β”œ β—‹ /_not-found                          876 B          88.1 kB
β”œ β—‹ /account                             1.33 kB         234 kB
β”œ Ζ’ /account/[address]                   553 B           254 kB
β”œ β—‹ /api/hello                           0 B                0 B
β”œ β—‹ /bank                                4.3 kB          258 kB
β”” β—‹ /clusters                            444 B           254 kB
+ First Load JS shared by all            87.2 kB
  β”œ chunks/601-23baffd8957944ab.js       31.5 kB
  β”œ chunks/9ae566a6-41100044c803629e.js  53.7 kB
  β”” other shared chunks (total)          2.03 kB


β—‹  (Static)   prerendered as static content
Ζ’  (Dynamic)  server-rendered on demand

Traced Next.js server files in: 207.115ms
Created all serverless functions in: 80.291ms
Collected static files (public/, static/, .next/static): 3.828ms
βœ…  Build Completed in .vercel/output [26s]

Deploy

Now, let's deploy it using the vercel deploy command. This will create a preview deployment that we can test before pushing to production.

Vercel CLI 39.1.3
πŸ”  Inspect: https://vercel.com/dylankycs-projects/bank/9zB7J9gBtVcWGdeJhkF1xueKLrkg [4s]
βœ…  Preview: https://bank-4gds13j1s-dylankycs-projects.vercel.app [4s]
πŸ“  To deploy to production (bank-solana.vercel.app), run `vercel --prod`

Deploy to production

Once we've verified the preview deployment works as expected, we can deploy to production using vercel --prod. This will update our main production URL with the latest changes:

(base) dylankyc@smoltown ~/Code/solana/projects/bank (master)> vercel --prod
Vercel CLI 39.1.3
πŸ”  Inspect: https://vercel.com/dylankycs-projects/bank/J8UCMJ9U87SbvidTemwg5YYr9Bq8 [2s]
βœ…  Production: https://bank-9qk44c3o2-dylankycs-projects.vercel.app [2s]

Access Your dApp

You can now access your Solana dapp at the URL provided in the output. For example, if the output was:

https://bank-solana.vercel.app

You can access your dapp at https://bank-solana.vercel.app.