Full Stack Example

This example will walk through putting together a full stack app on KintoHub from the ground up and will take about 15 minutes. If you are interested in a quick single service, check out our list of examples.

This example will deploy a Todo List App using React, Hasura, and Postgres which are available within KintoHub's free tier.

Deploy a Postgres Server#

To store your data, you will need a Postgres database. KintoHub provides a dedicated Postgres server with 1 GB of storage.

  1. Click on the Create Service button displayed at the top right of your environment.
  2. Click on the From Catalog tab.

  1. Click on PostgreSQL service.
  2. Enter or generate your Username, Password, and Root Password.
  3. Click on the Deploy button at the top right.

This process will take around 1 Minute to complete. Once the Status has changed from Deploying to Live Version, click on the Access tab at the top center of the page.

Copy the Connection String (Admin) and paste it in a notepad to use for the next step.

Deploy a Hasura Service#

This tutorial has a premade Hasura repository with migration files available. You can deploy it with the following steps:

  1. Click on the Create Service button at the top right.
  2. Click on the Web App service.
  3. Click on the Import URL tab.
  4. Copy and paste the following into the Repository URL https://github.com/kintoproj/kinto-examples.
  5. Enter the path to the subfolder: ./todo-hasura
  6. Click on the Connect button.
  7. Type Dockerfile in the Dockerfile Name field.
  8. Type 8080 in the Port field.
  9. Click the Environment Variables tab.
  10. Add the key HASURA_GRAPHQL_DATABASE_URL and paste in the Connection String (Admin) from the previous step as the value.
  11. Add the key HASURA_GRAPHQL_ENABLE_CONSOLE and enter the value true.
  12. Click on the Deploy button at the top right.

This will take around 30 Seconds to complete. Once complete, you can click the link to the right of Public API access via You will now see Hasura's dashboard and can copy the GraphQL Endpoint URL.

Setup React Web App#

This tutorial has a premade React Todo List App that works with Hasura. You can deploy it with the following steps:

  1. Click on the Create Service button at the top right.
  2. Click on the Web App service.
  3. Click on the Import URL tab.
  4. Copy and paste the following into the Repository URL https://github.com/kintoproj/kinto-examples.
  5. Enter the path to the subfolder: ./todo-react
  6. Click on the Connect button.
  7. Type Dockerfile in the Dockerfile Name field.
  8. Type 5000 in the Port field.
  9. Click on the Environment Variables tab.
  10. Add the key REACT_APP_SERVER_URL and paste the GraphQL Endpoint URL from the previous step as the value.
  11. Click on the Deploy button.

This will take around 3 Minutes to complete. Once complete, you can click the link to the right of Public API access via.