The context path is the prefix of a URL path that is used to select the context(s) to which an incoming request is passed.

Context path is also known as sub-path or sub-directory

Many apps are hosted at something other than the root (/) of their domain. For example, My personal blog is live at https://chetanraj.in/blog or you can host your site on GitHub Pages at https://example.github.io/blog.

Each of these sites need a prefix added to all paths on the site. So a link to a blog which is having the slug “/features-in-es6/” should be rewritten as “/blog/features-in-es6.”

In addition to the slug of the blog, links to various resources (JavaScript, CSS, images, and other static content) need the same prefix, so that the site continues to function correctly when served with the path prefix in place.

For this to work, you need to specify the config according to them. This allows the built bundle to be deployed under that path.

Here are some examples where you need to specify the context path before building your app.

Create React App

{
    ...
    "homepage": ".",
    ...
}

Vue

module.exports = {
  baseUrl: '/blog',
};

Gatsby

module.exports = {
  pathPrefix: '/blog',
};

NOTE: For Gatsby, you have to add --prefix-paths in your build command, like:

gatsby build --prefix-paths

If this flag is not passed, Gatsby will ignore your pathPrefix and build the site as if hosted from the root domain.

For static files

Also, If you are serving the website from static files, then paste the sub-directory folder in the root folder. This will serve from the sub-directory.