Using HTTP "Delete" method in REST API on Vercel

vercel api javascript

We can use HTTP DELETE method instead of POST to implement deleting of data from a database in a REST API. This allows us to implement CRUD operations using a single API endpoint. Since HTML forms have no support for delete method, we should use JavaScript to send a delete request to server. Note that such requests should not have a body, so we provide an empty body to avoid browsers like Chrome throwing an error.

fetch(`/api/endpoint/${post_id}`, {
   method: 'DELETE',
   body: JSON.stringify({})
});

Then on the server the request can be processed like this:

import { ObjectId } from 'mongodb';

// code removed for sake of simplicity

const deleteDocument = async (request, collection) => {
  if (request.method === 'DELETE') {
    const query = {_id: new ObjectId(request.query.post_id)};
    const result = await collection.deleteOne(query);
    console.log(result.deletedCount);
  }
};

To make sure that post_id is received as a query in backend, we need to provide a rewrite rule in vercel.json:

{
    "rewrites": [
      {
        "source": "/api/endpoint/:post_id",
        "destination": "/api/endpoint"
      }
    ]
}

NPM Scripts for serverless and server environments

vercel

Do not use “start” and “dev” to start a project with express.js if you wish to host it on Vercel, because then if you run project locally using “vercel dev” it will run these nom scripts. Instead use “start-express” and “dev-express” so you can test locally for both server and servereless environments.

Using GitHub Actions to deploy on Vercel

vercel

When you install Vercel application on GitHub and give it access to your repository, GitHub will trigger a deployment on Vercel every time there is a new commit in your main branch, however if your API on Vercel only needs to be updated when a certain file or folder is changed, these deployments are unnecessary. You can avoid unnecessary deployments to Vercel using GitHub Actions as described here: https://vercel.com/guides/how-can-i-use-github-actions-with-vercel.

Another advantage of using GitHub Actions with Vercel is that you can uninstall Vercel application from GitHub as Vercel no longer needs access to your GitHub repository. You simply need to create a token on Vercel and store it along with your Vercel Org and Project IDs (found in .vercel/project.json in root of your project) in secrets on Github at https://github.com/your-username/your-repository/settings/secrets/actions

vercel secrets on GitHub

Deploy to Vercel

vercel

In this example you will create a static HTML page that calls an api (Node.js serverless function) which responds by returning the word "Hello World" and displaying it in the browser...

Disabling preview deployments in Vercel

vercel

If you don't want Vercel to do preview deployments for other branches of your repository you can disable preview deployments by going to your project's settings > git > Ignored Build Step and add the following command:

if ["$VERCEL_ENV" == "production"]; then exit 1; else exit 0; fi

This is probably the easiest way. Another way would be to add a vercel.json to all branches and set "deploymentEnabled" to false for any branches that should not trigger deployment, like below:

{
  "git": {
    "deploymentEnabled": {
      "gh-pages": false
    }
  }
}

More info: