As a starting point for your project you will be using the boilerplate code for the frontend and backend.
Your project will have 2 repos, 1 for the frontend and 1 for the backend.
Therefore, there are 2 boilerplate repositories whom code you will have to clone and then connect to your repositories.
The below steps outline how to setup your 2 repositories with the boilerplate code.
In your GitHub create a new repository. Create the repository for the backend (server) .
When creating the new repository ensure to create the repository empty, do not add README or .gitignore when creating the repository on GitHub ( fields Add a README file and Add .gitignore must be left unchecked ).
Once the repository is created take a note of the git remote add origin command used to connect the local repository with GitHub, as per below image.
You will need this command in the next step to connect local boilerplate code with your repository.
Using the repo url of the backend boilerplate, clone it to your local machine. Replace the boilerplate-repo-url with the URL you got from your team's captain (LT or TA). Do not remove the dot . after the repo url, it is there in order to clone the repo files directly to the folder.
mkdir m3-project-name-server
cd m3-project-name-server
git clone boilerplate-repo-url .Once cloned disconnect the boilerplate repo from it's original GitHub repository and connect it to your repository.
# Disconnect boilerplate from it's original repository by completely removing git
rm -rf .git
# Reinitialize git while being in the folder with the code
git init
# Create the initial commit
git add .
git commit -m 'Initial commit'
# Connect to your project repository
git remote add origin your-project-repo-url
# Push the code to GitHub
git push origin masterUse the URL of the new repository you created in the previous step and replace `your-project-repo-url. or just copy the entire command you got in the previos step when you created your repo on GitHub.
Create a README.md file in the root folder of your project repository and add to it the content of your project README.
Next step is to create the develop branch locally and push it's copy to GitHub.
Create an additional develop branch (Your project will have 2 main branches master and develop).
While in the root folder of the project, run the following commands:
# Create a new branch - `develop`
git checkout -b develop
# Push the new branch to the GitHub repository
git push origin developThe team member who is the owner of the repository should add the other team member as the Collaborator.
To do this, while on the page of the projects GitHub repository:
- Open the Settings tab.
- In the left-hand side menu select Manage access.
- Click on the button Invite a collaborator.
- Search for and add the other team member by the GitHub username or email.
- The other team member must accept the invitation (either by email that is automatically sent, or by the invitation link).
After the project/repository owner does the above steps and pushes the new develop branch and the updates to GitHub, the other team member/s should clone the repository and pull all the branches.
In the below example the angle brackets
< >indicate the identifier/parameter/argument values that are provided by the user. You should omit them when executing the commands.
git clone <url-of-the-project-repo>
Once cloned the team member/s should navigate to the root directory of the cloned project and run the following command to pull the develop branch, will download the develop branch and make it available locally for the other teammember :
git pull origin develop
After this step you can start working on the backend.
To create the frontend repository repeat the above steps, using client boilerplate repo URL you got from your team's captain (LT or TA).
The steps are:
-
a. Create a new GitHub repository for the frontend
-
b. Clone the frontend boilerplate code to your machine
-
c. Connect the local frontend code to your frontend GitHub repo
-
d. Add the README to your local repository
-
e. Create the
developbranch -
f. Add the frontend repository Collaborator/s
-
g. Next step - Other team member/s (
clonethe repo and pulldevelopbranch)
Before you start working with the provided code remember to run npm install to install all of the dependencies/packages provided in the package.json of each boilerplate.
In the code for the backend/server, you have to rename the .env.sample file to .env so that dotenv can load the values provided in the file. Also remember to open the file after renaming and change any values you need, like for example name of the database in the mongo connection string and the session secret string.
-
masterbranch will be used only for deployment. -
developbranch will be used for working/development. When working on a feature create a new branch from develop.Tips to avoid merge conflicts:
-
Work on separate files, and communicate with your partner.
-
Initial setup of the back-end should be preferably done in pair, taking turns while coding and preferably coding on one laptop (pair programming).
-
Do daily checkpoints with the partner and communicate things that you will be doing and parts of code that you will be working on.
-
Make smaller commits, and write descriptive messages:
-
Max. 50 characters (over 50 will wrap in the message body) )
-
Use imperative e.g. :
- "Add session middleware to
app.js" - "Add
UserModel.js" - "Bugfix route
'/login'inroutes/auth.js"
- "Add session middleware to
-
-
In the below example the angle brackets
< >indicate the identifier/parameter/argument values that are provided by the user. You should omit them when executing the commands.
# Create a new branch and move to that branch
git checkout -b <branch-name>
# Move to an existing branch
git checkout <branch-name>
# Check the branch you are on and
# List all the existing branches
git branch
# Delete a branch
git branch -D <name-of-the-branch-to-delete>
# Merge code from another branch into a current branch
git merge <branch-from-which-to-merge>
# List the created commits on the current branch
git log