diff --git a/apps/blog/content/blog/accelerate-ga-release-i9cqm6bsf2g6/index.mdx b/apps/blog/content/blog/accelerate-ga-release-I9cQM6bSf2g6/index.mdx
similarity index 92%
rename from apps/blog/content/blog/accelerate-ga-release-i9cqm6bsf2g6/index.mdx
rename to apps/blog/content/blog/accelerate-ga-release-I9cQM6bSf2g6/index.mdx
index fb1a603a37..b9963bfe48 100644
--- a/apps/blog/content/blog/accelerate-ga-release-i9cqm6bsf2g6/index.mdx
+++ b/apps/blog/content/blog/accelerate-ga-release-I9cQM6bSf2g6/index.mdx
@@ -1,13 +1,13 @@
---
title: "Prisma Accelerate now in General Availability"
-slug: "accelerate-ga-release-i9cqm6bsf2g6"
+slug: "accelerate-ga-release-I9cQM6bSf2g6"
date: "2023-10-26"
authors:
- "Sam Bhatti"
metaTitle: "Prisma Accelerate now in General Availability"
metaDescription: "Supercharge your applications with Prisma Accelerate's scalable connection pooling and global edge caching. Plus, enjoy our exclusive launch offer."
-metaImagePath: "/accelerate-ga-release-i9cqm6bsf2g6/imgs/meta-42554fa75736c00b0ca55e1e440dde26f43dcb3f-1266x711.png"
-heroImagePath: "/accelerate-ga-release-i9cqm6bsf2g6/imgs/hero-de83f5f843f2a86abd05659c94c3069e7577a0f5-844x474.svg"
+metaImagePath: "/accelerate-ga-release-I9cQM6bSf2g6/imgs/meta-42554fa75736c00b0ca55e1e440dde26f43dcb3f-1266x711.png"
+heroImagePath: "/accelerate-ga-release-I9cQM6bSf2g6/imgs/hero-de83f5f843f2a86abd05659c94c3069e7577a0f5-844x474.svg"
heroImageAlt: "Prisma Accelerate now in General Availability"
tags:
- "announcement"
@@ -36,7 +36,7 @@ To see what Prisma Accelerate can do, let's take a look at its implementation in
### Cal.com: Enhancing scheduling efficiency
@@ -46,7 +46,7 @@ To see what Prisma Accelerate can do, let's take a look at its implementation in
Prisma Accelerate's robust connection pooling is designed to handle high volumes of database interactions efficiently. For platforms like Cal.com, this means over 4M queries every day to enable seamless management of appointments, even with heavy traffic peaks.
@@ -61,7 +61,7 @@ Prisma Accelerate's robust connection pooling is designed to handle high volumes
### Formbricks: Privacy-first survey suite
@@ -71,7 +71,7 @@ Prisma Accelerate's robust connection pooling is designed to handle high volumes
Leveraging Prisma Accelerate's connection pooling, Formbricks achieves seamless and rapid data access, with high-traffic peaking at 7M queries in a 24-hour time period. This allows them to maintain consistent performance, even when faced with unpredictable user traffic, ensuring a smooth experience for all their users.
diff --git a/apps/blog/content/blog/ambassador-program-nxkwgcgnuvfx/index.mdx b/apps/blog/content/blog/ambassador-program-nxkWGcGNuvFx/index.mdx
similarity index 97%
rename from apps/blog/content/blog/ambassador-program-nxkwgcgnuvfx/index.mdx
rename to apps/blog/content/blog/ambassador-program-nxkWGcGNuvFx/index.mdx
index 168a461d4c..7f5b07b157 100644
--- a/apps/blog/content/blog/ambassador-program-nxkwgcgnuvfx/index.mdx
+++ b/apps/blog/content/blog/ambassador-program-nxkWGcGNuvFx/index.mdx
@@ -1,14 +1,14 @@
---
title: "Prisma Ambassador Program — Building A Community of Experts"
-slug: "ambassador-program-nxkwgcgnuvfx"
+slug: "ambassador-program-nxkWGcGNuvFx"
date: "2021-05-28"
authors:
- "Vladi Stevanovic"
- "Nikolas Burk"
metaTitle: "Announcing the Prisma Ambassador Program — Building A Community of Experts"
metaDescription: "We are thrilled to announce the launch of the Ambassador Program to empower the Prisma community, while also helping individual contributors build their own brand."
-metaImagePath: "/ambassador-program-nxkwgcgnuvfx/imgs/meta-de28b5e0df55c52078065ee2ae0b44d6cdf0da1e-1692x852.png"
-heroImagePath: "/ambassador-program-nxkwgcgnuvfx/imgs/hero-1bdf6237d95ded8d448f28db203012147fdcd39e-846x426.png"
+metaImagePath: "/ambassador-program-nxkWGcGNuvFx/imgs/meta-de28b5e0df55c52078065ee2ae0b44d6cdf0da1e-1692x852.png"
+heroImagePath: "/ambassador-program-nxkWGcGNuvFx/imgs/hero-1bdf6237d95ded8d448f28db203012147fdcd39e-846x426.png"
heroImageAlt: "Prisma Ambassador Program — Building A Community of Experts"
tags:
- "announcement"
diff --git a/apps/blog/content/blog/amplication-customer-story-nmlkbnlllxnn/index.mdx b/apps/blog/content/blog/amplication-customer-story-nmlkBNlLlxnN/index.mdx
similarity index 95%
rename from apps/blog/content/blog/amplication-customer-story-nmlkbnlllxnn/index.mdx
rename to apps/blog/content/blog/amplication-customer-story-nmlkBNlLlxnN/index.mdx
index 236533d5f6..9039de9bb9 100644
--- a/apps/blog/content/blog/amplication-customer-story-nmlkbnlllxnn/index.mdx
+++ b/apps/blog/content/blog/amplication-customer-story-nmlkBNlLlxnN/index.mdx
@@ -1,13 +1,13 @@
---
title: "How Prisma helps Amplication evolutionize backend development"
-slug: "amplication-customer-story-nmlkbnlllxnn"
+slug: "amplication-customer-story-nmlkBNlLlxnN"
date: "2022-04-29"
authors:
- "Alex Emerich"
metaTitle: "How Prisma helps Amplication evolutionize backend development"
metaDescription: "How Prisma helps Amplication evolutionize backend development"
-metaImagePath: "/amplication-customer-story-nmlkbnlllxnn/imgs/meta-4baa84e48a0da8e13e23367137d5a17515119aaf-2881x1620.png"
-heroImagePath: "/amplication-customer-story-nmlkbnlllxnn/imgs/hero-b1fb9ec0c8fca054011688621bfe51ea1836af10-844x474.svg"
+metaImagePath: "/amplication-customer-story-nmlkBNlLlxnN/imgs/meta-4baa84e48a0da8e13e23367137d5a17515119aaf-2881x1620.png"
+heroImagePath: "/amplication-customer-story-nmlkBNlLlxnN/imgs/hero-b1fb9ec0c8fca054011688621bfe51ea1836af10-844x474.svg"
heroImageAlt: "How Prisma helps Amplication evolutionize backend development"
tags:
- "user-success-story"
@@ -27,7 +27,7 @@ Working at larger companies, [Amplication](https://amplication.com/) founder, Yu
With Amplication, you can easily create data models and configure role-based access control with a simple and intuitive UI (or even [via their CLI](https://github.com/amplication/amplication/tree/master/packages/amplication-cli#amp-entitiescreate-displayname)). Based on these model definitions, Amplication generates production-ready, yet fully customizable, application code. This code is continuously pushed to your GitHub repository, and you get a dedicated Docker container to house your database, a Node.js application, and a React client.
-
+
For fullstack developers, their repetitive coding tasks are taken care of, but they still retain **complete ownership** of the code to deploy where they wish and are free to download the generated app code and continue development elsewhere.
@@ -48,7 +48,7 @@ For the server side you get:
- [Jest](https://jestjs.io/): A delightful JavaScript testing framework with a focus on simplicity
- [Docker](https://www.docker.com/): An open platform for developing, shipping, and running applications
-
+
The Amplication team strongly believes in open-source technology and a user focused community, so they made sure this belief was at the center of the tools they bring their users.
@@ -57,7 +57,7 @@ The Amplication team strongly believes in open-source technology and a user focu
When first beginning work on Amplication in 2020, [Yuval Hazaz](https://twitter.com/Yuvalhazaz1), CEO at Amplication, made an early bet on Prisma to not just be a tool used by himself and his engineers, but also a central cog in the stack managed by Amplication users. Among other ORM options, Yuval felt Prisma was meeting developer needs the best and was strongly convinced by the Prisma community. Yuval was impressed by the consistent work done by the Prisma team to bring new features to its users based on feedback directly from the community. Amplication places a strong importance on the open-source community’s ability to collaborate and make better developer experiences, a sentiment shared at Prisma.
```
-
+
Right now we have `any` applied as the return type to the `getUserDetails` function in `UserDetails.svelte`. Let's apply type-safety here by defining a type and using it.
@@ -516,7 +516,7 @@ This will open up Prisma Studio in the browser at `http://locahost:5555`.
We can click into the `User` table to view it. We can also take this opportunity to create some new data right through the UI.
-
+
### Create an Endpoint to Get the User Data
@@ -590,7 +590,7 @@ In the Svelte project, let's swap our the github.com URL in the fetch call in `U
With this simple change, we should now be getting data from our server instead of from GitHub.
-
+
## Wrapping Up
diff --git a/apps/blog/content/blog/client-extensions-ga-4g4yiu8eosbb/index.mdx b/apps/blog/content/blog/client-extensions-ga-4g4yIu8eOSbB/index.mdx
similarity index 97%
rename from apps/blog/content/blog/client-extensions-ga-4g4yiu8eosbb/index.mdx
rename to apps/blog/content/blog/client-extensions-ga-4g4yIu8eOSbB/index.mdx
index d8e429a5c0..e333d3fd86 100644
--- a/apps/blog/content/blog/client-extensions-ga-4g4yiu8eosbb/index.mdx
+++ b/apps/blog/content/blog/client-extensions-ga-4g4yIu8eOSbB/index.mdx
@@ -1,13 +1,13 @@
---
title: "Prisma Client Extensions Are Now Production Ready"
-slug: "client-extensions-ga-4g4yiu8eosbb"
+slug: "client-extensions-ga-4g4yIu8eOSbB"
date: "2023-06-22"
authors:
- "Jon Harrell"
metaTitle: "Prisma Client Extensions Are Now Production Ready (4.16.0)"
metaDescription: "Make Prisma Client do even more with Client extensions, now Generally Available. Extend your client, models, queries, and results to tailor Prisma Client to your use case."
-metaImagePath: "/client-extensions-ga-4g4yiu8eosbb/imgs/meta-50e7e57ea5967ad67ce89e682aca57f5e19fd65a-1266x712.png"
-heroImagePath: "/client-extensions-ga-4g4yiu8eosbb/imgs/hero-b404c12ca7de2f9288368dacbce578b790bfd66d-844x474.svg"
+metaImagePath: "/client-extensions-ga-4g4yIu8eOSbB/imgs/meta-50e7e57ea5967ad67ce89e682aca57f5e19fd65a-1266x712.png"
+heroImagePath: "/client-extensions-ga-4g4yIu8eOSbB/imgs/hero-b404c12ca7de2f9288368dacbce578b790bfd66d-844x474.svg"
heroImageAlt: "Prisma Client Extensions"
tags:
- "orm"
diff --git a/apps/blog/content/blog/cockroach-ga-5jrd9xvwqdyl/index.mdx b/apps/blog/content/blog/cockroach-ga-5JrD9XVWQDYL/index.mdx
similarity index 94%
rename from apps/blog/content/blog/cockroach-ga-5jrd9xvwqdyl/index.mdx
rename to apps/blog/content/blog/cockroach-ga-5JrD9XVWQDYL/index.mdx
index 7a89a823ee..9b07080e30 100644
--- a/apps/blog/content/blog/cockroach-ga-5jrd9xvwqdyl/index.mdx
+++ b/apps/blog/content/blog/cockroach-ga-5JrD9XVWQDYL/index.mdx
@@ -1,13 +1,13 @@
---
title: "Prisma Support for CockroachDB Is Production Ready 🪳"
-slug: "cockroach-ga-5jrd9xvwqdyl"
+slug: "cockroach-ga-5JrD9XVWQDYL"
date: "2022-05-25"
authors:
- "Sabin Adams"
metaTitle: "Prisma support for CockroachDB is now in GA"
metaDescription: "Prisma's support for CockroachDB is now in production ready! Read this article to learn about the features and benefits of Prisma with CockroachDb."
-metaImagePath: "/cockroach-ga-5jrd9xvwqdyl/imgs/meta-77148d314c74789939fb2b2af2bf3f82378cebc0-1920x1080.png"
-heroImagePath: "/cockroach-ga-5jrd9xvwqdyl/imgs/hero-ebf53ec190dab44f271d4f0dd1ad658507f55b66-844x474.svg"
+metaImagePath: "/cockroach-ga-5JrD9XVWQDYL/imgs/meta-77148d314c74789939fb2b2af2bf3f82378cebc0-1920x1080.png"
+heroImagePath: "/cockroach-ga-5JrD9XVWQDYL/imgs/hero-ebf53ec190dab44f271d4f0dd1ad658507f55b66-844x474.svg"
heroImageAlt: "Prisma Support for CockroachDB Is Production Ready"
tags:
- "announcement"
@@ -25,7 +25,7 @@ Back in February, as part of the [3.9.0](https://github.com/prisma/prisma/releas
Thanks to the amazing community feedback and testing, along with collaboration from the amazing [Cockroach Labs](https://www.cockroachlabs.com/) team, this feature is now production-ready!
-
+
## The power of serverless with a familiar interface
@@ -40,7 +40,7 @@ Using Prisma with CockroachDB is, for the most part, the same as using Prisma wi
The magic behind Prisma _with_ CockroachDB is that developers now have access to the scalable infrastructure of a distributed SQL database without having to be an expert in hosting and scaling databases. CockroachDB handles that piece of things so developers can focus on building their product rather than spending time on operational overhead.
-
+
The developer's experience when interacting with their CockroachDB database (or database cluster) is made super smooth as Prisma helps maintain advanced developer confidence and productivity via its type-safe client and migration tools while CockroachDB handles the complicated operational tasks such as:
@@ -71,7 +71,7 @@ Then create a new migration to account for that change.
```shell
npx prisma migrate dev --name add-age
```
-
+
Finally, ideally during a CI/CD step, the changes can be deployed to the database and CockroachDB will apply these across all of the databases in the cluster without downtime.
@@ -86,7 +86,7 @@ Prisma Schema Language (PSL) supports configuring [indexes](https://www.prisma.i
This, along with CockroachDB's [statement monitoring page](https://www.cockroachlabs.com/docs/stable/ui-statements-page.html) provide a super useful set of tools that empower developers to have clear insights into their queries' performance and pathways to optimizing them.
-
+
## Get started with CockroachDB and Prisma
diff --git a/apps/blog/content/blog/database-access-on-the-edge-8F0t1s1BqOJE/index.mdx b/apps/blog/content/blog/database-access-on-the-edge-8F0t1s1BqOJE/index.mdx
new file mode 100644
index 0000000000..c3c4bafd6b
--- /dev/null
+++ b/apps/blog/content/blog/database-access-on-the-edge-8F0t1s1BqOJE/index.mdx
@@ -0,0 +1,321 @@
+---
+title: "Database access on the Edge with Next.js, Vercel & Prisma Accelerate"
+slug: "database-access-on-the-edge-8F0t1s1BqOJE"
+date: "2022-07-29"
+authors:
+ - "Alex Ruheni"
+metaTitle: "Database access on the Edge with Next.js, Vercel & Prisma Accelerate"
+metaDescription: "Learn how you can query databases in Edge environments using Prisma and the Prisma Accelerate."
+metaImagePath: "/database-access-on-the-edge-8F0t1s1BqOJE/imgs/41eccd0c9a716384d9635415e90e434abfda6c58-1692x952.png"
+heroImagePath: "/database-access-on-the-edge-8F0t1s1BqOJE/imgs/1fc839965595779722b9fca14e1e517d94aa9726-844x474.svg"
+heroImageAlt: "Database access on the Edge with Next.js, Vercel & Prisma Accelerate"
+tags:
+ - "education"
+---
+
+The Edge enables application deployment across the globe. This article explores what Edge environments are, the challenges that arise when working in Edge environments and how to access databases on the Edge using Prisma Accelerate.
+
+
+## What is the Edge?
+
+Traditionally, applications would be deployed to a single region or data center, in either a virtual machine, Platform as a Service (PaaS) like Heroku, or Functions as a Service (FaaS) like AWS Lambda. While this deployment pattern worked fine, the problem this created was that a user located on the other side of the globe would experience slightly longer response times.
+
+We — developers — attempted to fix this with the JAMstack architecture, where static assets, such as HTML, CSS, JavaScript, and images, would be distributed across the globe in a Content Delivery Network (CDN). This improved loading times — the [Time to First Byte (TTFB)](https://web.dev/ttfb/) — of web applications, but if the application required dynamic data, e.g., from an API or database, the application needed to make another request for the data. This also worked fine. However, the side effect was that we also distributed loading spinners across the web.
+
+{/*  */}
+
+We took this a step further and introduced Edge computing such as [Vercel's Edge Network](https://vercel.com/features/edge-functions). The Edge is a form of _serverless compute_ that allows running server-side code geographically close to its end users.
+
+{/* ![[Source] Cloudflare workers](https://user-images.githubusercontent.com/33921841/180796884-3636b4f4-c065-4a85-8682-f7ee7114e2f6.png) */}
+
+Edge computing works similarly to serverless functions, without the cold starts because they have a smaller runtime. This is great because web apps would perform better, but it comes at a cost: A smaller runtime on the Edge means that you don't have the exact same capabilities as you would have in regular Node.js runtime used in serverless functions.
+
+
+### Edge functions can easily exhaust database connections
+
+Edge functions are stateless, meaning they lack persistent state between requests. This architecture clashes with the stateful nature of traditional relational databases, where each request requires a new database connection.
+
+With every request to the application, a new database connection is established, adding substantial overhead to queries and potentially hindering application performance as it scales. Moreover, during traffic spikes, the database is at risk of running out of database connections, leading to downtimes.
+
+You can learn more about the challenges of database access in Edge environments, which is similar to serverless environments, in [this article](https://www.prisma.io/blog/overcoming-challenges-in-serverless-and-edge-environments-TQtONA0RVxuW).
+
+### Database access on the Edge with Prisma Accelerate
+
+[Prisma Accelerate](https://www.prisma.io/docs/accelerate) offers a connection pooler for your database, that reuses database connections and allows you to interact with your database over HTTP.
+
+The connection pool of Accelerate ensures optimal performance by efficiently reusing database connections for serverless and edge applications (i.e. applications using [Vercel Edge Functions](https://vercel.com/features/edge-functions) or [Cloudflare Workers](https://workers.cloudflare.com/)).
+
+In addition to providing connection pooling by default, Prisma Accelerate also offers a global edge cache. You can drastically improve the performance of your applications by opting-in and caching your query results in-line with your Prisma queries. You can learn more about caching with Accelerate [here](https://www.prisma.io/docs/accelerate/caching).
+
+### Do single-region databases and the Edge fit together?
+
+Edge computing is a fairly young, yet very promising technology that has the potential to drastically speed up applications in the future. The ecosystem around the Edge is still evolving and best practices for globally distributed applications are yet to be figured out.
+
+At Prisma, we are excited about the developments in the Edge ecosystem and want to help move it forward! However, connecting to a single-region database as shown in this article is probably not the best idea for real-world applications _today_.
+
+To reduce large roundtrips from edge functions to a single-region database, you can use a global cache, which allows you to store your data closer to your edge apps. Prisma Accelerate offers a [global cache](https://www.prisma.io/docs/accelerate/caching), which you can easily opt-in to drastically improve the performance of your edge apps. As a best practice, we still recommend to generally deploy your database as closely as possible to your API server to minimize latency in response times.
+
+While the architecture shown in this article might not cater to real-world use cases yet, we are excited about the possibilities that are opening up in this space and want to make sure Prisma can help solve the problems related to database access on the Edge in the future!
+
+Here's a video from Jeff Delaney, [Fireship](https://fireship.io/), on whether "edge" computing is faster.
+
+
+
+
+## Demo: Database access on the Edge
+
+Let's now take a look how to access a database from Vercel's Edge functions using Prisma Accelerate.
+
+You can find the live demo of the application [here](http://prisma-edge-functions.vercel.app/) and the completed project on [GitHub](https://github.com/prisma/prisma-edge-functions).
+
+The demo application that is used here is a random quote generator built with Next.js and styled with TailwindCSS. The application will take advantage of Next.js' Edge server rendering and Edge API routes to fetch data from a remote PostgreSQL database on every page refresh.
+
+The final state of application you will be working on will resemble this:
+
+
+
+
+
+The application contains a single model called Quote with the following fields:
+
+```prisma
+// schema.prisma
+
+model Quote {
+ id Int @id @default(autoincrement())
+ content String
+ author String
+ createdAt DateTime @default(now())
+ updatedAt DateTime @updatedAt
+}
+```
+
+### Prerequisites
+
+To successfully follow along, you will need:
+- Node.js
+- A cloud-hosted [PostgreSQL](https://postgresql.org/) database ([set up a free PostgreSQL database on Supabase](https://dev.to/prisma/set-up-a-free-postgresql-database-on-supabase-to-use-with-prisma-3pk6) or on [Neon](https://neon.tech/))
+- A [GitHub](https://github.com/) account to host your application code
+- A [Prisma Data Platform](https://console.prisma.io/) account to provision a Prisma Accelerate project
+- A [Vercel](http://vercel.com/) account to deploy the app
+
+### Clone application
+
+Navigate to your directory of choice and run the following command to set up a new Next.js project:
+
+```bash copy
+npx create-next-app --example https://github.com/prisma/prisma-edge-functions/tree/starter prisma-edge-functions
+```
+
+Navigate into the directory:
+
+```bash copy
+cd prisma-edge-functions
+```
+
+The page and API Route are also configured to use Vercel’s [Edge Runtime](https://nextjs.org/docs/api-reference/edge-runtime) with the following configuration in both files:
+
+```ts
+export const config = {
+ runtime: 'experimental-edge',
+}
+```
+
+### Set up the database
+
+You can use a free PostgreSQL database hosted on Supabase or Neon.
+
+Once you’ve set up the database, update the `.env` file at the root of your project with the database’s connection string:
+
+```
+# .env
+
+DATABASE_URL="postgresql://USER:PASSWORD@HOST:PORT/DATABASE"
+```
+
+With the `DATABASE_URL` environment variable set, apply the existing Prisma schema to your database schema using the `prisma migrate dev` command. The `prisma migrate dev` command will apply any pending migration in the `/prisma/migrations` folder against your database.
+
+```bash
+npx prisma migrate dev
+```
+
+Next, populate the database with sample data. The project contains a seed script in the `./prisma/seed.ts` file and sample data in `./prisma/data.json`. The sample data includes 178 quotes.
+
+```bash
+npx prisma db seed
+```
+
+You should see the following output:
+
+```bash
+Environment variables loaded from .env
+Running seed command `ts-node prisma/seed.ts` ...
+[Elevator Music Cue] 🎸
+Done 🎉
+
+🌱 The seed command has been executed.
+```
+
+### Set up Prisma Accelerate
+
+Navigate to [GitHub](https://www.github.com) and create a private repository:
+
+
+
+Next, initialize your repository and push your changes to GitHub:
+
+```bash
+git init
+git remote add origin https://github.com//prisma-edge-functions
+git add .
+git commit -m "initial commit"
+git push -u origin main
+```
+
+> **Note**: Replace the `` placeholder value with your GitHub username before pasting the value on your terminal.
+
+Once you’ve set up your repository, navigate to the [Platform Console](https://console.prisma.io/) and sign up for a free account if you don’t have one yet.
+
+
+After signing up:
+
+1. Create a new project by clicking the **New project** button
+ 
+
+2. Fill out your **Project’s name** and then click the **Create Project** button
+ 
+
+3. Enable Accelerate by clicking the **Enable Accelerate** button
+ 
+
+4. Add your database connection string to the **Database connection string** field and select a region close to your database from the **Region** drop-down
+ 
+
+5. Generate an Accelerate connection string by clicking the **Generate API key** button
+
+6. Copy the generated Accelerate connection string
+
+Accelerate has been successfully setup 🎉!
+
+### Update your application code
+
+Back in your project, rename the existing `DATABASE_URL` to `MIGRATE_DATABASE_URL` and paste the Prisma Accelerate URL into your `.env` file as the new `DATABASE_URL`:
+
+```bash
+DATABASE_URL="prisma://accelerate.prisma-data.net/?api_key=__API_KEY__"
+MIGRATE_DATABASE_URL="postgresql://USER:PASSWORD@HOST:PORT/DATABASE"
+```
+
+> The `MIGRATE_DATABASE_URL` variable will be used to apply any pending migrations during the build process.
+The `package.json` file uses the `vercel-build` hook script to run `prisma migrate deploy && next build`
+
+Then install the [Prisma Accelerate client extension](https://www.npmjs.com/package/@prisma/extension-accelerate):
+
+```bash
+npm i @prisma/extension-accelerate
+```
+
+Next, generate Prisma Client that will connect through Prisma Accelerate using HTTP:
+
+```bash
+npx prisma generate --no-engine
+```
+
+Then, navigate to `lib/prisma` and update Prisma Client’s import from `@prisma/client` to `@prisma/client/edge` to be make it compatible with edge environments:
+
+```ts diff
+// lib/prisma.ts
+-import { PrismaClient } from "@prisma/client";
++import { PrismaClient } from "@prisma/client/edge";
++import { withAccelerate } from "@prisma/extension-accelerate";
+
+import { PrismaClient } from '@prisma/client'
+
+const prismaClientSingleton = () => {
+
+- return new PrismaClient()
++ return new PrismaClient().$extends(withAccelerate())
+}
+
+declare global {
+ var prisma: undefined | ReturnType
+}
+
+const prisma = globalThis.prisma ?? prismaClientSingleton()
+
+export default prisma
+
+if (process.env.NODE_ENV !== 'production') globalThis.prisma = prisma
+```
+
+### Test the application locally
+
+Now that setup is done, you can start up your application locally:
+
+```bash
+npm run dev
+```
+
+Navigate to [`http://localhost:3000`](http://localhost:3000), and this is what it might look like at the moment.
+
+
+
+The quote you will see might be different because the quote is selected randomly. You can hit **Another one 🔄** to refresh the page with a new quote.
+
+You can also navigate to [`http://localhost:3000/api/quote`](http://localhost:3000/api/quote) to get a random quote in JSON format.
+
+## Deploy the application
+
+Commit the existing changes to version control and push them to GitHub.
+
+```
+git add .
+git commit -m "update prisma client"
+git push
+```
+
+Navigate to [Vercel](https://vercel.com/new) and import your GitHub repository.
+
+
+
+Give your project a name and open up the **Environment Variables** toggle and fill out the following environment variables:
+
+- `MIGRATE_DATABASE_URL`: the database’s connection string
+- `DATABASE_URL`: the Prisma Accelerate connection string
+- `PRISMA_GENERATE_NO_ENGINE`: `true`
+
+> The [`PRISMA_GENERATE_NO_ENGINE`](https://www.prisma.io/docs/orm/reference/environment-variables-reference#prisma_generate_no_engine) can be set to a truthy value to generate a Prisma Client without an included [query engine](https://www.prisma.io/docs/orm/more/under-the-hood/engines#the-query-engine-file) in order to reduce deployed application size when paired with Prisma Accelerate.
+
+
+
+Finally, click **Deploy** to kick off the build:
+
+
+
+### Congratulations
+
+Once the build is successful, you should see the following:
+
+
+
+Click the **Visit** button to view the deployed version of the application.
+
+
+
+
+
+Back on the Vercel dashboard in the **Overview** tab, click **View Function Logs**. Next, select the “index” function. You will see that your application’s runtime is **Edge** and the Region is **Global**.
+
+
+
+Refresh the page in your application, and back on Vercel, you will see the request’s status logged.
+
+Congratulations! 🎉
+
+## Conclusion
+
+The Edge enables instant application deployment across the globe, changing how developers think about application development and deployment.
+
+Prisma Accelerate is one tool that enables developers to build and ship web apps requiring database access on the Edge.
+
+The Edge is still in its early stages, with a few drawbacks. However, it's exciting to see how building web apps on the Edge will look.
diff --git a/apps/blog/content/blog/documenting-apis-mjjpz7e7nkvp/index.mdx b/apps/blog/content/blog/documenting-apis-mjjpZ7E7NkVP/index.mdx
similarity index 97%
rename from apps/blog/content/blog/documenting-apis-mjjpz7e7nkvp/index.mdx
rename to apps/blog/content/blog/documenting-apis-mjjpZ7E7NkVP/index.mdx
index b5de669e0d..3eaf6823d0 100644
--- a/apps/blog/content/blog/documenting-apis-mjjpz7e7nkvp/index.mdx
+++ b/apps/blog/content/blog/documenting-apis-mjjpZ7E7NkVP/index.mdx
@@ -1,12 +1,12 @@
---
title: "5 Tools for Documenting Your Web API"
-slug: "documenting-apis-mjjpz7e7nkvp"
+slug: "documenting-apis-mjjpZ7E7NkVP"
date: "2021-05-06"
authors:
- "Alex Ruheni"
metaTitle: "Learn 5 Tools for Documenting Web APIs"
-metaImagePath: "/documenting-apis-mjjpz7e7nkvp/imgs/hero-2982f7850de70f0c52daa613dae904b463342823-1692x852.png"
-heroImagePath: "/documenting-apis-mjjpz7e7nkvp/imgs/hero-2982f7850de70f0c52daa613dae904b463342823-1692x852.png"
+metaImagePath: "/documenting-apis-mjjpZ7E7NkVP/imgs/hero-2982f7850de70f0c52daa613dae904b463342823-1692x852.png"
+heroImagePath: "/documenting-apis-mjjpZ7E7NkVP/imgs/hero-2982f7850de70f0c52daa613dae904b463342823-1692x852.png"
heroImageAlt: "5 Tools for Documenting Your Web API"
tags:
- "education"
@@ -34,7 +34,7 @@ Building an API is half the job. An API lacking documentation would lead to fric
Manual updates to documentation are a common problem that exists because they are prone to error. Failing to keep documentation up-to-date creates a point of failure for others who depend on it.
` tag i
```
If your webpage looks like this, congrats! You've successfully set up TailwindCSS!
-
+
> **Note**: If not, try restarting your development server and ensure the steps above were followed correctly.
@@ -362,7 +362,7 @@ export default App
```
If you head back to your browser you should see a nice box displaying your user's name! The only thing missing at this point is the user's messages.
-
+
## Display each user's messages
@@ -433,7 +433,7 @@ function UserDisplay({ user }: Props) {
```
Over in your browser, you should now see each user's messages to their right!
-
+
That looks great, however there is one last thing to add. You are building a tree view, so the final piece is to render "branches" that connect each message to its user.
@@ -497,7 +497,7 @@ export default MessageDisplay
```
Back over in your browser, you will now see branches for each message! Hover over a message to highlight the branch ✨
-
+
## Summary & What's next
diff --git a/apps/blog/content/blog/e2e-type-safety-graphql-react-2-j9meyhy0ej/index.mdx b/apps/blog/content/blog/e2e-type-safety-graphql-react-2-j9mEyHY0Ej/index.mdx
similarity index 95%
rename from apps/blog/content/blog/e2e-type-safety-graphql-react-2-j9meyhy0ej/index.mdx
rename to apps/blog/content/blog/e2e-type-safety-graphql-react-2-j9mEyHY0Ej/index.mdx
index a317d9cd40..54ba552972 100644
--- a/apps/blog/content/blog/e2e-type-safety-graphql-react-2-j9meyhy0ej/index.mdx
+++ b/apps/blog/content/blog/e2e-type-safety-graphql-react-2-j9mEyHY0Ej/index.mdx
@@ -1,13 +1,13 @@
---
title: "End-To-End Type-Safety with GraphQL, Prisma & React: API Prep"
-slug: "e2e-type-safety-graphql-react-2-j9meyhy0ej"
+slug: "e2e-type-safety-graphql-react-2-j9mEyHY0Ej"
date: "2022-08-30"
authors:
- "Sabin Adams"
metaTitle: "End-To-End Type-Safety with GraphQL, Prisma & React: API Prep"
metaDescription: "Learn how to build a fully type-safe application with GraphQL, Prisma, and React. This article walks you through setting up a TypeScript project, a PostgreSQL database, and Prisma."
-metaImagePath: "/e2e-type-safety-graphql-react-2-j9meyhy0ej/imgs/meta-06962f83ac8be93c511d0ef6cbc29e2cff49e387-1269x715.png"
-heroImagePath: "/e2e-type-safety-graphql-react-2-j9meyhy0ej/imgs/hero-838c88ca3817165045cc051d8845880e5a313baf-844x474.svg"
+metaImagePath: "/e2e-type-safety-graphql-react-2-j9mEyHY0Ej/imgs/meta-06962f83ac8be93c511d0ef6cbc29e2cff49e387-1269x715.png"
+heroImagePath: "/e2e-type-safety-graphql-react-2-j9mEyHY0Ej/imgs/hero-838c88ca3817165045cc051d8845880e5a313baf-844x474.svg"
heroImageAlt: "hero image prisma"
series:
title: "Build a Fully Type-Safe Application with GraphQL, Prisma & React"
@@ -159,7 +159,7 @@ You can now use the following command to run your code:
```shell
npm run dev
```
-
+
## Set up the database
@@ -170,21 +170,21 @@ Head over to [https://railway.app](https://railway.app) and, if you don't alread
After creating an account and logging in, you should see a page like this:
-
+
Hit the **New Project** button, or simply click the **Create a New Project** area.
You will be presented with a search box and a few common options. Select the **Provision PostgreSQL** option.
-
+
The option selected above creates a new PostgreSQL database and deploys it. Once the server is ready, you should see your provisioned database on the screen. Click the **PostgreSQL** instance.
-
+
That will open up a menu with a few different tabs. On the **Connect** tab, you will find your database's connection string. Take note of where to find this string as you will need them in just a little while.
-
+
## Set up Prisma
@@ -310,7 +310,7 @@ The above command will create a new migration file named `init`, apply that migr
If you head back over to the Railway UI, in the **Data** tab you should see your tables listed. If so, the migration worked and your database is ready to be put to work!
-
+
### Seed the database 🌱
@@ -407,7 +407,7 @@ npx prisma db seed
```
After running the script, if you head back to the Railway UI and into the **Data** tab, you should be able to navigate through the newly added data.
-
+
## Summary & What's next
diff --git a/apps/blog/content/blog/e2e-type-safety-graphql-react-3-fbv2zvigwg/index.mdx b/apps/blog/content/blog/e2e-type-safety-graphql-react-3-fbV2ZVIGWg/index.mdx
similarity index 97%
rename from apps/blog/content/blog/e2e-type-safety-graphql-react-3-fbv2zvigwg/index.mdx
rename to apps/blog/content/blog/e2e-type-safety-graphql-react-3-fbV2ZVIGWg/index.mdx
index d126a9c580..b85f2d7b9e 100644
--- a/apps/blog/content/blog/e2e-type-safety-graphql-react-3-fbv2zvigwg/index.mdx
+++ b/apps/blog/content/blog/e2e-type-safety-graphql-react-3-fbV2ZVIGWg/index.mdx
@@ -1,13 +1,13 @@
---
title: "End-To-End Type-Safety with GraphQL, Prisma & React: GraphQL API"
-slug: "e2e-type-safety-graphql-react-3-fbv2zvigwg"
+slug: "e2e-type-safety-graphql-react-3-fbV2ZVIGWg"
date: "2022-08-29"
authors:
- "Sabin Adams"
metaTitle: "End-To-End Type-Safety with GraphQL, Prisma & React: GraphQL API"
metaDescription: "Learn how to build a fully type-safe application with GraphQL, Prisma, and React. This article walks you through building a type-safe GraphQL API"
-metaImagePath: "/e2e-type-safety-graphql-react-3-fbv2zvigwg/imgs/meta-c8b654f7165277e7cf2cfde5311381d601463251-1269x715.png"
-heroImagePath: "/e2e-type-safety-graphql-react-3-fbv2zvigwg/imgs/hero-78bb7b87f2bf7e691114b2768df5ddfe12e00934-844x474.svg"
+metaImagePath: "/e2e-type-safety-graphql-react-3-fbV2ZVIGWg/imgs/meta-c8b654f7165277e7cf2cfde5311381d601463251-1269x715.png"
+heroImagePath: "/e2e-type-safety-graphql-react-3-fbV2ZVIGWg/imgs/hero-78bb7b87f2bf7e691114b2768df5ddfe12e00934-844x474.svg"
heroImageAlt: "hero image prisma"
series:
title: "Build a Fully Type-Safe Application with GraphQL, Prisma & React"
@@ -120,7 +120,7 @@ If you start up your server, you will have access to a running _(empty)_ GraphQL
```shell
npm run dev
```
-
+
> **Note**: The GraphQL server is up and running, however it is not usable because you have not yet defined any queries or mutations.
@@ -265,7 +265,7 @@ npm run build
```
When you run the command above, you should see that Prisma Client and the Pothos integration were both generated.
-
+
Now that those types are generated, head over to `src/builder.ts`. Here you will import the `PrismaPlugin` and the generated Pothos types and apply them to your builder:
@@ -288,7 +288,7 @@ builder.addScalarType("Date", DateResolver, {});
```
As soon as you add the generated types, you will notice a TypeScript error occur within the instantiation of the `SchemaBuilder`.
-
+
Pothos is smart enough to know that, because you are using the Prisma plugin, you need to provide a `prisma` instance to the builder. This is used by Pothos to infer information about the types in your Prisma Client. In the next step you will create and add that instance to the builder.
@@ -312,7 +312,7 @@ export const builder = new SchemaBuilder<{
```
You will, again, see a TypeScript error at this point. This is because the `builder` now expects an instance of Prisma Client to be provided to the function.
-
+
In the next step, you will instantiate Prisma Client and provide it here in the `builder`.
@@ -401,7 +401,7 @@ import { builder } from "../builder";
+builder.prismaObject("User", {})
```
> **Note**: If you press Ctrl + Space within an empty set of quotes before typing in the `name` field, you should get some nice auto-completion with a list of available models from your Prisma schema thanks to the Prisma plugin.
-> 
+> 
Within the `options` object, add a `fields` key that defines the `id`, `name` and `messages` fields using Pothos's ["expose"](https://pothos-graphql.dev/docs/guide/fields#exposing-fields-from-the-underlying-data) functions:
@@ -846,17 +846,17 @@ npm run dev
```
After running the above command, open up [http://localhost:4000/graphql](http://localhost:4000/graphql) in your browser to access the GraphQL playground. You should be presented with a page that looks like this:
-
+
In the top-left corner of the screen, hit the **Explorer** button to see your API's available queries and mutations:
-
+
If you click on the **users** query type, the right side of the screen will be automatically populated with a query for your user data.
Run that query by hitting the "execute query" button to see the API in action:
-
+
Feel free to play around with the different options to choose which fields you would like to query for and which data from the "messages" relation you would like to include.
diff --git a/apps/blog/content/blog/e2e-type-safety-graphql-react-4-jaha8gbker/index.mdx b/apps/blog/content/blog/e2e-type-safety-graphql-react-4-JaHA8GbkER/index.mdx
similarity index 93%
rename from apps/blog/content/blog/e2e-type-safety-graphql-react-4-jaha8gbker/index.mdx
rename to apps/blog/content/blog/e2e-type-safety-graphql-react-4-JaHA8GbkER/index.mdx
index 30d741930b..54c87cff14 100644
--- a/apps/blog/content/blog/e2e-type-safety-graphql-react-4-jaha8gbker/index.mdx
+++ b/apps/blog/content/blog/e2e-type-safety-graphql-react-4-JaHA8GbkER/index.mdx
@@ -1,13 +1,13 @@
---
title: "End-To-End Type-Safety with GraphQL, Prisma & React: Codegen & Deployment"
-slug: "e2e-type-safety-graphql-react-4-jaha8gbker"
+slug: "e2e-type-safety-graphql-react-4-JaHA8GbkER"
date: "2022-09-01"
authors:
- "Sabin Adams"
metaTitle: "End-To-End Type-Safety with GraphQL, Prisma & React: Codegen & Deployment"
metaDescription: "Learn how to build a fully type-safe application with GraphQL, Prisma, and React. This article walks you through setting up code generation to allow you to keep your TypeScript types in sync across your frontend and API. You will also deploy your completed project."
-metaImagePath: "/e2e-type-safety-graphql-react-4-jaha8gbker/imgs/meta-42c1cab53d152b8e3e634d75bc70b9d624431cf7-1269x715.png"
-heroImagePath: "/e2e-type-safety-graphql-react-4-jaha8gbker/imgs/hero-b277fdcfbb2267b2f5a9b5d2bd7f06e053febf0f-844x474.svg"
+metaImagePath: "/e2e-type-safety-graphql-react-4-JaHA8GbkER/imgs/meta-42c1cab53d152b8e3e634d75bc70b9d624431cf7-1269x715.png"
+heroImagePath: "/e2e-type-safety-graphql-react-4-JaHA8GbkER/imgs/hero-b277fdcfbb2267b2f5a9b5d2bd7f06e053febf0f-844x474.svg"
heroImageAlt: "hero image prisma"
series:
title: "Build a Fully Type-Safe Application with GraphQL, Prisma & React"
@@ -85,17 +85,17 @@ To follow along with the examples provided, you will be expected to have:
Currently, Prisma generates a set of TypeScript types based off of your database schema. Pothos uses those types to help build GraphQL type definitions. The result of those two pieces is a GraphQL schema:
-
+
Your frontend project currently has a set of manually defined types, which were built in the first section of this series. These are "compatible with" the types in your API, but not directly related:
-
+
Until now, this worked fine. But what happens if a new field is introduced, updated, or removed form the API? Your frontend application would have no idea a change occurred in the API and the type definitions in the two projects would become out of sync.
How can you be sure a `user` object you retrieve over the network, for example, will contain all of the fields your React application is expecting? This is where [GraphQL Codegen](https://www.graphql-code-generator.com/) comes in:
-
+
GraphQL Codegen will generate TypeScript types and query helpers in your React project based off of your GraphQL schema and the queries you write in your frontend application.
@@ -217,7 +217,7 @@ npm run codegen
```
You should see output similar to this:
-
+
As configured in your `codegen.yml` file, you will find a new file in `src/graphql` named `generated.ts`.
@@ -339,7 +339,7 @@ export type User = GetUsersQuery["users"][0];
```
If you head over to `src/components/UserDisplay.tsx` and inspect the type being used for the `user` prop, you will now see it uses the type generated from your GraphQL query and API:
-
+
You now have almost every piece of the end-to-end type-safety puzzle put in place. Your types are in sync from your database all the way to your frontend application.
@@ -467,7 +467,7 @@ export default App
```
Notice your API request results are properly typed based off of the types within the API itself! If both your API and Client are running, head over to the browser. You should now see all of your data!
-
+
Congrats! 🎉 At this point, you have implemented a completely end-to-end type safe application with two separate pieces: an API and the client.
@@ -481,15 +481,15 @@ You will be using [Render](https://render.com/) to deploy both of your codebases
In the top left corner of the home page, hit the **New** button to create a new repository:
-
+
Give your repository a name and then hit **Create repository**:
-
+
You will need to retrieve the SSH url for this repository to use later on. Grab that from the location shown below:
-
+
Now within your React application, run the follwing command to initialize and push a local repository, replacing `` with the SSH url:
@@ -516,15 +516,15 @@ git push -u origin main
Next, you will repeat these steps for your API's codebase.
Create another new repository from your Github dashboard:
-
+
Title the repository and hit **Create repository**:
-
+
You should again see a page with some setup instructions. Grab the SSH url from the same location as before:
-
+
Finally, navigate via the terminal into your GraphQL API's codebase and run the following set of commands. Again, replace `` with your SSH url:
@@ -556,11 +556,11 @@ Head over to [Render](https://render.com) and create a free account if you do no
The first thing you will deploy is your GraphQL API. On your dashboard, hit the **New Web Service** button, which will allow you to deploy a Node.js application:
-
+
On this page, if you haven't already, click **+ Connect account** under the **Github** header to give Render access to list your Github repositories:
-
+
After connecting your account, you should see your repositories available under the **Connect a repository** header. Choose your GraphQL API repository.
@@ -575,24 +575,24 @@ You will be prompted for a few different options:
Beneath those options, choose the **Free** plan:
-
+
Expand the **Advanced** section near the bottom of the page. Here you will define an environment variable that will hold your database URL.
Click the **Add Environment Variable** button and add a variable named `DATABASE_URL` whose value is the connection string to your Postgres database:
-
+
Finally, at the bottom of the page, hit the **Create Web Service** button:
-
+
This will trigger the deployment process! Once that finishes deploying, you will be able to access the URL Render provides to see your GraphQL API.
Copy the URL from the location shown below and navigate to it in a new browser window at the `/graphql` route:
-
+
## Deploy the React application
@@ -600,7 +600,7 @@ Now that your API is deployed, you will deploy your React application.
Head back over to the Render dashboard and hit the **New** button at the top of the page. Choose the **Static Site** option:
-
+
Connect this static site to your React application's Github repostory.
@@ -613,13 +613,13 @@ You will be prompted again to fill out some details for deploying this applicati
Under the **Advanced** section, add an environment variable named `VITE_API_URL` whose value is the URL of your deployed GraphQL API at the `/graphql` route. For example:
-
+
Finally, hit the **Create Static Site** button at the bottom of the page to deploy the application.
When that finishes deploying, head over to the URL available at the top of the page. If all went well, you should see your application is live!
-
+
## Summary & Final thoughts
diff --git a/apps/blog/content/blog/elsevier-customer-story-ssaaskagmhtn/index.mdx b/apps/blog/content/blog/elsevier-customer-story-SsAASKagMHtN/index.mdx
similarity index 95%
rename from apps/blog/content/blog/elsevier-customer-story-ssaaskagmhtn/index.mdx
rename to apps/blog/content/blog/elsevier-customer-story-SsAASKagMHtN/index.mdx
index b7d6e3ad37..7adf6122c5 100644
--- a/apps/blog/content/blog/elsevier-customer-story-ssaaskagmhtn/index.mdx
+++ b/apps/blog/content/blog/elsevier-customer-story-SsAASKagMHtN/index.mdx
@@ -1,13 +1,13 @@
---
title: "How Elsevier Piloted an Innovative Publication Process Quickly and Flexibly with Prisma"
-slug: "elsevier-customer-story-ssaaskagmhtn"
+slug: "elsevier-customer-story-SsAASKagMHtN"
date: "2021-11-15"
authors:
- "Alex Emerich"
metaTitle: "How Elsevier piloted an innovative publication process with Prisma"
metaDescription: "Elsevier is a global leader in information and analytics in scientific publishing. Learn how they modernized the publication process efficiently and flexibly with Prisma."
-metaImagePath: "/elsevier-customer-story-ssaaskagmhtn/imgs/hero-4eaa561121a703742d0016b7a60b69e0cc262dc8-1692x852.png"
-heroImagePath: "/elsevier-customer-story-ssaaskagmhtn/imgs/hero-4eaa561121a703742d0016b7a60b69e0cc262dc8-1692x852.png"
+metaImagePath: "/elsevier-customer-story-SsAASKagMHtN/imgs/hero-4eaa561121a703742d0016b7a60b69e0cc262dc8-1692x852.png"
+heroImagePath: "/elsevier-customer-story-SsAASKagMHtN/imgs/hero-4eaa561121a703742d0016b7a60b69e0cc262dc8-1692x852.png"
heroImageAlt: "Elsevier"
tags:
- "user-success-story"
@@ -21,7 +21,7 @@ With the help of Prisma, Elsevier is in the process of modernizing the scientifi
[Elsevier's](https://www.elsevier.com/) mission of helping researchers and healthcare professionals is rooted in publishing and has also evolved into a global leader in information and analytics. With so much health-related information being shared in real time, Elsevier decided it was time to modernize and speed up their existing manual peer review process.
-
+
Building an application to speed up the peer review process would help Elsevier remain a leader in healthcare research. They dedicated a small project team consisting of Serghei Ghidora (Tech Lead), Paul Foeckler (Product Owner), and a UX Designer to develop a minimum viable product (MVP) to make the peer review process faster and more efficient.
@@ -115,7 +115,7 @@ The flexibility proved to be a major contributor to a single tech lead producing
In addition to Prisma, Serghei utilized several other technologies to achieve their MVP. The project structure looks like the following, with Prisma serving types to multiple apps.
-
+
The **Prisma & Nexus** package includes the Prisma schema, migrations and all the generated types that are used across all apps and services. The lambdas import the Prisma client and update resources directly. This arrangement keeps the database and frontend types in sync because of Prisma Client's type-safe database access.
diff --git a/apps/blog/content/blog/full-stack-typesafety-with-angular-nest-nx-and-prisma-ccmk7fbqftwc/index.mdx b/apps/blog/content/blog/full-stack-typesafety-with-angular-nest-nx-and-prisma-CcMK7fbQfTWc/index.mdx
similarity index 96%
rename from apps/blog/content/blog/full-stack-typesafety-with-angular-nest-nx-and-prisma-ccmk7fbqftwc/index.mdx
rename to apps/blog/content/blog/full-stack-typesafety-with-angular-nest-nx-and-prisma-CcMK7fbQfTWc/index.mdx
index 156e7e3c74..1789674e56 100644
--- a/apps/blog/content/blog/full-stack-typesafety-with-angular-nest-nx-and-prisma-ccmk7fbqftwc/index.mdx
+++ b/apps/blog/content/blog/full-stack-typesafety-with-angular-nest-nx-and-prisma-CcMK7fbQfTWc/index.mdx
@@ -1,12 +1,12 @@
---
title: "Full Stack Type Safety with Angular, Nest, Nx, and Prisma"
-slug: "full-stack-typesafety-with-angular-nest-nx-and-prisma-ccmk7fbqftwc"
+slug: "full-stack-typesafety-with-angular-nest-nx-and-prisma-CcMK7fbQfTWc"
date: "2021-01-19"
authors:
- "Ryan Chenkie"
metaTitle: "Applying Full Stack Type Safety with Angular, Nest, Nx & Prisma"
-metaImagePath: "/full-stack-typesafety-with-angular-nest-nx-and-prisma-ccmk7fbqftwc/imgs/meta-6edf92a2f15ffb62ed50e0da3deed2b2908d0156-2398x1208.png"
-heroImagePath: "/full-stack-typesafety-with-angular-nest-nx-and-prisma-ccmk7fbqftwc/imgs/hero-2e21e72be724fc37acc24f269c8b6a0628ad5a18-870x438.jpg"
+metaImagePath: "/full-stack-typesafety-with-angular-nest-nx-and-prisma-CcMK7fbQfTWc/imgs/meta-6edf92a2f15ffb62ed50e0da3deed2b2908d0156-2398x1208.png"
+heroImagePath: "/full-stack-typesafety-with-angular-nest-nx-and-prisma-CcMK7fbQfTWc/imgs/hero-2e21e72be724fc37acc24f269c8b6a0628ad5a18-870x438.jpg"
heroImageAlt: "Full Stack Type Safety with Angular, Nest, Nx, and Prisma"
tags:
- "education"
@@ -28,7 +28,7 @@ In this article, we'll look at how we can use the types generated by Prisma to a
Check out the [code for the project on GitHub](https://github.com/chenkie/shirt-shop).
-
+
## Create an Nx Workspace
@@ -47,7 +47,7 @@ npx create-nx-workspace --preset=angular
An interactive prompt takes us through the setup process. Select a name for the workspace and application and then continue through the prompts.
-
+
Once Nx finishes wiring up the workspace, open it up and try running the Angular application.
@@ -60,7 +60,7 @@ npm start
This command will tell Nx to serve the Angular application that was created as the workspace initialized. After it compiles, open up `localhost:4200` to make sure everything is working.
-
+
## Add a NestJS Application
@@ -190,17 +190,17 @@ npx prisma studio
Running this command will open Prisma Studio. In the browser, it opens at `localhost:5555`.
-
+
We can use Prisma Studio to add data to the database manually. This isn't a great approach if we have a lot of data to seed, but it's useful if we want to add a few records to test with.
Add as many rows as you like and input data for them. If you would like to work with the data seen in this article, you can grab it in [this gist](https://gist.github.com/chenkie/9bd80bc2767e72f71582a02e05c7f853).
-
+
Next, save the changes. IDs for each row will automatically be generated.
-
+
We now have all the pieces of our stack in place! We're ready to start writing some code to surface the data from the API and call for it from the Angular app.
@@ -300,11 +300,11 @@ export class AppModule {}
Now head over to the browser and test it out by going to `http://localhost:3333/api/products`.
-
+
It may not be very apparent at this point, but our endpoint has a layer of type safety applied to it that can help us out if we need to manipulate and/or modify data before it is returned to the client. For example, if we need to map over our data and get access to its properties, we now have full autocompletion enabled when we do so. This occurs because we told the `getProducts` method in the `ProductsService` that the return type is a `Promise` that resolves with an array of type `Product`.
-
+
Now that we have the API working, let's wire up the Angular application to make a call for this data and display it!
@@ -563,7 +563,7 @@ export class ProductsComponent implements OnInit {
This is another spot where we're using our `Product` type from `@prisma/client` to give ourselves type safety. Applying this type directly to the `$products` observable means that we can get autocompletion in our Angular templates.
-
+
With our component in place, we're now ready to call it from the `shirt-shop` app and display the results!
@@ -577,7 +577,7 @@ Open up `apps/shirt-shop/src/app/app.component.html` and include the `Products`
```
-
+
## Going Beyond Displaying Data
diff --git a/apps/blog/content/blog/fullstack-remix-prisma-mongodb-2-ztmoy58p4re8/index.mdx b/apps/blog/content/blog/fullstack-remix-prisma-mongodb-2-ZTmOy58p4re8/index.mdx
similarity index 98%
rename from apps/blog/content/blog/fullstack-remix-prisma-mongodb-2-ztmoy58p4re8/index.mdx
rename to apps/blog/content/blog/fullstack-remix-prisma-mongodb-2-ZTmOy58p4re8/index.mdx
index bbb8c92222..dfa1d1ad6b 100644
--- a/apps/blog/content/blog/fullstack-remix-prisma-mongodb-2-ztmoy58p4re8/index.mdx
+++ b/apps/blog/content/blog/fullstack-remix-prisma-mongodb-2-ZTmOy58p4re8/index.mdx
@@ -1,13 +1,13 @@
---
title: "Build A Fullstack App with Remix, Prisma & MongoDB: Authentication"
-slug: "fullstack-remix-prisma-mongodb-2-ztmoy58p4re8"
+slug: "fullstack-remix-prisma-mongodb-2-ZTmOy58p4re8"
date: "2022-04-26"
authors:
- "Sabin Adams"
metaTitle: "Build A Fullstack App with Remix, Prisma & MongoDB - Authentication"
metaDescription: "Learn how to build and deploy a fullstack application using Remix, Prisma, and MongoDB. In this article, we will be setting up authentication for our Remix application using session-based authentication."
-metaImagePath: "/fullstack-remix-prisma-mongodb-2-ztmoy58p4re8/imgs/meta-4b70ee51aee99eaddac2a48baa614189c5fa74c2-1920x1080.png"
-heroImagePath: "/fullstack-remix-prisma-mongodb-2-ztmoy58p4re8/imgs/hero-29016ded5a59403f81349c8247116f8f084a0ae2-844x474.svg"
+metaImagePath: "/fullstack-remix-prisma-mongodb-2-ZTmOy58p4re8/imgs/meta-4b70ee51aee99eaddac2a48baa614189c5fa74c2-1920x1080.png"
+heroImagePath: "/fullstack-remix-prisma-mongodb-2-ZTmOy58p4re8/imgs/hero-29016ded5a59403f81349c8247116f8f084a0ae2-844x474.svg"
heroImageAlt: "Build A Fullstack App with Remix, Prisma & MongoDB: Authentication"
series:
title: "Build A Fullstack App with Remix, Prisma & MongoDB"
@@ -86,7 +86,7 @@ The default export of a route file is the component Remix renders into the brows
Start the development server using `npm run dev` and navigate to [`http://localhost:3000/login`](http://localhost:3000/login), and you should see the route rendered.
-
+
This works, but doesn't look very nice yet... Next you will spruce it up a bit by adding an actual sign in form.
@@ -193,7 +193,7 @@ export default function Login() {
)
}
```
-
+
At this point, you don't need to worry about where the `