Skip to content

Latest commit

 

History

History
59 lines (51 loc) · 1.81 KB

04-preview.md

File metadata and controls

59 lines (51 loc) · 1.81 KB

In this section, we set up automatic preview environments on every pull request using wing cloud.

Instructions

Set Up Your Repo in GitHub

  1. Clean up the create-react-app .git and .gitignore from the main project:
rm -rvf client/.git client/.gitignore
  1. Add the .gitignore to the root project path, with the following content:
.DS_Store
backend/target
node_modules
client/public/wing.js
  1. Initialize a git repo, add the files & folders, and commit:
git init
git add ./
git commit -m "Initial commit" -a 
  1. Log in to GitHub, create a new empty repository called wing-react-workshop.
  2. Push your local repo to GitHub (note that you should use your username, instead of <your-username>):
git remote add origin [email protected]:<your-username>/wing-react-workshop.git
git branch -M main
git push -u origin main

Connect The Repo With Wing.Cloud

  1. Add the backend/wing.sh with the following to your repo:
#!/bin/sh
DIR="$( cd "$( dirname "$0" )" && pwd )"

cd "$DIR"/../client
npm install
  1. Commit and push to the main branch:
git add backend/wing.sh
git commit -m "Adding wing install helper" backend/wing.sh
git push -u origin main
  1. Go to production.wingcloud.io.
  2. Log in with your GitHub credentials.
  3. Click on the + Add button --> Connect an existing repository.
  4. Give permissions to your GitHub repository.
  5. Wait for the main branch to finish building successfully.
  6. Open a pull request with some change to the API returned value (e.g., body: "Hello from the API PR" instead of body: "Hello from the API").
  7. Wait for the PR comment to be updated to the status deployed, and then visit the ReactApp endpoint and the Console.

🚀 You have set up an automatic preview environment on every PR 🤯 🚀