Frontend
Setup
Welcome! Before you get coding, there's a few setup-related tasks to complete. Specifically, you'll have to 1) fork the repo, 2) configure your workflow, and 3) install necessary development tools. After that, you should be able to get up and running.
1) Git going
First, you'll need to fork the Frontend repo and sync it upstream.
To fork the repo, simply click the "Fork" button near the top right of this page. If prompted to select "where" to fork it, click your username.
To clone your forked repo to your local file system, first, navigate to the forked repo in your browser (not the original repository). Click the large green "Clone" button, and copy the URL onto your clipboard. Then, in a terminal window, navigate to where you want the project to live on your local file system (my recommendation is in a directory named "tagg" where you can store both your frontend & backend projects), and run the following command, replacing the dummy URL with your clipboard contents:
git clone https://github.com/your-username/Frontend.git
You'll be prompted for your GitHub username & password, which you should enter. If, when working with GitHub in the future, you don't want to enter your credentials each time, check out this guide.
Now you have a local copy of your forked project on your computer, but it's not yet synced with the original repository. To sync your fork upstream, navigate to your repository in a terminal window. Inside the project directory, run the command
git remote add upstream https://github.com/TaggiD-Inc/Frontend.git
Double check that this succeeded by running
git remote -v
in your project directory. If this worked, in addition to the two "origin" remotes, you should see two more "upstream" remotes.
If you've made it here with no errors, congratulations! You now have a local copy of the project. If you had any problems, feel free to consult your teammates.
2) Workflow
Next, you'll learn how to pull updates from the main repository, install dependencies, and configure your local git settings.
In order to pull updates from the main repository into to your local project, navigate to your local project and run the command
git pull upstream master
Your local project will then have the up-to-date project code from the main repository, but your fork on GitHub ("origin") will be now outdated. To push these local updates to your forked repository's master branch, run the command
git push origin master
In order to build your project in Xcode and Android Studio, your project dependencies, like those in node_modules/
and ios/Pods/
, need to be installed. These dependencies are not uploaded to GitHub, so you'll need to navigate into your project directory and run (ensuring that yarn and cocoapods are installed)
yarn
which will install your node dependencies, then, navigating into the ios/
directory (if you run into any issues here, try skip to step 3 and setup Xcode cli first then come back and try again)
pod install
which will install your cocoapods dependencies. Make sure to perform these two steps each time you pull from upstream, as dependencies may be added and removed throughout the course of the project.
To work on a new feature, checkout a new branch in your local project with the command
git checkout -b tmaXX-name-of-feature
where "tmaXX-name-of-feature" refers to the Jira ticket number and feature name (e.g. tma1-setup-mysql-ec2).
To push your changes on your feature branch to your fork, run the command
git push origin tmaXX-name-of-feature
The first time you push a local feature branch to your fork, run the above command with the -u
flag (e.g. git push -u origin tmaXX-name-of-feature
). This sets up the upstream branch. Detailed instructions can be found here.
To ensure your local feature branch is up-to-date with the main repository, run this command from your local branch
git pull upstream master
To view your branches and see which one you're currently on, run
git branch
(exit that view with q
)
To switch branches, run
git checkout branch-name
(e.g. git checkout master
)
Once you finish building and testing a feature with the most up-to-date project code from the main repository, commit and push your local updates to your GitHub fork, then merge the feature branch of your forked repository into the master branch of the main repository through a GitHub pull request. This can be done in a browser by navigating to your forked repository and the branch to merge on GitHub.
Lastly, your commits need to be signed. Click here to learn how to set that up. We'll be using GPG keys for signing commits. The GitHub help site doesn't mention it, but there are a few extra items to configure after creating and uploading your key. Specifically, run the commands
git config --global commit.gpgsign true
git config --global gpg.program gpg
git config --global user.signingkey XXXXXXXXXXXXXXXX
(replacingXXXXXXXXXXXXXXXX
with your 16-digit GPG key)echo 'export GPG_TTY=$(tty)' >> ~/.bash_profile && source ~/.bash_profile
(replacing~/.bash_profile
with your shell's configuration file. If you are on macOS and using zsh, this is~/.zshrc
; check your shell withecho $SHELL
)
Lastly, ensure that you see your full name and GitHub email when running
git config --global user.name
git config --global user.email
If not, set them by simply running the same command but with your name and email as an argument (enclosed in quotes, e.g. git config --global user.name "FIRST LAST"
).
In the future, all commits made from the command line should be done with the -S
flag (e.g. git commit -S -m "commit message"
). This tells git to sign the commit.
If you've made it here, congratulations! You are one step closer to being fully set up. Again, if this is not the case, feel free to consult your teammates.
3) Devtools
The final step is making sure your computer has the necessary development software to run iOS and Android simulators.
Follow the instructions on React Native's docs here under "React Native CLI Quickstart", being sure to follow directions for your operating system, for both target operating systems (iOS and Android). Stop upon reaching the section "Creating a new application", as our project already exists.
Windows users wishing to develop on iOS will have spin up a virtual Mac (through something like VirtualBox, free, or VMWare Workstation, paid). An alternative solution is to build a "Hackintosh". Unfortunately, none of these solutions are particularly ideal. If this is a major concern, please voice it to the team!
Now that you've forked your repo and installed your developer tools, you are ready to build and run your project!
Running
To build and run your project, open a terminal window, navigate to your project directory, and run yarn ios
or yarn android
. This should prompt Xcode / Android Studio, if they have been properly installed and configured, to launch a mobile simulator, where you'll be able to view your code edits in real time (live reload on save). Happy coding!