Description

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

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 😉
IDEs to build the app locally :
- Visual Studio Community with .Net 8 SDK (Backend)
- Visual Studio Code & Node JS >= 21.7.1 (Frontend)
A source code management tool :
- Git Bash for CLI guys 😎
- Fork for GUI guys ⭐

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

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

Fork this project on your personnal GitHub account

⚠️ Don't select Copy the DEFAULT branch only option, as you will need all the branches in the repository.

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 branches :

main : this will be you're starting point
solution : on this branch you'll will be able to see answers, step by step, to compare with your code if you need to
and also... your_branches : you have the choice of commiting / pushing everything on main branch or use specific branches (we call that feature branches) for each steps 😏

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. 👀

jraillard/parkndeploy