Redirects

Overview

When a user visits a URL that needs to be redirected, such as blokhost.com/features/forms to blokhost.com/docs/forms, the server sends an explicit instruction to the browser to find the requested resource elsewhere.

HTTP/HTTPS is the web protocol that enables the communication between the client and server. The server uses HTTP status codes to communicate the status of a request to the browser. Commonly known status codes include 200 OK for successful requests and 404 Not Found for failed requests. HTTP status codes are categorized by response type, with redirect responses under 3XX.

Handling Redirects

Developers can easily configure redirects in BlokHost without complex server configurations or response header modifications. Instead, you can create redirects directly from the BlokHost dashboard, allowing you to quickly manage and update them as needed.

With BlokHost, you don't need to worry about the technical details of creating redirects, such as configuring .htaccess for Apache or nginx.conf for Nginx. Instead, you can focus on your website content and let BlokHost redirect content for you, making it easier to manage your website and ensuring visitors are directed to the correct page.

The _redirects File

The _redirects file is a configuration file that allows you to specify how incoming requests to your website should be redirected. This file should be placed in the root of your published site and contains a list of redirect rules in the format of source destination [status]. The source is the URL being redirected, the destination is the new URL, and the status is the HTTP status code for the response. This file should generally be in your build output file, a folder called build/ or public/, depending on your project's configuration.

A basic redirect in BlokHost looks like this:

/login  /web3/login

By default, redirect rules are given a status code of 301, a permanent redirect. You can easily make the redirect temporary by specifying a status code like this:

/posts /blog 302

You can also specify the HTTP status code for the response. Setting status codes in the redirect rules can be helpful when you want to handle no longer used routes and permanently deleted resources gracefully.

/store  /not_found 404

Basic Redirect

A basic redirect in BlokHost looks like this:

/login  /web3/login

Status Code Redirect

By default, redirect rules are given a status code of 301, a permanent redirect. You can easily make the redirect temporary by specifying a status code like this:

/posts /blog 302

You can also specify the HTTP status code for the response. Setting status codes in the redirect rules can be helpful when you want to handle no longer used routes and permanently deleted resources gracefully.

/store  /not_found 404

Wildcards

Wildcards can also be used to match patterns in the URLs being redirected. For example, you can use a wildcard to match all blog posts and redirect them to a new blog:

/blog/*  /new-blog 301

Using wildcard routes can be very useful when you want to redirect many URLs with a common pattern. However, it's essential to use them carefully and test thoroughly to ensure you're not accidentally redirecting URLs that should not be redirected.

Clean URLs in SPAs

Another everyday use case for redirects in BlokHost is to enable clean URLs in single-page applications (SPAs) with a history push state. Without redirects, refreshing a page in a SPA with a URL like 1a9b600b66096b386057c6b85033e32d.blok.host/about results in a 404: Not Found error page.

Routes in SPAs are client-side rendered, meaning that route changes only correspond to changes in the page content. Without an explicit redirect, BlokHost bots assume that you are requesting a page separate from /index.html; since that page doesn't exist, it returns an error. To enable clean URLs in your BlokHost deployed SPAs, add the following rule to your redirects file:

/* /index.html 200

Redirecting all pages to a maintenance page

There may be times when you need to take your website down for maintenance or updates. Rather than showing a 404 error or letting users see a broken website, you can redirect all pages to a maintenance page using the _redirects file.

To do this, you can use a wildcard route to match all incoming requests and redirect them to your maintenance page. In addition, you can use a status code of 503, which indicates that the server is temporarily unavailable due to maintenance or overload.

Here's an example of how you can redirect all pages to a maintenance page:

/*    /maintenance.html 503

In this example, the * wildcard matches any incoming request, and all requests are redirected to the maintenance.html page with a status code of 503.

Redirecting to an external website

Sometimes, redirect users to an external website rather than a page on your site. For example, if you're running a promotion with a partner company, redirect users to their website to complete the transaction.

To redirect to an external website, you can specify the full URL in the destination field of your redirect rule. You can also use a status code of 301 or 302 to indicate whether the redirect is permanent or temporary.

Here's an example of how you can redirect to an external website:

/jobs    https://careers.example.com 301

In this example, any requests to /jobs are redirected to https://careers.example.com with a status code of 301. This code will tell search engines that the redirect is permanent and update their index accordingly.