In this section, we set up automatic preview environments on every pull request using wing cloud.
- Clean up the
create-react-app
.git
and.gitignore
from the main project:
rm -rvf client/.git client/.gitignore
- Add the
.gitignore
to the root project path, with the following content:
.DS_Store
backend/target
node_modules
client/public/wing.js
- Initialize a git repo, add the files & folders, and commit:
git init
git add ./
git commit -m "Initial commit" -a
- Log in to GitHub, create a new empty repository called
wing-react-workshop
. - 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
- Add the
backend/wing.sh
with the following to your repo:
#!/bin/sh
DIR="$( cd "$( dirname "$0" )" && pwd )"
cd "$DIR"/../client
npm install
- 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
- Go to production.wingcloud.io.
- Log in with your GitHub credentials.
- Click on the
+ Add
button --> Connect an existing repository. - Give permissions to your GitHub repository.
- Wait for the main branch to finish building successfully.
- Open a pull request with some change to the API returned value (e.g.,
body: "Hello from the API PR"
instead ofbody: "Hello from the API"
). - Wait for the PR comment to be updated to the status deployed, and then visit the ReactApp endpoint and the Console.