One-click Catalyst

After completing the initial One-click Catalyst setup in the BigCommerce dashboard you will have:

• An instance of Catalyst deployed to the BigCommerce partner sandbox account
• Two Makeswift sites
  • Production site - connected to the deployed Catalyst instance
  • Development site - connected to http://localhost:3000

In the BigCommerce dashboard for your channel, you'll also see a few steps under the Complete Setup section that includes a terminal command to run in your local environment. This command will:

• Clone the Catalyst repository
• Set all environment variables
  • The MAKESWIFT_SITE_API_KEY environment variable is connected to the development Makeswift site
• Set the main branch to match the git ref that was deployed to the BigCommerce partner sandbox account
• Set the upstream remote variable to https://github.com/bigcommerce/catalyst.git

The following steps assume that you have run this command locally.

Running locally

After running the command in your terminal, start your development server with the following command:

pnpm dev

By default, Catalyst will run at http://localhost:3000. This is also the URL that the development site in Makeswift is connected to. From here, you can open the development Makeswift site in your browser. As you make changes in the code, you'll be able to see them reflected in real-time.

Connecting to a Github repository

Go to Github (opens in a new tab) and create a new repository. GitHub will prompt you to choose a name for your repository; for the purposes of this guide, we'll refer to name of the repository as <YOUR_REPOSITORY_NAME>. You should replace <YOUR_REPOSITORY_NAME> in all of the commands below with your actual repository name.

After you've created your Github repository, you can connect you local repository to the remote repository by running the following command:

    git remote add origin git@github.com:<YOUR_GITHUB_USERNAME>/<YOUR_REPOSITORY_NAME>.git

Then, you can push your changes to the remote repository by running:

    git push -u origin main

Deploying to Vercel

To deploy your Catalyst application to Vercel, you can use the Vercel dashboard or the Vercel CLI. You can follow this Deployment guide for full instructions of both options.

Since this site will be connected to your production Makeswift site, you'll need to make sure to include the MAKESWIFT_SITE_API_KEY environment variable in your Vercel deployment settings. You can find your API key in the production Makeswift site by going to Settings > Host.

After your deployment is complete, you'll want to update the production Makeswift site to connect to the newly created Vercel deployment. Copy the URL of your deployed application. Then, in the production Makeswift site, go to Settings > Host and update the Host URL property accordingly.