Use Prisma

Author: 2color

README.md

@@ -2,17 +2,15 @@
 page_type: sample
 languages:
 - nodejs
-- javascript
-- tsql
+- typescript
 - sql
-- json
 products:
 - azure
 - vs-code
 - azure-sql-database
 - azure-functions
 - azure-web-apps
-description: "TodoMVC Sample app Full Stack implementation using Azure Static WebApps, Azure Functions, Node, Vue.Js and Azure SQL (full JSON support)"
+description: "TodoMVC Sample app Full Stack implementation using Prisma, Azure Static WebApps, Azure Functions, TypeScript, Nodejs, Vue.Js and Azure SQL (full JSON support)"
 urlFragment: "azure-sql-db-todo-mvc"
 ---
 
@@ -37,6 +35,8 @@ The implementation uses
 - [Azure Static WebApp](https://azure.microsoft.com/en-us/services/app-service/static/): to bind everything together in one easy package, natively integrated with GitHub CI/CD pipeline
 - [Vue.Js](https://vuejs.org/) as front-end client
 - [Azure Function](https://azure.microsoft.com/en-us/services/functions/) for providing serverless back-end infrastructure
+- [Prisma](https://www.prisma.io/) to interact with the Azure SQL database
+- [TypeScript](https://www.typescriptlang.org/) for the back-end logic
 - [NodeJS](https://nodejs.org/en/) for the back-end logic
 - [Azure SQL](https://azure.microsoft.com/en-us/services/sql-database/) as database to store ToDo data
 - [GitHub Actions](https://github.com/features/actions) to Deploy the full-stack website (thanks to Azure Static WebApps)
@@ -53,11 +53,26 @@ More details are available in this blog post: [TodoMVC Full Stack with Azure Sta
 
 ## Setup Database
 
-Execute the `/database/create.sql` script on a database of your choice. Could be a local SQL Server or an Azure SQL running in the cloud. Just make sure the desired database is reachable by your local machine (eg: firewall, authentication and so on), then use SQL Server Management Studio or Azure Data Studio to run the script. 
+Create a `.env` file by copying [.env.template](./api/.env.template) inside the [./api](./api) folder. 
+
+Define the database URL using the following format:
+```
+DATABASE_URL="sqlserver://DB_SERVER_NAME.database.windows.net:1433;database=DB_NAME;user=DB_USER@DB_SERVER_NAME;password={PASSWORD};encrypt=true;trustServerCertificate=false;hostNameInCertificate=*.database.windows.net;loginTimeout=30"
+```
+
+The server could be a local SQL Server or an Azure SQL running in the cloud. Just make sure the desired database is reachable by your local machine (eg: firewall, authentication and so on).
+
+To create the database schema, run the following command:
+```
+npx prisma migrate deploy
+```
+
+> **Note:** `prisma migrate deploy` will run the migration in the repository. To automatically create SQL migrations based on changes in your Prisma schema and run them use the `prisma migrate dev` command. If you're using Azure SQL and the `prisma migrate dev` command, you will need to also set the URL of the [shadow database](https://www.prisma.io/docs/concepts/components/prisma-migrate/shadow-database#cloud-hosted-shadow-databases-must-be-created-manually) for development purposes.
+
 
 Of course if you want to deploy the solution on Azure, use Azure SQL.
 
-If you need any help in executing the SQL script on Azure SQL, you can find a Quickstart here: [Use Azure Data Studio to connect and query Azure SQL database](https://docs.microsoft.com/en-us/sql/azure-data-studio/quickstart-sql-database).
+To learn more about [Prisma Migrate](https://www.prisma.io/migrate), check out the [Prisma Migrate docs](https://www.prisma.io/docs/concepts/components/prisma-migrate)
 
 If you need to create an Azure SQL database from scratch, an Azure SQL S0 database would be more than fine to run the tests.
 

api/.env.template

@@ -1,4 +1 @@
-db_server=".database.windows.net"
-db_user="webapp"
-db_password="Super_Str0ng*P@ZZword!"
-db_database=""
+DATABASE_URL="sqlserver://DB_SERVER_NAME.database.windows.net:1433;database=DB_NAME;user=DB_USER@DB_SERVER_NAME;password={PASSWORD};encrypt=true;trustServerCertificate=false;hostNameInCertificate=*.database.windows.net;loginTimeout=30"

api/.gitignore

@@ -1,95 +1,4 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-lerna-debug.log*
-
-# Diagnostic reports (https://nodejs.org/api/report.html)
-report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules/
-jspm_packages/
-
-# TypeScript v1 declaration files
-typings/
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variables file
+node_modules
+# Keep environment variables out of version control
 .env
-.env.test
-
-# parcel-bundler cache (https://parceljs.org/)
-.cache
-
-# next.js build output
-.next
-
-# nuxt.js build output
-.nuxt
-
-# vuepress build output
-.vuepress/dist
-
-# Serverless directories
-.serverless/
-
-# FuseBox cache
-.fusebox/
-
-# DynamoDB Local files
-.dynamodb/
-
-# TypeScript output
-dist
-out
-
-# Azure Functions artifacts
-bin
-obj
-appsettings.json
-local.settings.json
-.env
+dist/

api/todo/function.json renamed to api/TodoFunction/function.json

@@ -5,15 +5,14 @@
       "type": "httpTrigger",
       "direction": "in",
       "name": "req",
-      "methods": [
-        "get", "put", "post", "delete"
-      ],
+      "methods": ["get", "put", "post", "delete"],
       "route": "todo/{id:int?}"
     },
     {
       "type": "http",
       "direction": "out",
       "name": "res"
     }
-  ]
+  ],
+  "scriptFile": "../dist/TodoFunction/index.js"
 }

api/TodoFunction/index.ts

@@ -0,0 +1,130 @@
+import { AzureFunction, Context, HttpRequest } from '@azure/functions'
+import { PrismaClient, Todo } from '@prisma/client'
+
+const prisma = new PrismaClient()
+
+const httpTrigger: AzureFunction = async function (
+  context: Context,
+  req: HttpRequest,
+): Promise<any> {
+  const method = req.method.toLowerCase()
+
+  switch (method) {
+    case 'get':
+      await getTodo(context, req?.params?.id)
+      break
+    case 'post':
+      await createTodo(context, req.body)
+      break
+    case 'put':
+      await updateTodo(context, req?.params?.id, req.body)
+      break
+    case 'delete':
+      await deleteTodo(context, req?.params?.id)
+      break
+  }
+}
+
+export default httpTrigger
+
+async function getTodo(context: Context, id: string): Promise<void> {
+  const parsedId = parseInt(id, 10)
+  if (isNaN(parsedId)) {
+    context.res.status = 400
+    return
+  }
+
+  const todo = await prisma.todo.findUnique({
+    where: {
+      id: parsedId,
+    },
+  })
+
+  if (todo) {
+    context.res.body = todo
+  } else {
+    context.res = { status: 404 }
+  }
+}
+
+async function createTodo(context: Context, body: unknown) {
+  if (!isTodo(body)) {
+    context.res.status = 400
+    return
+  }
+
+  try {
+    const todo = await prisma.todo.create({
+      data: {
+        todo: body.todo,
+        completed: body.completed === 'true' || undefined,
+      },
+    })
+    context.res.body = todo
+  } catch (e) {
+    context.res.body = e
+    context.res.status = 500
+  }
+}
+
+async function deleteTodo(context: Context, id: string) {
+  const parsedId = parseInt(id, 10)
+  if (isNaN(parsedId)) {
+    context.res.status = 400
+    return
+  }
+
+  try {
+    const todo = await prisma.todo.delete({
+      where: {
+        id: parsedId,
+      },
+    })
+    context.res.body = todo
+  } catch (e) {
+    context.res.status = 500
+  }
+}
+
+async function updateTodo(context: Context, id: string, body: unknown) {
+  if (!isTodo(body) || !id) {
+    context.res.status = 400
+    return
+  }
+
+  try {
+    // convert to boolean and undefined if not passed in so it doesn't change in the DB
+    const completed =
+      body.completed === 'true'
+        ? true
+        : body.completed === 'false'
+        ? false
+        : undefined
+
+    const todo = await prisma.todo.update({
+      data: {
+        todo: body.todo,
+        completed,
+      },
+      where: {
+        id: parseInt(id, 10),
+      },
+    })
+    context.res.body = todo
+  } catch (e) {
+    context.log(e)
+    context.res.status = 500
+  }
+}
+
+// Type definition for the request input of a todo
+interface InputTodo {
+  id?: string
+  completed?: string
+  todo: string
+}
+
+// Function to validate at runtime while giving type safety 
+const isTodo = (todo: unknown): todo is InputTodo => {
+  return typeof todo === 'object' && ('todo' in todo || 'completed' in todo)
+}

api/local.settings.json

@@ -0,0 +1,7 @@
+{
+  "IsEncrypted": false,
+  "Values": {
+    "FUNCTIONS_WORKER_RUNTIME": "node",
+    "AzureWebJobsStorage": ""
+  }
+}