DEV Community

Cover image for 13. Source Control
jicoing
jicoing

Posted on • Edited on

13. Source Control

#aws #github

After creating the source code for frontend and backend of my bio, it was time for setting up the source control for efficient code tracking and maintainence.

Alt text

Prerequisites for PC

VSCode
Github

Source Control

Source code management systems allow you to track your code change, see a revision history for your code, and revert to previous versions of a project when needed.
You can either use AWS CodeCommit or Git for this purpose. I chose Git for this website.

Github

For continuous integration and deployment, or CI/CD of my sources I created two repositories for my frontend and backend.

CI/CD Frontend git repository : read more

Git: https://github.com/jicoing/git-komlalebu

  • I created a git repository by the name git-komlalebu in Github and cloned it to my local with the URL.

Alt Text

CMD

               >git clone https://github.com/jicoing/git-komlalebu.git
Enter fullscreen mode Exit fullscreen mode

The basic tree structure should look like this.
With index.html, styles.css, error.html and some image files for my website under the root.
Folders:
workflows - Needed for Github actions*. Read more.
Actions - Needed for Github actions*. Read more. 

                >C:\Users\USER_NAME\git-komlalebu>tree
Enter fullscreen mode Exit fullscreen mode

Tree:

git-komlalebu
┣ 📂.github
┃ ┣ 📂actions
┃ ┃ ┗ 📂sam
┃ ┃ ┃ ┗ 📂package
┃ ┃ ┃ ┃ ┣ 📜action.yml
┃ ┃ ┃ ┃ ┣ 📜Dockerfile
┃ ┃ ┃ ┃ ┗ 📜entrypoint.sh
┃ ┗ 📂workflows
┃ ┃ ┗ 📜main.yml
┣ 📜error.html
┣ 📜git.png
┣ 📜hilltop.PNG
┣ 📜html.png
┣ 📜index.html
┣ 📜Komladefault.png
┣ 📜Komlaprocesslogo.gif
┣ 📜README.md
┣ 📜squirrel.png
┣ 📜styles.css
┗ 📜whale.png

Alt Text

  • Then I pushed contents of C:\Users\USER_NAME\git-komlalebu from local to my git repository.

CMD

             C:\Users\USER_NAME\git-komlalebu>git add .
             C:\Users\USER_NAME\git-komlalebu>git commit -m master
             C:\Users\USER_NAME\git-komlalebu>git push origin master
Enter fullscreen mode Exit fullscreen mode

git-add - Add file contents to the index.
git commit -m master - Record changes to the repository.
git push origin master - pushes the code to master branch.

CI/CD Backend git repository : read more

Git: https://github.com/jicoing/git-komlalebu-sam

  • I created a git repository by the name git-komlalebu-sam in Github and cloned it to my local with the URL.

Alt Text

CMD

                     >git clone https://github.com/jicoing/git-komlalebu-sam.git
Enter fullscreen mode Exit fullscreen mode

The basic tree structure should look like this with template.yml file and komlalebu_function folder under the root of the directory.
template.yml - has my SAM template.
komlalebu_function folder - has app.py python code that goes into my lambda function.
Folders:
Workflows - Needed for Github actions*. Read more
Actions - Needed for Github actions*. Read more

                    C:\Users\USER_NAME\git-komlalebu-sam>tree
Enter fullscreen mode Exit fullscreen mode

Tree:

git-komlalebu-sam
┣ 📂.github
┃ ┣ 📂actions
┃ ┃ ┗ 📂sam
┃ ┃ ┃ ┗ 📂package
┃ ┃ ┃ ┃ ┣ 📜.gitignore
┃ ┃ ┃ ┃ ┣ 📜action.yml
┃ ┃ ┃ ┃ ┣ 📜Dockerfile
┃ ┃ ┃ ┃ ┣ 📜entrypoint.sh
┃ ┃ ┃ ┃ ┣ 📜LICENSE
┃ ┃ ┃ ┃ ┗ 📜README.md
┃ ┗ 📂workflows
┃ ┃ ┗ 📜ci.yml
┣ 📂komla_function
┃ ┣ 📜app.py
┃ ┗ 📜requirements.txt
┣ 📜README.md
┗ 📜template.yaml

Alt Text

  • Then I pushed contents of C:\Users\USER_NAME\git-komlalebu-sam from local to my git repository.

CMD

             C:\Users\USER_NAME\git-komlalebu-sam>git add .
             C:\Users\USER_NAME\git-komlalebu-sam>git commit -m master
             C:\Users\USER_NAME\git-komlalebu-sam>git push origin master
Enter fullscreen mode Exit fullscreen mode

And the source control was setup.
Alt Text

Top comments (0)