Project starters > "Project Starter" button

    "Project Starter" button

    Most of the time, a DatoCMS project is associated with a frontend project (website, application, etc.) that knows how to query for its content, and renders the result in a pleasant way to users. The "Project starter" button helps users deploy new sites from templates with one single click, performing the following actions for them:

    1. Clone a DatoCMS template project and put the copy inside the user account;

    2. Fork a Git repository containing the frontend project inside the Github account of the user;

    3. Build and publish the frontend online using a free hosting solution (Netlify, Vercel, Heroku, etc.)

    Check out our Marketplace to see some examples and a find a fine selection of polished Project Starters.

    The dialog that your users will see once they click on a Project Starter button

    Project Starters are composed of a DatoCMS template project, plus a Git repository containing a datocms.json configuration file that specifies both presentational metadata (name, preview image, URL of an example of a successful deployment) and the information necessary for creating a new project.

    You can use the form below to generate a datocms.json configuration file and a button to share the starter with the world:

    Result

    Copy the following code and add it to your Git repository in a file called datocms.json:

    {
    "name": "THIS FIELD IS MANDATORY. PLEASE PROVIDE A VALUE!",
    "description": "THIS FIELD IS MANDATORY. PLEASE PROVIDE A VALUE!",
    "previewImage": "THIS FIELD IS MANDATORY. PLEASE PROVIDE A VALUE!",
    "datocmsProjectId": "THIS FIELD IS MANDATORY. PLEASE PROVIDE A VALUE!",
    "deploymentType": "copyRepo"
    }

    Use the following code to share the button on your README file or documentation:

    [![Clone DatoCMS project](https://dashboard.datocms.com/clone/button.svg)](https://dashboard.datocms.com/deploy?repo=YOUR-GITHUB-REPO)
    <a href="https://dashboard.datocms.com/deploy?repo=YOUR-GITHUB-REPO" target="_blank" rel="noopener">
      <img
        src="https://dashboard.datocms.com/deploy/button.svg"
        alt="deploy project button"
      />
    </a>
    https://dashboard.datocms.com/deploy?repo=YOUR-GITHUB-REPO
    deploy project button
    Project ID

    The project ID can be retrieved inside the details page of the project in your Dashboard:

    You can find your project ID in your dashboard
    Supported deployment methods

    The deploymentType setting allows you to configure what deployment target can be used during the cloning process. By setting this value to copyRepo, DatoCMS will clone the template on a repository in the user org or account.

    Additionally, DatoCMS supports the following deployment types:

    • vercel

    • netlify

    • static (user can choose between Vercel and Netlify)

    • heroku

    When one of these is chosen, users will be asked to authenticate on the service and therefore they need an active and valid account. Once authorized, the DatoCMS integration will deploy the template repository to the service.

    Build command

    When the deployment type is either static, vercel, netlify or heroku, you must specify the build command that will be run during the deployment of the frontend repository. DatoCMS will forward the buildCommand to the deployment service which will use it to build the application.

    Environment variables

    When the deployment type is either static, vercel, netlify or heroku, you can specify a number of environment variables that will be configured on the hosting platform, before building the actual frontend. The value of each environment variable can be either:

    • A custom string

    • The URL of the cloned DatoCMS project (ie. https://<YOUR_PROJECT>.admin.datocms.com/)

    • One of the DatoCMS API tokens present in the template project (you need to specify the name of the API token, ie. "Read-only API token")

    Post-deploy install URL

    When the deployment type is either static, vercel, or netlify, you can call a custom hook present in the frontend to add more complex configuration steps.

    The hook must support CORS for the https://dashboard.datocms.com Origin, and will receive a POST request.

    If the frontend is deployed to Netlify, the HTTP request body will be the following:

    {
    "datocmsApiToken": <DATOCMS_READWRITE_API_TOKEN>,
    "integrationInfo": {
    "adapter": "netlify",
    "netlifySiteId": <NETLIFY_API_TOKEN>,
    "netlifyToken": <NETLIFY_API_TOKEN>,
    },
    }

    If the frontend is deployed to Vercel, the HTTP request body will be the following:

    {
    "datocmsApiToken": <DATOCMS_READWRITE_API_TOKEN>,
    "integrationInfo": {
    "adapter": "vercel",
    "vercelApiToken": <VERCEL_API_TOKEN>,
    "vercelTeamId": <VERCEL_TEAM_ID>,
    "vercelProjectId": <VERCEL_PROJECT_ID>,
    },
    }