{ "componentChunkName": "component---src-pages-blog-markdown-remark-fields-slug-js", "path": "/blog/how-to-deploy-supertokens-with-react-nodejs-express-on-vercel", "result": {"data":{"markdownRemark":{"html":"

In this tutorial, you’ll learn how to add SuperTokens authentication to your React and NodeJS application and deploy it on Vercel.

\n

Getting started

\n

To get started with SuperTokens, please visit the Recipe Guides page and pick the login method you want for your application. After choosing a guide, follow the quick setup section or one of the sections for integrating with a framework that you have chosen.

\n

We also have a blog post for how to integrate email password + social login with express and react, if that is what you are looking for.

\n

Restructuring your application for Vercel deployment

\n

Once you have done the basic implementation on your local system, we want to do the following to convert your application so that it can be deployed on Vercel:

\n
    \n
  1. \n

    Create an api folder. This folder will contain the API logic that we can deploy on Vercel. We will be exposing the API’s entry point via an index.js file in this folder.

    \n
    2. \n
  2. \n

    Open the index.js and export app at the end of the file as shown below

    \n\n \n \n \n \n
    module.exports = app;\n
    \n
    3. \n
\n
\n

Note: We are deploying our backend as a standalone express app, and not with /pages/api serverless functions that Vercel provides. If you want to deploy using /pages/api, then you can check out our nextJS framework integration guide that’s within the recipe guide.

\n
\n

Change the appInfo config to get Vercel deployments to work

\n

To enable your project to run on production and the inspect sites for Vercel, you need to make the websiteDomain and appDomain point to the URLs generated by Vercel. The production URL is always the same for an app, but the inspect URL keeps changing. To allow it to work in this dynamic condition, we must set the values of apiDomain and websiteDomain dynamically.

\n

On the backend

\n\n \n \n \n \n
appInfo = {\n    appName: \"My App\",\n    apiDomain: process.env.VERCEL_URL,\n    websiteDomain: process.env.VERCEL_URL,\n    apiBasePath: \"/api/auth\",\n    websiteBasePath: \"/auth\",\n},
\n

Vercel provides an env var - process.env.VERCEL_URL - to the backend which is equal to the inspect URL / production URL (depending on the site that’s loaded). So we use this to set the apiDomain and websiteDomain values dynamically.

\n

On the frontend

\n

We can use window.location.origin to get the currently loaded URL and set those to the apiDomain and websiteDomain. This way, even if the inspect URL keeps on changing, it will still point to the current domain.

\n\n \n \n \n \n
appInfo = {\n    appName: \"TodoApp\",\n    apiDomain: window.location.origin,\n    websiteDomain: window.location.origin,\n    apiBasePath: \"/api/auth\",\n    websiteBasePath: \"/auth\",      \n},\n
\n
\n

This only works if the frontend and backend of your application have the same domain. If your backend is hosted elsewhere and you use Vercel only for the frontend, be sure to change the apiDomain on the frontend and backend to point to your backend server. In this case however, your app may not function properly for inspect deployments since your backend server has no way of knowing what the inspect URL of the frontend site would be on each deployment.

\n
\n

Update the CORS Middleware

\n

You also need to update the CORS middleware origin with the VERCEL_URL environment variable.

\n\n \n \n \n \n
app.use(\n    cors({\n        origin: process.env.VERCEL_URL,\n        allowedHeaders: ['content-type', ...SuperTokens.getAllCORSHeaders()],credentials: true,\n    })\n);
\n

Configure Vercel and Deploy

\n

With the backend and frontend of your application code updated, create a vercel.json file in the root directory of your application which will instruct Vercel to push all traffic on /api/* path to our our express backend server:

\n\n \n \n \n \n
{\n    \"rewrites\": [{ \"source\": \"/api/(.*)\", \"destination\": \"/api\" }]\n}
\n

Finally, to deploy the app to Vercel, you need to run the vercel command on the root of your project:

\n\n \n \n \n \n
vercel
\n

Once deployed, you should be able to test the login functionality on the inspect URL and the production URL.

\n

Demo app

\n

We also have a demo app on our GitHub that has Email Password login with express and React, and is configured to work with Vercel. You can even see its live preview.

","frontmatter":{"date":"April 14, 2022","title":"How to deploy SuperTokens with React and NodeJS on Vercel","cover":"vercel.png","author":"Rishabh Poddar","description":"This tutorial wil guide you on how to add SuperTokens to a React and Express app deployed on Vercel"},"fields":{"slug":"/how-to-deploy-supertokens-with-react-nodejs-express-on-vercel/"}},"site":{"siteMetadata":{"title":"SuperTokens Blog"}}},"pageContext":{"id":"e2071817-67ef-54d0-a4ff-429db8fbe31f","fields__slug":"/how-to-deploy-supertokens-with-react-nodejs-express-on-vercel/","__params":{"fields__slug":"how-to-deploy-supertokens-with-react-nodejs-express-on-vercel"}}}, "staticQueryHashes": []}