At the moment, we have both of our codebases all set up, and we have all of the accounts in place. What remains to do is put the code on GitHub and actually make Cloudflare deploy a site from the application code.

It's finally time to publish the very first, virgin version of our design system components. Logically, we need to have code in GitHub first, so that's where we will start.

Committing and pushing code to GitHub#

Setting up the component library repository#

Go to GitHub. Click New in the left-hand side menu bar, and select the Repository option.

In the following dialog, enter a name for your repository. We already have a basic README file and the other items, so there's no need to pre-create anything for us.

Next up we need to set two secretsFIGMA_URL and FIGMA_TOKEN corresponding to your such values—so that our GitHub Action will run. Under Settings, the Secrets and variables pane leads to the Actions page where these can be set.

Later, we will need a third (CHROMATIC_TOKEN), but you can wait with that until later.

Pushing the code to GitHub#

Navigate to your component library codebase and run the following, first having substituted USER and REPO for your user name and repository name.

git init

git add .

git commit -m "Initial commit"

git remote add origin git@github.com:USER/REPO.git

git branch -M main

git push -u origin main

This will set the folder up with Git, add all of the files, commit them to Git, and then push them to the new repository under a branch called main. main is quickly becoming the new standard for the mainline or trunk branch, replacing the old convention, which went by the name master.

Verify that the GitHub Action works as intended#

The code includes a basic GitHub Actions workflow that will run when you push to the main branch. Specifically, this workflow just runs Webpack and builds the components. We should verify that the workflow performs as expected.

In GitHub, navigate to the repository and go to the Actions tab. You should see that the build is passing.

The application#

If you would have deployed the application in its current state, you'd quickly run into it crashing since it uses the component library that is only available to you locally. For the time being, we will therefore deactivate any custom components and just make the first deployment without any of those in order to verify that the infrastructure works as intended.

In src/views/DemoView.jsx, update it to no longer include the demo component:

import React from 'react';

export const DemoView = () => (

  <div>

    <h1>This is your brand new application scaffold!</h1>

  </div>

);