Continuous Deployment

TODO: This needs to be updated with PlasmicLoader+PageComponents+Webhooks/GitHub support

Plasmic can be configured for easy automatic deployment for users without a development environment. We recommend that users work with a developer to follow this guide and set up their continuous deployment (CD) environment.

Once you have a working development environment, it is only a few short steps to replicate this in a continuous deployment environment. In this configuration, we will configure CD to sync the latest from Plasmic on each build+deploy. This way, even if a developer isn’t committing new changes into the code repository, users can still deploy the latest changes.

Configuring your repository

Files you’ll need

To start, make sure you have a working build and that you have already run plasmic sync successfully at least once.

For users, who already know what projects they want to sync, the Quickstart guide is the fastest way to get started. For users, who want to work with an existing starter project, they can head to the Gatsby Starter Blog tutorial.

After the sync and build have succeeded, you can check all files into your repository. Make sure to check in your plasmic.json file, so that future syncs know which projects to include.

Install the Plasmic CLI locally

Make sure you installed the Plasmic CLI locally:

yarn add -D @plasmicapp/cli
# or: npm install --save-dev @plasmicapp/cli

Build scripts

Next, prepare a custom build script that will upgrade all Plasmic dependencies to the latest version, run plasmic sync, and then build the site. Plasmic upgrades the minimum required CLI version regularly to work with new features.

yarn upgrade @plasmicapp/cli
yarn upgrade @plasmicapp/react-web
yarn plasmic sync --yes --force
yarn build

Note the --yes --force flags in the sync command, which will automatically answer yes to any prompts from the CLI.

Deploys

Your deploy tool will need to be able to check out the latest from the repository, run the build script you created above, and build your site.

Netlify Deploys

Setup

With Netlify, you can link a git repository to give the build container access to your code base.

Next, configure your Netlify build to use your custom build script.

Alternatively, you can use a netlify.toml config file.

Plasmic credentials

The Plasmic CLI can accept authentication credentials from the following environment variables:

  • PLASMIC_AUTH_TOKEN
  • PLASMIC_AUTH_USER

This can be configured in the “Environment Variables” settings tab.

Please remember not to check secrets into your code, a common security vulnerability.

Triggering a build

Now that Netlify is set up, you can trigger future builds at any time from the Netlify “Deploy” tab.

Deploying from another CI/CD

Note that this configuration should be easy to set up with any other CI/CD tool, such as GitHub actions, Travis CI, Circle CI, or Jenkins. Please refer to the vendor’s documentation to complete the following steps:

  • Connecting CI/CD to your code base (i.e. git repository)
  • Configuring a custom build command to build your project
  • Specifying secrets (i.e. through environment variables)
  • Manually triggering a build and re-deploy

Troubleshooting

New pages don’t show up

The Plasmic CLI will sync new components to the default directory specified in plasmic.json. Plasmic currently does not automatically integrate with routers or specify paths for components. You will need to set up your router to recognize the new components.

For an example, check out the Plasmic Gatsby Starter Blog. For more about file-based routing, check out the documentation for your build system. (e.g. Gatsby or Next.js)

Build fails to compile

This can easily happen when components, slots, variants, or elements are renamed or deleted in Plasmic Studio. For the latest API for your components, check out your project’s docs portal, https://studio.plasmic.app/projects/PROJECT_ID/docs/.

Build doesn’t sync from Plasmic

Make sure that you properly set your Plasmic credentials, either using environment variables or an .plasmic.auth file.

Build fails at a prompt

Oops. Please report this to team@plasmic.app and we will fix this immediately.