Skip to main content

Connect Angular to Drizzle ORM and Planetscale Database

·200 words·1 min
Programing Web development Angular Frontend Development Drizzle ORM
Anurag Konduru
Author
Anurag Konduru
Software Engineer (Front-End Developer/Linuxuser/Software Explorer)
  • Install Drizzle and planetscale: First, you need to install Drizzle in your project. You can do this by running the following command in your terminal:

    npm install drizzle-orm @planetscale/database
    
  • Install Drizzlle kit for local development

    npm install -D drizzle-kit
    
  • In planet scale select connect and select connect with as drizzle and copy the Database details and paste it in a file .env in your project root folder.

    Alt text

  • in the same page change the connect with to Node.js copy the Database URL and paste it into the .env file. And Replace *** with your actual password.

  • In your project root folder create a file with the name drizzle.config.ts.

  • The s drizzle.config.ts should look like this with the details for the connection and

    import type { Config } from 'drizzle-kit';
    
    export default {
    schema: './src/db/schema.ts',
    out: './drizzle/generated',
    driver: 'mysql2',
    dbCredentials: {
    uri: process.env['DATABASE_URL'] as string,
    },
    } satisfies Config;
    
  • install mysql2 npm package with npm i mysql2.

  • Now in the package.json file create a script as

    "scripts": {
    //inside the scripts section
    "introspect": "drizzle-kit introspect:mysql"
    
    },
    
  • Then Run the following command inside the project

    npm run introspect
    
  • The output should look something like this And Drizzle Is connected to your Angular project.

    Alt text

Related

Angular Databinding: Connecting TypeScript and HTML
·285 words·2 mins
Programing Web development Angular Frontend Development
Data Binding # When it comes to data binding in Angular, the synergy between TypeScript and HTML is facilitated through various techniques:
Angular Component: Building Blocks for Reusability and Modularity
·474 words·3 mins
Programing Web development Angular Frontend Development
Components: # Components in Angular play a pivotal role in enhancing reusability and Modularity in web pages.
Angular Structure :Angular Project Structure Unveiled
·366 words·2 mins
Programing Web development Angular Frontend Development
A brief on Angular project and folder structure