New to Kinvey? Get started today with this tutorial or attend our getting started webinar.

Web Hosting

Kinvey Web Hosting allows you to host websites and web applications that are working through static files. This includes:

  • Single Page Applications (SPAs)
  • Progressive Web Applications (PWAs)
  • Static HTML websites

The following features are supported in Kinvey Web Hosting:

  • Content Delivery Network (CDN)
  • SSL encryption
  • Publishing under kinveyweb.com
  • Continuous Integration/Continuous Integration (CI/CD) enablement through Kinvey CLI

Restrictions

Kinvey Web Hosting poses the following default restrictions:

  • Maximum number of websites per app: 3
  • Maximum number of websites per organization: 10
  • Maximum size of a website: 200 MB
  • Maximum size of a single file: 50 MB

Contact Kinvey Support if you need some of the above limits adjusted.

Creating a Website

Before you can upload files, you need to create a website. In Kinvey terms, creating a website means selecting an internal name for the website and giving it a description. Nothing will appear online until you upload your first files.

Most of the time, you would create a website using Kinvey Console but if you want to include this task in CI/CD, you can also utilize Kinvey CLI. When using Kinvey Studio to develop a web app, it will create a web site for you as soon as you start deploying the app to Kinvey Web Hosting.

To create a website using Kinvey Console:

  1. On the Kinvey Console main screen, select the Websites tab.
  2. Click Add Website.
  3. Give the website a Name and an optional Description.
  4. Specify the website's scope: App or Organization.
  5. Click Add Website.

To create a website using Kinvey CLI:

  1. Ensure that you are logged in.
  2. Execute the websites create command to create a website.

    For example:

     kinvey website create MyWebsite --app MyApp

See the Kinvey CLI documentation for the full list of options.

Deploying a Website

After you create a website, you need to deploy files to it. The principal tool for deploying websites is Kinvey CLI. For web apps developed using Kinvey Studio, you can deploy directly from it.

Note that you can only deploy a website as a whole. You cannot deploy single files.

Deploying a Website Using the Kinvey CLI

You can deploy a folder or a single-file website using the website deploy Kinvey CLI command. Before you deploy, ensure that the index file of your website matches the index file name specified when creating the website.

To deploy a website:

  1. Ensure that you are logged in.
  2. Execute the websites deploy command.

    For example, to deploy a folder:

     kinvey website deploy --website MyWebsite --path /websites/MyWebsite/

See the Kinvey CLI documentation for the full list of options.

The CDN cache is automatically invalidated on deploy. It takes time for the invalidation to complete during which you may not see the latest changes on the public URL.

Deploying a Website Using Kinvey Studio

Kinvey Studio has a built-in integration with the Kinvey Web Hosting. If you are using Kinvey Studio, you can deploy your web project to Kinvey from within the product.

For more information, refer to the Kinvey Studio documentation.

The CDN cache is automatically invalidated on deploy. It takes time for the invalidation to complete during which you may not see the latest changes on the public URL.

Previewing a Website

After you have deployed files to a website, you can preview them on a preview URL. The preview functionality is designed for development purposes. It is not wired through CDN and is not affected by CDN cache. It always shows the latest files that you deployed.

The preview URL is generated automatically. It is public but not SSL protected. It may expire after some time, even if you haven't made changes to the website. You should not store it with the intention to reuse it and you should not give it to customers.

To preview a website:

  1. On the Kinvey Console main screen, select the Websites tab.
  2. Open the website that you want to preview.
  3. On the Overview tab, click Preview.

    The website opens in your default web browser.

When deploying using Kinvey CLI, the preview URL also appears in the command output on success.

Publishing a Website

To get a URL that you can share publicly, you need to explicitly request it by making your website public. This essentially creates a URL that:

  • is wired through CDN
  • is SSL protected
  • will not change unless you explicitly change it
  • serves the files that you already deployed

When you make your website public, you are effectively attaching a public URL to the files that you have already uploaded and previewed. As a consequence, all later website versions that you deploy will automatically appear public as well.

You can make your website public by utilizing kinveyweb.com sub-domains. This is an integrated way to easily get a public-facing URL for your website.

Example URL: https://example.global.kinveyweb.com

Note that the global part in the URL differs based on the Kinvey instance that you are using.

The CDN cache is automatically invalidated on deploy. It takes time for the invalidation to complete during which you may not see the latest changes on the public URL.

To publish a website:

  1. On the Kinvey Console main screen, select the Websites tab.
  2. Open the website that you want to publish.
  3. On the Public Access tab, type an URL prefix and then click Enable Access.

To unpublish a website:

Note that the website will continue to be publicly accessible at the preview URL.

  1. On the Kinvey Console main screen, select the Websites tab.
  2. Open the website that you want to unpublish.
  3. On the Public Access tab, click Disable Access.

Advanced Configuration

Index and Error Pages

You can control the filenames for the index and error pages of your website.

Index Page

The index page is the initial page that gets displayed when visitors load your website without specifying a particular page. The default filename for the index page is index.html.

Example: Website URL: admin-panel.example.com Website index page: index.html Result: https://admin-panel.example.com returns the content of https://admin-panel.example.com/index.html

To change the name of the file to display as an index page:

  1. On the Kinvey Console main screen, select the Websites tab.
  2. Open the website that you want to configure.
  3. On the Routing tab, type the file name in the Index page text box.

You can also specify an index file name with the --indexPage option when creating the website using Kinvey CLI.

Error Page

The error page is the page that gets displayed when an error occurs. The default filename for the error page is error.html.

The most frequent use of the error page for static websites is for presenting a friendly page when a customer requests a page that does not exist (HTTP code 404).

To change the name of the file to display as an error page:

  1. On the Kinvey Console main screen, select the Websites tab.
  2. Open the website that you want to configure.
  3. On the Routing tab, type the file name in the Error page text box.

You can also specify an error file name with the --errorPage option when creating the website using Kinvey CLI.

History API Routing

A lot of web application frameworks use the HTML5 History API to implement client routing. Examples include:

  • PathLocationStrategy in Angular
  • BrowserRouter in React
  • History mode in vue-router for Vue

Using a history-based routing strategy makes the URLs of your website look more user-friendly. This is achieved by appending sections to the website's base URL without making actual requests to the server. The resulting URL looks comprehensible, but does not point to a valid resource on the server.

Without explicit server-side support, an error occurs as soon as such a user-friendly URL is used (for example, the page is refreshed or the URL is shared with someone). Kinvey Web Hosting enables support for this scenario through the History API Routing option.

Enabling the option tells Kinvey to start returning the index page for all requests to non-existing pages on the server. After the index page loads, the client-side routing takes over to navigate to the proper client view.

When History API Routing is enabled, the error page option is no longer respected. The index page is returned even for errors, meaning you have to handle all errors on the client.

To enable or disable History API Routing:

  1. On the Kinvey Console main screen, select the Websites tab.
  2. Open the website that you want to configure.
  3. On the Routing tab, enable or disable History API Routing.

You can also enable History API Routing with the --historyApiRouting option when creating the website using Kinvey CLI.

CI/CD for Websites

You can implement a CI/CD flow for your websites using Kinvey CLI. You can find more information about the relevant CLI commands in the Kinvey CLI documentation.

Got a question?