A real case study how to apply Azure SQL with Prisma & Vue
MIT License
A real study case application how to apply Node.Js with:
Before starting to watch the video series we recommend that you download the project (FrontEnd side). Because we will use it to make the communication with the BackEnd created during this course!
FrontEnd Starter Project - HERE
Below you can see all the recorded videos about the application's development.
Videos | Description |
---|---|
Video 01 - Course Overview | In this video we will see about the course and the application that will be developed. |
Video 02 - Learning Objectives | In this video we will see the learning objectives of the Prisma Fundamentals module |
Video 03 - What is Prisma? | In this video we will learn what is Prisma? |
VĂdeo 04 - Why we Should use Prisma? | In this video we will learn why we should use Prisma, which has been considered a powerful ORM for JavaScript Developers. |
Video 05 - Key Concepts about Prisma | In this video we will learn the main pillars around the Prisma! |
VĂdeo 06 - Important Resources & Recap | Recap on what we learned and how you can dig deeper into Prisma. |
VĂdeo 07 - Module 02: Overview | In this video you will see what will learn during the Module 02 about Azure SQL. |
VĂdeo 08 - What is Azure SQL? | In this video you will understand what is Azure SQL and the different options like: Single Database and Elastic Pool. |
VĂdeo 09 - Why should we use Azure SQL? | In this video you will understand why is so important to use Azure SQL in your projects! |
VĂdeo 10 - Azure SQL Support in Prisma | In this video we will show you that Azure SQL has a perfect fit with Prisma! |
VĂdeo 11 - Important Resources & Recap | Recap on what we learned and how you can dig deeper into Azure SQL. |
VĂdeo 12 - Module 03: Overview | In this video you will see what will learn during the Module 03 about Azure Static Web Apps. |
VĂdeo 13 - What is Azure Static Web Apps? | In this video we will learn what is Azure Static Web Apps. |
VĂdeo 14 - Understanding the Azure Static Web Apps Workflow | In this video we will understand under the hood how the Azure Static Web Apps workflow works. |
VĂdeo 15 - Why should we use Azure Static Web Apps? | In this video we will understand the benefits to use Azure Static Web Apps! |
VĂdeo 16 - Which libs/frameworks can I use with Azure Static Web Apps? | In this video we will see that can use Azure Static Web Apps with different libs and the most popular frameworks! |
VĂdeo 17 - Important Resources & Recap | Recap on what we learned and how you can dig deeper into Azure Static Web Apps. |
VĂdeo 18 - Dev Tools Overview & Installation | In this video we are going to install all the necessary dev tools that we will go into need to develop our application in the BackEnd side. |
VĂdeo 19 - Configuring the .devContainer folder | In this video we will understand the importance around to create a .devContainer folder in any project and a little overview about it! |
VĂdeo 20 - Important Resources & Recap | Recap what we saw during the module 04 and preparing for what is coming! |
VĂdeo 21 - Application Overview | In this video we will take a first look around the BackEnd application that we are going to build! |
VĂdeo 22 - Forking the Front-End project | In this video we are going to forking/cloning the Front-End starter project! |
VĂdeo 23 - Structuring the Back-End project | In this video we are going to structuring the BackEnd project using Azure Functions. |
VĂdeo 24 - Creating Database Server | In this video we are going to create our Database Server using the Azure Portal. |
VĂdeo 25 - Creating Database | Now we already created our Database server, it's time to create our Employee Database using Azure Portal. |
VĂdeo 26 - Creating Shadow Database | In this video we are going to create shadow database using Azure Portal. |
VĂdeo 27 - Installing Packages | In this video we are going to install all the necessary packages for our project! |
VĂdeo 28 - Modeling Database with Prisma | In this video we are going to learn how to initialize and modeling our database using Prisma. |
VĂdeo 29 - Using Prisma Migrations | In this video we are going to understand how Prisma migrations works! |
VĂdeo 30 - Using Prisma Studio | In this video we are going to take a look how Prisma Studio works and use it to manipulate our database. |
VĂdeo 31 - Developing 'CreateEmployee' | In this video we're going to create our first function: Create Employee using Prisma & Azure Functions |
VĂdeo 32 - Developing 'GetEmployees' | In this video we are going to develop the functionality to list all the employees using Azure Functions. |
VĂdeo 33 - Developing 'GetEmployee' | In this video we are going to develop the functionality to return an employee by Id using Azure Functions. |
VĂdeo 34 - Developing 'UpdateEmployee' | In this video we are going to develop the functionality to update an employee by Id using Azure Functions. |
VĂdeo 35 - Developing 'DeleteEmployee' | In this video we are going to develop the functionality to delete an employee by Id using Azure Functions. |
VĂdeo 36 - Deploying the App with ASWA | In this video we are going to deploy our application using Azure Static Web Apps with GitHub Actions Integration! |
VĂdeo 37 - Next Steps | In this video we are going to see the next steps that you should see after this course! |
This repo uses Development Containers. Make sure to have Docker installed and running on your machine before moving forward. If you want to know more about DevContainers and why they are so important, read here: Your open source project needs a DevContainer - Here's Why.
To execute locally this project you will need to follow the steps bellow:
client
and run the command:npm install
npm run serve
http://localhost:8080/
. Thanks to the configuration defined in vue.config.js
all requests will be automatically proxied to the local Azure Functions host. You can learn more about the integrated proxy in vue client here: VUE CLI Configuration Reference
Depending on what you prefer, you can use a local SQL Server to Azure SQL DB hosted in Azure to run your local application.
Using local SQL Server
Thanks to DevContainers, SQL Server 2019 is already running in your enviroment. All you have to do is to create an .env
file in the api
folder and add the connection string to connect to the aformentioned SQL Server 2019:
# Database connection string
DATABASE_URL="sqlserver://db:1433;database=EmployeeDB;user=sa;password=P@ssw0rd;encrypt=true;trustServerCertificate=true;"
# Shadow database connection string for development
SHADOW_DATABASE_URL="sqlserver://db:1433;database=EmployeeDB;user=sa;password=P@ssw0rd;encrypt=true;trustServerCertificate=true;"
Unless you have changed the database name, login and password in the Dockerfile that comes into the .devcontainer
folder, the above connection string is already correct. Of course make sure you use this connection string only for testing, as it is using the sa
account to log into SQL Server, which is the most powerful administrative account and should not be used to connect your application to the database.
Using Azure SQL database
If you want to test Azure SQL database, to make sure everything will work perfectly even when deployed on Azure, you need to create an Azure SQL database before.
Using the Azure Dev CLI
The following prerequisites are required to use this application. Please ensure that you have them all installed locally.
powershell -ex AllSigned -c "Invoke-RestMethod 'https://aka.ms/install-azd.ps1' | Invoke-Expression"
curl -fsSL https://aka.ms/install-azd.sh | bash
To create the necessary infrastructure on Azure:
azd provision
For more details, read the Azure Dev CLI documentation.
Once the infrastructure has been created, create a .env
file in the api
folder and copy/paste content from .azure/azure-sql-prisma-vue/.env
. We only care about the DATABASE_URL
and SHADOW_DATABASE_URL
variables:
# Database connection string
DATABASE_URL="sqlserver://DB_SERVER_NAME.database.windows.net:1433;database=DB_NAME;user=DB_USER@DB_SERVER_NAME;password={PASSWORD};encrypt=true"
# Shadow database connection string for development
SHADOW_DATABASE_URL="sqlserver://DB_SERVER_NAME.database.windows.net:1433;database=DB_NAME;user=DB_USER@DB_SERVER_NAME;password={PASSWORD};encrypt=true"
Using the Azure Portal
The are different ways you can create an Azure SQL Database. Using the Portal, using AZ CLI or Powershell. The easiest is using the Portal, and you can have see complete walk-through in this recording: Demo: Deploy Azure SQL Database | Azure SQL for beginners (Ep. 14). If you prefer reading instead of watching, here a complete quickstart guide available, with detailed steps for each option: Quickstart: Create an Azure SQL Database single database. If you want something more concise and direct, you can to follow the simple 6-steps guide available here: Create and connect to an Azure SQL DB.
Make sure you create two Azure SQL databases:
azuresql-prisma-database
azuresql-prisma-database-shadow
And you also create two users, one for each database. If you are not sure how to do it, don't worry, the links mentioned above will help you in going throught the simple process.
Once the database have beem created, include the Azure SQL Server connection string creating an .env
file in the api
folder:
# Database connection string
DATABASE_URL="sqlserver://DB_SERVER_NAME.database.windows.net:1433;database=DB_NAME;user=DB_USER@DB_SERVER_NAME;password={PASSWORD};encrypt=true"
# Shadow database connection string for development
SHADOW_DATABASE_URL="sqlserver://DB_SERVER_NAME.database.windows.net:1433;database=DB_NAME;user=DB_USER@DB_SERVER_NAME;password={PASSWORD};encrypt=true"
api
and run the command:> npm install
Make sure you have an .env
file configured as explained in the Project: db
section above.
Now create a file called: local.settings.json
(root of the project) and include this information below:
{
"IsEncrypted": false,
"Values": {
"FUNCTIONS_WORKER_RUNTIME": "node",
"AzureWebJobsStorage": ""
},
"Host": {
"LocalHttpPort": 7071,
"CORS": "*"
}
}
> npx prisma migrate dev
> npm run dev
You will see the message saying the application is running in the port: http://localhost:7071/api/
Objective | HTTP Verb | Route |
---|---|---|
CreateEmployee | POST | http://localhost:7071/api/employees |
GetEmployees | GET | http://localhost:7071/api/employees |
GetEmployee | GET | http://localhost:7071/api/{id} |
UpdateEmployee | PUT | http://localhost:7071/api/{id} |
DeleteEmployee | DELETE | http://localhost:7071/api/{id} |
If you have any questions about the code developed, feel free to open an ISSUE HERE. We'll get back to you soon!