Build a GraphQL API and deploy it in minutes with Encore πŸš€

marcuskohlberg

Marcus Kohlberg

Posted on October 15, 2023

Build a GraphQL API and deploy it in minutes with Encore πŸš€

TL;DR

This guide shows how to build a GraphQL API with Encore. It implements a backend for a url shortener as an example, and shows how you deploy it to Encore's free development cloud.

πŸš€ What's on deck:

  • Installing Encore.
  • Starting a development environment with Encore.
  • Run locally and try Encore’s developer dashboard.
  • Test the API using the GraphQL Playground.
  • Deploying to Encore's development cloud.

Install Encore

Install the Encore CLI to run your local environment:

  • macOS: brew install encoredev/tap/encore
  • Linux: curl -L https://encore.dev/install.sh | bash
  • Windows: iwr https://encore.dev/install.ps1 | iex

Create your app

Create a new Encore application and clone this example with this command:

encore app create my-app-name --example=graphql
Enter fullscreen mode Exit fullscreen mode

Running locally

Before running your application, make sure you have Docker installed and running. It's required to locally run Encore applications with databases.

Run your Encore backend:

encore run
Enter fullscreen mode Exit fullscreen mode

You should see this:

Encore Run

πŸ‘‰ Open http://localhost:9400/ to view Encore's local developer dashboard.

Local Dev Dashboard

🌟 Using the API

Let's run some queries using the GraphQL Playground!

πŸ‘‰ Open http://localhost:4000/graphql/playground in your browser.

GraphQL playground

Shorten a URL

mutation {
  shorten(url: "https://encore.dev") {
    id
    url
  }
}
Enter fullscreen mode Exit fullscreen mode

Listing all shortened URLs

query {
  urls {
    id
    url
  }
}
Enter fullscreen mode Exit fullscreen mode

Getting a URL from a shortened ID

query {
  get(id: "some-id") {  # Use an actual ID you have
    id
    url
  }
}
Enter fullscreen mode Exit fullscreen mode

πŸš€ Deploy

Deploy your backend to a staging environment in Encore's free development cloud:

git add -A .
git commit -m 'Initial commit'
git push encore
Enter fullscreen mode Exit fullscreen mode

πŸ‘‰ Then head over to the Cloud Dashboard to monitor your deployment and find your production URL.

From there you can also see metrics, traces, connect your app to a GitHub repo to get automatic deploys on new commits, and connect your own AWS or GCP account to use for deployment.

Encore Cloud Dashboard

πŸŽ‰ Great job - you're done!

You now have a scalable and production-ready web app foundation running in the cloud.

Keep building with these Open Source App Templates. πŸ‘ˆ

If you have questions or want to share your work, join the developers hangout in Encore's community Slack. πŸ‘ˆ

πŸ’– πŸ’ͺ πŸ™… 🚩
marcuskohlberg
Marcus Kohlberg

Posted on October 15, 2023

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related