Supercharge your BigCommerce Theme Workflow with GitHub Actions
With the help of GitHub Actions, you can streamline your BigCommerce theme development process, allowing you to iterate faster by automatically deploying your changes. GitHub Actions allows you to trigger events based on actions. In this case, when you push your changes to the main branch or merge a branch into the main branch you can automate the process of running the Stencil command to push your theme changes to your BigCommerce store and applying that theme to your store.
What are GitHub Actions?
Very similar to Jenkins and Circle CI, GitHub Actions is a feature on GitHub that allows you to automate all of your software workflows that it’s already baked into GitHub. It’s a CI/CD (Continuous Integration/Continuous Deployment) tool that allows you to build, test, and deploy your code right from GitHub. If you are currently developing code and manually deploying it to your server, this is something that you will want to look into. It streamlines a lot of manual work. It’s easy to get set up and saves you time in the long run. There are many offerings for this tool and you can see them here in the GitHub Actions Marketplace.
GitHub Actions Explained
GitHub actions use YAML syntax (Yet Another Markdown Language) to define the events, jobs, and steps. These YAML files are stored in your repo with your code; using a specified directory `.github/workflows` which is created for you when you instantiate this service from the web. There is a walkthrough below on how to accomplish this.
Events, Jobs, and Steps
An event automatically triggers the workflow which contains a job. The job then uses steps to control the order in which the actions are run. These actions are the commands that automate deployments or software tasks.
A simple node YAML file will look like this:
Breaking Down the YAML File
- A `NAME` is the name of the workflow that is being triggered
- The `ON` directive triggers the workflow, in this case, it’s when the code is pushed into the master branch.
- `JOBS` define what happens when the GitHub Action is triggered.
- A `BUILD` explains what type of server the action will be run on, we have it set to ubuntu-latest.
- The `STRATEGY` section allows you to specify an array of the versions for the framework you’re utilizing and wish your program to run on.
- `STEPS` are where you can define the name and the commands that will actually be run like you would enter them in the command terminal.
The following example shows the `STEPS` for building the Cornerstone repository:
Setting up your GitHub Actions
Setting up your GitHub Actions is a fun process. Let me walk you through it…
1. Click on the Actions menu item in the toolbar.
2. Create your own Actions.
Once on the Action page, you will be prompted with several options, in this case, since we already have the YAML code (provided below), skip this and choose to create your own workflow.
3. Copy and Paste the sample action YAML.
This will take you to a page that contains a sample YAML file. Delete that and paste the code provided in the Cornerstone repo, and an example is provided below.
Once you are done, click the green start commit button on the right-hand side of the screen.
4. Manage your secrets, using a secret manager.
Navigate to Settings and then to Secrets and add the following:
- STENCIL_STORE_URL_PRODUCTION
- STENCIL_ACCESS_TOKEN_PRODUCTION
That’s it! Next time that you push any code into the main branch into the repository, the action will run. You can see the details of the run by clicking the Action option in the main menu bar.
Conclusion
With this setup, you will be able to make changes in your local IDE and when you push your changes to the main GitHub repository, this will automatically upload the theme files to your BigCommerce and apply the theme. How cool is that! Using a GitHub action is a powerful way to begin automating your development process. This allows for quicker iterations, therefore faster development.
