Description

ParkNDeploy is an introductory DevOps course designed to guide you through deploying a basic Parking Finder App on Azure.

It follows GitRDone, a hands-on course to get you up to speed with version control using Git.

This course covers continuous integration and continuous deployment (CI/CD) pipelines, as well as infrastructure-as-code (IaC) practices.

Prerequisites

Tools

• An Azure Account in order to deploy your App 🚀

  • Azure Students
  • Classic one (you will be ask to put a credit card even if nothing is debited)

• A GitHub account in order to fork this repo and start to work 😉

• A source code management tool :

  • Git Bash for CLI guys 😎
  • Fork for GUI guys ⭐

• [Optional] IDEs to build the app locally :

  • Visual Studio Community with .Net 9 SDK (Backend)
  • Visual Studio Code & Node JS >= 21.7.1 (Frontend)

Knowledges

• [Appreciated] Basic repository management (commits, push, merge-request)
• [Optional] Basic understanding of APIs
• [Optional] Basic understanding of SPAs

Build the App locally

Getting the project is mandatory. Backend and Frontend build step will only be mandatory at the end of this workshop.

Getting the project

First of all, you'll need to get the source code 😁 :

• Fork this project on your personnal GitHub account

⚠️ Keep Copy the DEFAULT branch only option checked (to avoid conflicts between branch names).

If you never made a fork, just follow the steps mentionned here 👀.

• Clone the project on your local machine

Again, if you never did it, just follow the steps mentionned here 👀.

• And that's it ! ✨

💡 The repository will contain the main branch as you're starting point. You're free to use feature branches or not.

If for some reasons you're blocked during this workshop, you can check solution-<currentYear> branches on the main repository.:smirk:

Backend

---

Easiest one :

• Open the ParkNDeploy.sln file with Visual Studio
• Hit the Run button using the Project Https profile (default one)
• Wait the Swagger API to launch on your default navigator
• You can start to play with it to see what it does 🎮

Some details about how the API is made and what it does could be find in the backend README file.

Frontend

---

Follow the next steps :

1️⃣ Open the ./frontend folder with Visual Studio Code

2️⃣ Open a command line terminal using CTRL+ù hotkey or through the Terminal menu on the top of Visual Studio Code

3️⃣ Run the following commands :

# This will download all the dependencies for the frontend
npm install

# This will compiles and run the frontend app under a Vite developpement server
npm run dev

# If it works, you should see a localhost URL link

4️⃣ Show the app in browser, here you have two possibilities :

• Without Visual Studio Code debugger : just CTRL+Click on the localhost URL that is being displayed on the terminal you just launched before

• With Visual Studio Code debugger :

  • Hit CTRL+SHIFT+D hotkey or click on in the left navigation bar

  • Click on

  → Basically VS Code will run the launch.json config which launch a Chrome navigator and attach the VS Code debugger to the frontend app process. This will allow you to debug through breakpoints and so on inside Visual Studio code (instead of spamming your source code with console.log() 😜).

Some details about how the Frontend App is made and what it does could be find in the frontend README file

Let's dive-In !

🚀 Buckle up, folks! It's time to blast off to the first step of our course. Ready, set, deploy!

Additional Resources (for DevOps enthusiastics)

First of all, I hope this initiation gave you interest into DevOps concepts and that you understand how it could help you in your day-to-day tasks in real-world project.

Now for a treasure trove of additional resources to dive deeper into DevOps concepts, check out the to go further section. 👀