Hosting your first application

Deploy a one-file application to CARTO and open it with your CARTO login

Private Preview: Hosted Apps is available to selected accounts during its Private Preview. To request access, contact your CARTO representative.

In this quick start guide, you will deploy your first application with Hosted Apps: a single HTML file with a map of retail stores, which CARTO serves behind your organization's login.

Install the CARTO CLI

Install the CARTO CLI, version 0.12.0 or later, and log in:

carto auth login

Create the application

Create a folder named my-first-app, with a file named index.html inside:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My first hosted app</title>
    <script src="https://unpkg.com/deck.gl@^9.1.0/dist.min.js"></script>
    <script src="https://unpkg.com/@deck.gl/carto@^9.1.0/dist.min.js"></script>
    <script src="https://unpkg.com/maplibre-gl@^4.0.0/dist/maplibre-gl.js"></script>
    <link href="https://unpkg.com/maplibre-gl@^4.0.0/dist/maplibre-gl.css" rel="stylesheet" />
    <style>
      body { margin: 0; }
      #map { position: absolute; inset: 0; }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      fetch('./carto-info.json', { cache: 'no-store' })
        .then((response) => response.json())
        .then(({ apiBaseUrl, accessToken }) => {
          const stores = deck.carto.vectorTableSource({
            apiBaseUrl,
            accessToken,
            connectionName: 'carto_dw',
            tableName: 'carto-demo-data.demo_tables.retail_stores'
          });

          new deck.DeckGL({
            container: 'map',
            mapStyle: deck.carto.BASEMAP.POSITRON,
            initialViewState: { latitude: 39.8, longitude: -98.6, zoom: 4 },
            controller: true,
            layers: [
              new deck.carto.VectorTileLayer({
                id: 'stores',
                data: stores,
                pointRadiusMinPixels: 3,
                getFillColor: [200, 0, 80]
              })
            ]
          });
        });
    </script>
  </body>
</html>

The application reads the credentials of the user who opens it from carto-info.json, a file that CARTO serves next to it, and uses them to show a table from the CARTO Data Warehouse. There is no token in the code.

Deploy it

carto app deploy my-first-app --name "My first app"

The CLI uploads the folder and prints the URL of your application, ending in /app/my-first-app/. Open it in your browser: CARTO asks you to log in if you aren't already, and the map shows the retail stores, loaded with your own credentials.

Share it

New applications are private. To share yours with everyone in your organization, run:

carto app share my-first-app --org

They can now open the same URL and log in with their CARTO account.

What's next?

• Hosting your application in CARTO builds a complete application with Vite, including local development, Named Sources and versions.

• Hosted Apps in Key concepts explains how hosting works and when to use it.

• The Hosted Apps reference describes everything CARTO reads, serves and enforces.