Fullstack development on Vercel

Prerequisite

  • Github account

Vercel simplified

Web app

Serverless API endpoints

Vercel simplified

Vercel and NREC

NREC

FUSEKI

NREC

KIBANA
ES

SANITY
 

token

token

(at build time)

Web apps

  • Autodetects: Next.js, Nuxt.js, Svelte, Create React App, Gatsby.js, Remix, SvelteKit (Legacy Beta), Blitz.js (Legacy), Astro, Hexo, Eleventy, Docusaurus 2, Docusaurus 1, Preact, SolidStart, Dojo, Ember.js, Vue.js, Scully, Ionic Angular, Angular, Polymer, SvelteKit, Ionic React, Gridsome, UmiJS, Sapper, Saber, Stencil, RedwoodJS, Hugo (v0.58.2), Jekyll, Brunch, Middleman, Zola (v0.13.0), Vite, VitePress, VuePress, Parcel, Sanity, Hydrogen...
  • Server Side Rendering (SSR)
  • Client Side Rendering (CSR)
  • Static Site Generation (SSG)
  • Incremental Static Regeneration (ISR)
  • "Newer" cache strategies (Remix and Next.js v13)
    • Auto cache-busting

Serverless APIs

import type { VercelRequest, VercelResponse } from '@vercel/node';

export default (request: VercelRequest, response: VercelResponse) => {
  const { name } = request.query;
  response.status(200).send(`Hello ${name}!`);
};
/api/[name].ts

Supports: Javascript, Go, Python, Ruby.

Node.js or Edge environment

Example: pure Node API application

Serverless APIs

export default async function handler(req, res) {
  const { query: { esIndex, id }, method } = req

  switch (method) {
    case 'POST':
      if (req.query.token !== process.env.ES_INDEX_SECRET) {
        return res.status(401).send('You are not authorized!')
      }
      
      try {
        const url = `${API_URL}/items/${id}?as=rdf`
        const response = await fetch(url)

        if (response.status === 404) {
          return res.status(404).json({ message: "ID not found" })
        }

        // Deal with response
        if (response.status >= 200 && response.status <= 299) {
          const result = await response.json()

          // Frame response with label_no props instead of standard JSON-LD language objects
          const awaitFramed = jsonld.frame(result, {
            '@context': [`${API_URL}/ns/es/context.json`],
            '@type': 'HumanMadeObject',
            '@embed': '@always',
          })
          let framed = await awaitFramed
          framed.id = `${API_URL}/items/${framed.identifier}`

          // We assume none lang tags is no
          framed = JSON.parse(JSON.stringify(framed).replaceAll('_none":', '_no":'))

          const esResponse = await client.index({ index: esIndex, id: framed.identifier, document: framed }, function (err) {
            if (err) { throw Error(err)}
          })

          return res.status(200).json(esResponse)
        } else {
          console.log(response.status, response.statusText);
          throw Error(response.statusText)
        }
      } catch (err) {
        (err) => { return res.status(200).json({ message: err }) }
      }
      break
    default:
      res.setHeader('Allow', ['POST'])
      res.status(405).end(`Method ${method} Not Allowed`)
  }
}
POST /search/[esIndex]/[id].js

Example from api-ub.vercel.app (Next.js)

Could be all you need

All you need if...

  • want APIs all over
  • want Serverless because there is not enough time in the world to care about linux
  • want a Service-architecture
  • simply want magic, need magic

 

I'll come to when Vercel is not enough ;-)

Agenda

We are going to ...

  1. One-click install a git repo, with next.js v13 and Sanity v3
  2. Look at all of the stuff in the dashboard!
  3. Make changes and try the build and deployment functions
  4. Collaborate on a feature branch

 

Deploy

Limitations (for pros)

Max 45 minute build time

6000 deployments per day

Unlimited functions (unlimited API endpoints)

60 seconds execution time (serverless)

30 seconds execution time (edge)

Max 10 team members

60 Vercel projects per git repo (monorepo)

 

https://vercel.com/docs/concepts/limits/overview

Limitations per month

1 TB bandwidth

400 hours build time

 

More complicated limitations see the link

 

https://vercel.com/docs/concepts/limits/overview

My thoughts

No deployment from start to finish usually take more than fifteen minutes!

All the preview and test urls you could ever want!

Tests (almost) not necessary!

What, what??!?! 

Ok, if static generating, at least. No broken build goes to production

Can build strong APIs given good underlying services

Vercel

By Tarje Lavik

Vercel

  • 94

More from Tarje Lavik