Skip to main content

Introduction

Welcome to our GitHub + LaunchDarkly workshop!

If you want to try out GitHub Copilot, click here

If you want to try out GitHub Actions, click here

If you want to try out LaunchDarkly, see below.

Welcome to Toggle Outfitters!

It's your first day at Toggle Outfitters and did you ever pick an exciting time to join our company! We're a retailer who's moving into the digital age, and getting ready to host our own storefront. Sales are up, traffic is bursting at the seams, and we need to get the new Toggle Outfitters launched before we become the internet's next social media story.

Your task sheet for the day is jam packed with activity.

  • Safely release the NEW Toggle Outfitters website
  • Innovate within our platform by migrating to a new payment API and inventory database in cloud
  • Enable us to expand our product catalog to targeted audiences
  • Establish experiments to measure the usage of our new products
  • Coordinate mobile releases of Toggle Outfitters

Whew! This is quite the dev queue indeed. We're taking "on the job training" to a whole new level.

Fortunately, we use LaunchDarkly to let us develop and release our software quickly - and by using it, this is not only going to be your first day - it's going to be one of your most risk-free days ever!

We'll use LaunchDarkly to do the following:

  • Build feature flags around our new capabilities, allowing us to release our new features instantly, and if we run into a problem we can recover just as fast.
  • Create targeting rules that allow us to control not just "who" is getting our features, but "what" and "when"

Getting Started​

There are a couple of core components to getting started with the workshop. The steps below will take you through that process.

Obtaining Your LaunchDarkly Credentials​

Click here to access your LaunchDarkly environment and retrieve your Client/Server keys.

Due to security constraints, the button below will open a new browser window to a separately hosted version of this guide. On that page, you will need to scroll down and click on the blue "Open LaunchDarkly" button. Please return to this version of the guide after you do that.

Navigate to the top search bar and search for Copy SDK Key for Current Environment, it should look like this:

Copy both the Server Side key and Client-Side ID and save them somewhere where you can quickly retrieve them. We'll need those in a moment.

Running the Toggle Outfitters Application​

After getting your credentials, we can now launch the app. The workshop leverages Toggle Outfitters, a fictional company making the shift to a digital presence, and struggling with many of the same problems a typical enterprise struggles with that we discussed above. This application is a NextJS based application that features SaaS components for its database and payment system. First, we need to get the application up and running for you to interact with.

Launch With GitHub Codespace (Preferred Method)​

This method has no requirements on local installation - everything is run in browser. You do not need to fork or clone the repository before creating a Codespace on it. Your Codespace is private to you.

On the GitHub repository page under the Code tab click on the green Code button, select the Codespaces tab and click on the grey plus.

IMPORTANT NOTE:
The start-up process can take a few minutes to fully load for the first time. Subsequent starts will be faster. During the initial setup, GitHub Codespaces is spinning up its own instance in your browser and cloning the repository. These things take time 😄

Once the Codespace is done spinning up, use the Terminal tab in the Codespaces window to download the example.env file from here using the curl command below. If you are in your talkin-ship-workshop-app directory, this command will download the necessary file and rename it correctly

curl -o .env https://talkin-ship-workshop.s3.us-east-2.amazonaws.com/example.env

Start the project in your local Codespace environment and if it asks to open a browser tab, say yes.

npm install 
npm run dev

You can now edit the .env file or other files within the project and the application will update immediately.

NOTE: If you closed the browser window of your local instance of Toggle Outfitters, you can open it again through the Ports tab in the Codespaces window (hover over the local address and click the globe icon):

Required Components

  • Sign up for a GitHub account if you do not already have one
  • Your GitHub account must belong to an organization that is licensed to use Codespaces

Launch With Gitpod (Backup Method)​

Skip this section if you were able to load Codespaces correctly!

This is preferred for teams that are just getting started and do not perform development as their day to day tasks, as it has no requirements on local installation - everything is run in browser.

Just a heads up, Gitpod will give you the option to open this repository in your local VSCode environment. Make sure you choose the "open in browser" option, otherwise, you'll have to configure VSCode to work properly and that can create additional problems.

IMPORTANT NOTE:
The start-up process takes roughly 45 seconds to 1 minute to fully load. During this time GitPod is spinning up its own instance, installing the files, copying down the core credential file and running the application. These things take time 😄

Required Components

  • Sign up for a GitHub account if you do not already have one

Run It Locally (Backup Method)​

Skip this section if you were able to load Codespaces or Gitpod correctly!

This gives you the most flexibility and performance, but requires you to have components installed locally on your workstation. This is recommended for developer teams who are command line savvy and frequently develop locally already.

Required Components

  • Node.js version 16.14 or above:

    • When installing Node.js, you are recommended to check all checkboxes related to dependencies.

  • Clone the Toggle Outfitters GitHub Repository

git clone hhttps://github.com/devopsjester/talkin-ship-workshop-app
cd talkin-ship-workshop-app
  • Download the example.env file from here using the curl command below. If you are in your talkin-ship-workshop-app directory, this command will copy download the necessary file and rename it correctly
curl -o .env https://talkin-ship-workshop.s3.us-east-2.amazonaws.com/example.env
  • Start the project in your local environment 
npm install 
npm run dev

If your configuration was done successfully you should be able to browse Toggle Outfitters at http://localhost:3000. You will now be able to update this file and changes will occur within the application instantly.

Update Your .env File​

Within your project directory, locate the .env file, and open it. You will need to replace the 2 lines at the top of the page with the corresponding credentials from your LaunchDarkly environment that you retrieved earlier. If you do not have those credentials, go get new credentials and return here afterwards.

## Update with your LaunchDarkly Info
LD_SDK_KEY='<replace with your LD Server Key>'
NEXT_PUBLIC_LD_CLIENT_KEY='<Replace with your LD Client Key>'

Save the file. Do not replace anything else below these items.

IMPORTANT NOTE:
If you didn't save your LaunchDarkly credentials or they've been misplaced you can always retrieve them from the LaunchDarkly search bar.

Feedback​

At the end of the workshop, we would love to hear your feedback for improvements. Click here for our survey.