Edge URL Redirects

You can set URL redirect rules in Contentstack Launch to redirect specific URLs in your source code to different URLs of your choice. URL redirection offers several advantages, such as redirecting users to the updated URLs, redirecting users to a customer landing page with an opt-in form, guiding users to valid URLs instead of them landing on broken links, etc.

Contentstack Launch lets you specify both static and dynamic redirections at the CDN edge. You can set your custom redirects by adding them in the launch.json file and then adding the launch.json file to your codebase.

This step-by-step guide lets you create a project in Launch that allows URL redirects.

Prerequisites

1. Contentstack account
2. Access to Launch for your organization

Steps for Execution

1. Create the launch.json file
2. Deploy your project in Launch

1. Create the launch.json File

   Follow the steps to create the launch.json file for URL redirects:

   1. Open your source code folder.
   2. Create a JSON file named launch.json inside the folder, and paste the following code into it:
      {
        "redirects": [
          {
            "source": "/source",
            "destination": "/destination",
            "statusCode": 308
          }
        ]
      }
      

   3. Replace /source in the code with your source route.
   4. Replace /destination in the code with your destination route.

      Note: The source and destination URLs must be within 512 characters each.

   5. Based on the type of redirection you require, add one of the following status codes in the statusCode field:
      • For permanent redirection: 301 or 308.
      • For temporary redirection: 302 or 307.

        Note: By default, the statusCode value is set to 308 if you do not specify the statusCode field.

   6. Save the launch.json file.

      Note: The file size must be limited to 200KB.

   

   Examples for the uses of Edge URL Redirects

   • Using a path variable, you can create dynamic, structured, and manageable redirections on your website.
     Example:
     {
       "redirects": [
         {
           "source": "/blog/:slug",
           "destination": "/news/:slug",
           "statusCode": 308
         }
       ]
     }
     

     This example uses a path variable slug to redirect requests to any path (including subdirectories) under /blog/ from the root of your website to a corresponding path under /news/ with respect to the root of your website. The redirection is done with a 308 status code.

   • Assigning path variables with regex-based redirection ensures seamless redirection of blog post URLs to their corresponding post pages.
     Example:
     {
       "redirects": [
         {
           "source": "/blog/post/:id=(\\d+)",
           "destination": "/posts/:id",
           "statusCode": 308
         }
       ]
     }
     

     In this example, if the value from URLs like /blog/post/123 matches with the regular expression in the source pattern /blog/post/:id=(\\d+), it redirects them to /posts/123, dynamically replacing :id with the captured value.

   • Using an absolute path, you can redirect your sites to external links.
     Example:
     {
       "redirects": [
         {
           "source": "/blog/post",
           "destination": "https://mywebsite.com/news/page",
           "statusCode": 308
         }
       ]
     }
     

     In this example, the requests to the path /blog/post from the root of your website are redirected to the absolute path of an external site https://mywebsite.com/news/page.

   • You can redirect URLs that include query parameters.
     Example:
     {
       "redirects": [
         {
           "source": "/test/:path((?!excluded-uri).+)\\?posts=:search(.+)",
           "destination": "/:path/:search",
           "statusCode": 301
         }
       ]
     }
     

     With this configuration, requests like /test/my-page?posts=my-search redirects to /my-page/my-search while preserving the query parameter. The :path and :search variables capture values from the source URL and insert them into the destination URL.

     These examples demonstrate the flexibility of Edge URL Redirects, allowing you to create dynamic and adaptable redirection rules for web development and server-side routing.

2. Deploy your Project in Launch

   Deploy your project in Launch by importing the source code from GitHub or by uploading the source code folder.

   After successful deployment, the Logs section displays the count of redirects as follows:

   

Limitation

• Adding a launch.json file to an app within a monorepo is currently not supported.