Vercel Deployment

About 2 min...

We released the @waline/vercel package as server package, Vercel deployment is also our most recommended way.

How to Deploy

Click the blue button above, it will redirect you to vercel to deploy with waline template.
Note
If you haven't logined, we recommend you to sign in with GitHub.
Input your Vercel project name then click Create.
Create Project
Repo which named you input before will be created and initialized automatically base on waline example template by Vercel.
After one minute or two, vercel should finish the deployment. Click Go to Dashboard button to redirect to your application dashboard.

Create Database

Click Storage at the top to enter the storage service page, choose Create Database. Under Marketplace Database Providers, select Neon, then click Continue.
You will be prompted to create a Neon account. Choose Accept and Create. Next, select the database plan configuration, including region and quota. You can leave defaults and click Continue.
neon
Define the database name. You can keep the default and click Continue.
neon
Now the database appears under Storage. Click it and choose Open in Neon to jump to Neon. In Neon, select SQL Editor on the left, paste the SQL from waline.pgsql into the editor, and click Run to create tables.
neon
neon
After a short while you should see a success message. Go back to Vercel, click Deployments, then click Redeploy on the latest deployment to make the new database configuration take effect.
redeploy success
Vercel will redirect to Overview and start deploying. When STATUS becomes Ready, click Visit to open the deployed site. This URL is your server address.
visit

Assign Domain

Click Settings - Domains to go to domain setting page.
Input domain you want to assign and click Add button.
Add domain
Add a new CNAME record in your domain service server.
Type Name Value
CNAME example cname.vercel-dns.com
You can use your own domain to visit Waline after it takes effect. 🎉
- Comment system: example.your-domain.com
- Admin panel: example.your-domain.com/ui
success

Type	Name	Value
CNAME	example	cname.vercel-dns.com

HTML Import

Set up as follows in your webpage:

Import Waline styles from https://unpkg.com/@waline/client@v3/dist/waline.css.
Create a <script> tag that uses init() from https://unpkg.com/@waline/client@v3/dist/waline.js, and pass required options el and serverURL.
- el is the element used to render Waline. It can be a CSS selector string or an HTMLElement.
- serverURL is your server address obtained in the previous step.

<head>
  <!-- ... -->
  <link
    rel="stylesheet"
    href="https://unpkg.com/@waline/client@v3/dist/waline.css"
  />
  <!-- ... -->
</head>
<body>
  <!-- ... -->
  <div id="waline"></div>
  <script type="module">
    import { init } from 'https://unpkg.com/@waline/client@v3/dist/waline.js';

    init({
      el: '#waline',
      serverURL: 'https://your-domain.vercel.app',
    });
  </script>
</body>

Comment Admin

After deployment, visit <serverURL>/ui/register to register. The first registered user becomes the administrator.
After logging in, the administrator can manage comments: edit, mark, or delete.
Users can also register via the comment box. After login they will be redirected to their profile page.

TIPS: The comment area is only for demo. If you have any questions, please go to Github Discussion to ask.