DEV Community

Light Cloud profile image Julia
Julia for Light Cloud

Posted on Originally published at blog.light-cloud.com on

Deploy From GitHub: Install the App and Deploy on Every Push

#lightcloud #cloudplatform #tutorial #github

Deploy From GitHub: Install the App and Deploy on Every Push

To deploy from GitHub on Light Cloud, connect GitHub in the console and install the Light Cloud GitHub App on your account, then click New... , Deploy from GitHub , pick the repository and click Deploy. From then on, every push to the default branch deploys again, every commit gets a check, every other branch gets its own preview address, and pull requests get a comment with the preview link.

What you will build

A one-page static site, deployed from GitHub:

  • the main branch at its own address, updated on every push,
  • a preview for a feature branch, linked from the pull request,
  • a light and a dark theme, following the visitor's system setting.

The deployed page saying Deployed from GitHub, Version 2, with a theme switch button

Live demo: main-tutorial-git-providers-github-examples.light-cloud.io. Source code: github.com/light-cloud-com/tutorial-git-providers.

Before you start

Step 1: Get the example project

Open the example project on GitHub, click Fork , then Create fork. Clone your fork, with your GitHub username in place of YOUR-USERNAME:

$ git clone https://github.com/YOUR-USERNAME/tutorial-git-providers.git
$ cd tutorial-git-providers


PS> git clone https://github.com/YOUR-USERNAME/tutorial-git-providers.git
PS> cd tutorial-git-providers
Enter fullscreen mode Exit fullscreen mode

It is plain HTML, CSS and a few lines of JavaScript for the theme switch. Any project of your own works the same way.

Step 2: Connect GitHub

Light Cloud reads your repositories through a GitHub App called Light Cloud CI. You install it once, on your account or on an organisation, and choose which repositories it may see.

In the Light Cloud console, click the GitHub icon at the top right. It reads Connect GitHub until an account is linked. In the Connect GitHub Account window:

  1. Click Connect GitHub. GitHub opens in a small window and asks you to authorize Light Cloud CI; click Authorize Light Cloud CI. The window closes and the console says GitHub account connected!
  2. Your account and the organisations you belong to are now listed. Click Install next to the one that owns your fork.
  3. GitHub opens its installation page. Choose Only select repositories and pick tutorial-git-providers, or All repositories if you want every repository available, then click Install.

Back in the console, the row shows Connected :

The Connect GitHub Account window listing the user julia-kafarska and the organization light-cloud-com, both marked App Installed and Connected, with Change and Disconnect next to each and Sync from GitHub at the bottom

Mine lists two accounts, my own and the light-cloud-com organisation, because the app is installed on both. One installation serves every workspace you own, so you do this once.

What the app can do, from GitHub's own list of its permissions: read your code and repository metadata; write checks, deployments, pull request comments and discussions; and administer repositories, which it uses to copy a starter template into your account. It cannot push to your code.

Step 3: Deploy the repository

  1. Click New... at the top of the sidebar, then Deploy from GitHub :

The New menu in the sidebar with Deploy from GitHub highlighted

  1. Click Search your repositories... , type tutorial-git and pick tutorial-git-providers :

The Create page with Repository and the GitHub tab highlighted, and tutorial-git-providers highlighted in the list of repositories

The list shows the repositories the app may see, grouped by account. A repository you forked a moment ago can take a few seconds to appear.

  1. Light Cloud reads the repository and detects Static HTML. The Name becomes part of the site's address, so I typed tutorial-git-providers-github (my workspace already had the GitLab copy of this site under the plain name). Keep the suggested name if it is free. Then click Deploy :

The deploy form with Static HTML detected, the Name field tutorial-git-providers-github highlighted, Root directory, Framework, and the Deploy button highlighted

There is no branch to choose: GitHub deploys the repository's default branch, main here. The Advanced section holds three switches that are all on by default, and they are what the rest of this guide relies on:

The Advanced section with Deploy on push, Deploy every branch and Remove stale environments highlighted, all switched on

  • Deploy on push : a push to the deployed branch builds and releases by itself.
  • Deploy every branch : every other branch gets its own preview environment and address.
  • Remove stale environments : deleting a branch deletes its preview.

Mine was live 65 seconds after clicking Deploy , at https://main-tutorial-git-providers-github-examples.light-cloud.io (examples is my workspace; yours is in the address instead):

The deployed page saying Deployed from Git, Version 1, with a theme switch button

The button at the top right switches between the light and the dark theme; without it, the page follows your system setting.

Step 4: Push a change

Change Version 1 to Version 2 in index.html, then commit and push:

$ git commit -am "Version 2"
$ git push
To https://github.com/YOUR-USERNAME/tutorial-git-providers.git
   f9734a3..8513141 main -> main


PS> git commit -am "Version 2"
PS> git push
To https://github.com/YOUR-USERNAME/tutorial-git-providers.git
   f9734a3..8513141 main -> main
Enter fullscreen mode Exit fullscreen mode

Your output shows your own commit ids. git commit also prints a short summary. GitHub tells Light Cloud about the push, and Light Cloud starts the deployment: in my run the check started 2 seconds after the push, finished in 7 seconds, and Version 2 was live for visitors 43 seconds after the push.

The commit list on GitHub shows a green tick next to Version 2. Click it to see the check:

The commit list on GitHub with the popover All checks have passed, 1 successful check, Light Cloud, Production, Successful in 7s, Deployed in 7s, and a Details link

Details opens the deployment's build log in the console.

Step 5: Preview a branch in a pull request

Create a branch, change the heading in index.html from Deployed from Git to Deployed from GitHub, then commit and push the branch:

$ git switch -c new-heading
$ git commit -am "Say GitHub in the heading"
$ git push -u origin new-heading
remote: Create a pull request for 'new-heading' on GitHub by visiting:
remote: https://github.com/YOUR-USERNAME/tutorial-git-providers/pull/new/new-heading
To https://github.com/YOUR-USERNAME/tutorial-git-providers.git
 * [new branch] new-heading -> new-heading
branch 'new-heading' set up to track 'origin/new-heading'.


PS> git switch -c new-heading
PS> git commit -am "Say GitHub in the heading"
PS> git push -u origin new-heading
remote: Create a pull request for 'new-heading' on GitHub by visiting:
remote: https://github.com/YOUR-USERNAME/tutorial-git-providers/pull/new/new-heading
To https://github.com/YOUR-USERNAME/tutorial-git-providers.git
 * [new branch] new-heading -> new-heading
branch 'new-heading' set up to track 'origin/new-heading'.
Enter fullscreen mode Exit fullscreen mode

Light Cloud creates an environment for the new branch at https://new-heading-tutorial-git-providers-github-examples.light-cloud.io; mine was live 35 seconds after the push. The app's Environments tab lists it next to Production :

The Environments tab listing Production on main and the new environment New Heading on the branch new-heading, highlighted, both Deployed

Open the link GitHub printed, or click Compare & pull request on your repository page, and click Create pull request. A few seconds later, Light Cloud adds a comment with the preview link; mine arrived 4 seconds after the pull request was opened:

A pull request comment from the light-cloud-ci bot titled Light Cloud New Heading, with Status Ready, the preview address, the update time, the commit and a Deployment logs link, and below it GitHub's box This branch was successfully deployed, 1 active deployment

The preview has the change; production does not have it yet:

The preview site with the heading Deployed from GitHub and the badge Version 2

The Checks tab of the pull request has a Light Cloud CI check for the environment. It shows the preview address, the commit, the build time and each build step:

The Checks tab of the pull request: Light Cloud CI, Light Cloud New Heading, Deployed in 7s, with Environment, Preview, Commit and Duration, the five build steps from Preparing R2 deployment to Finalizing R2 deployment, and the link Open in Light Cloud

Every push to the branch updates the preview, the comment and the check.

Step 6: Merge

Merge the branch into main and delete it, with Git:

$ git switch main
$ git merge new-heading
Updating 8513141..f861a7c
Fast-forward
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)
$ git push
$ git push origin --delete new-heading


PS> git switch main
PS> git merge new-heading
Updating 8513141..f861a7c
Fast-forward
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)
PS> git push
PS> git push origin --delete new-heading
Enter fullscreen mode Exit fullscreen mode

The two pushes print the usual summaries. (The Merge pull request and Delete branch buttons on GitHub do the same.) GitHub marks the pull request as merged, and two things follow by themselves:

  1. The merge is a push to main, so production redeploys. My page said Deployed from GitHub 59 seconds after the push.
  2. Deleting the branch removes its environment. The bot edited its comment to Preview removed 4 seconds after the delete, and the preview address answered 404 22 seconds after it:

The pull request after the merge: the bot comment edited to Preview removed, then the timeline entries merged commit into main with 1 check passed, deleted the new-heading branch, and light-cloud-ci deployed to production

The environment's Deployments tab shows each deployment and what started it:

Deployment History with the merge commit deployed by GitHub Auto-Deploy highlighted, then Version 2 by GitHub Auto-Deploy, then the first deployment started by hand

Add a repository later

If you chose Only select repositories when installing the app, a new repository is not visible to Light Cloud until you add it. Click the GitHub icon at the top right (or Add or configure an account under the repository search), then Change next to the account. GitHub opens the app's settings page for that account: under Repository access , add the repository and click Save. Back in the console, Sync from GitHub refreshes the list.

Choose what GitHub shows

All of this is on by default. To change it, open the app's Settings :

The Branch Automation and GitHub sections of the app settings: Auto-create environment per branch, Auto-cleanup when branch is deleted, Report deployments as GitHub checks and Comment preview links on pull requests, all ticked

  • Report deployments as GitHub checks : the tick or cross on commits and pull requests, and the deployment in the repository's environments panel.
  • Comment preview links on pull requests : one comment per environment, updated in place. Never on pull requests from forks.

Under Branch Automation on the same page, you can turn off a preview environment per branch, or keep previews after their branch is deleted.

Troubleshooting

The repository does not appear in the search

The Light Cloud GitHub App does not have access to it yet. Click Add or configure an account under the search box, then Change next to the account that owns the repository, and add it on GitHub's page. A repository forked a moment ago can also take a few seconds to show up.

Installation requested - an admin of your-organisation has to approve the Light Cloud app before it can be used

Your GitHub organisation lets only its owners install apps. GitHub has sent them the request; once one of them approves it, open the GitHub window in the console again and click Sync from GitHub.

Your browser blocked the GitHub window. Allow popups and try again.

The console opens GitHub in a small window, and your browser stopped it. Allow pop-ups for console.light-cloud.com and click the button again.

Top comments (0)