Code Monkey home page Code Monkey logo

edgedb's Introduction

Full-stack EdgeDB + Next.js application

A simple blog application built with Next.js, TypeScript, React, and EdgeDB on the backend.

Deploy your own

Deploy the example using Vercel:

Deploy with Vercel

How to use

Download the example project

Execute create-next-app with npm or Yarn to bootstrap the example:

npx create-next-app --example with-edgedb with-edgedb-app
# or
yarn create next-app --example with-edgedb with-edgedb-app
# or
pnpm create next-app -- --example with-edgedb with-edgedb-app

Then cd into the created directory.

$ cd with-edgedb-app

Install dependencies

Install npm dependencies:

$  npm install
# or
$  yarn

Install the CLI

First install the EdgeDB CLI if you haven't already.

# macOS/Linux
$ curl --proto '=https' --tlsv1.2 -sSf https://sh.edgedb.com | sh

# Windows (Powershell)
$ iwr https://ps1.edgedb.com -useb | iex

Initialize the EdgeDB project

Initialize the project with the following CLI command:

$ edgedb project init

After you follow the prompts, this command will spin up a local EdgeDB instance and apply all the migrations inside dbschema/migrations. Now that the project is initialized, all EdgeDB clients initialized inside the project directory will connect to this instance automatically—no need for environment variables or hard-coded configuration. (Read more about projects here.)

Generate the query builder

This project uses the EdgeQL query builder for TypeScript. This tool can express any EdgeQL query in a code-first way and infers a static return type. Generate it with the following command:

$ npx edgeql-js

The query builder consists of several files that are generated into the dbschema/edgeql-js directory. Import it like so:

import e from './dbschema/edgeql-js'

Seed the database

$ npx ts-node seed.ts

Start the app

$ yarn dev

The application should now be running on http://localhost:3000.

Notes

API structure

  • POST /api/post: Create a new post
    • Body: {title: string; content: string; authorName: string}
  • PATCH /api/post/:id: Update a post by id
    • Body: {title?: string; content?: string;}
  • PUT /api/publish/:id: Publish a post by id
  • DELETE /api/post/:id: Delete a post by id

Evolving the app

Evolving the application typically requires three steps:

  1. Update the schema in dbschema/default.esdl
  2. Generate a new migration with edgedb migration create
  3. Apply the migration with edgedb migrate
  4. Regenerate the query builder with npx edgeql-js

Deployment

To deploy this application, follow the EdgeDB deployment guides for your preferred cloud provider:

After setting up your cloud-hosted EdgeDB instance:

  1. Find your instance's DSN (AKA connection string). The exact instructions for this depend on which cloud you are deploying to.
  2. Deploy this app to Vercel with the button below. You'll be prompted to provide a value for EDGEDB_DSN.
  3. Open the application.

Deploy with Vercel

Next steps

edgedb's People

Contributors

steven-tey avatar

Watchers

Sammy filly  avatar

Forkers

renovate-bot

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.