Create account

DEV Community

Pavan Chilukuri

Posted on Mar 6, 2022

Dev Blog with Azure Functions

#azuretrialhack

Overview of My Submission

I created a Developer's blog, in-short Dev Blog using Azure functions where GraphQL APIs are hosted and deployed. Used Azure Static Web App service for deploying the front-end part of the application. With this app, users can create, view, and delete the posts.

My submission will have two repositories namely dev-blog-azure-ui for front-end code and dev-blog-azure-functions for back-end code.

Play with the app here 🚀
UI - https://brave-hill-0c5adaa10.1.azurestaticapps.net
GraphQL playground - https://posts-graphql.azurewebsites.net/api/posts

Submission Category:

Computing Captains

Link to Code on GitHub

Front-end

chilupa / dev-blog-azure-ui

Dev Blog UI with GraphQL APIs. Uses Azure functions.

Dev Blog

This application is built using React and GraphQL. It uses azure-functions in the backend where the GraphQL APIs are hosted.

Development 💻

To run the app locally

npm run start

Depolyment 🚀

This application is hosted using Azure's Static Web App.

Watch it live here - https://brave-hill-0c5adaa10.1.azurestaticapps.net

View on GitHub

Back-end

chilupa / dev-blog-azure-functions

GraphQL server

Posts Server using Azure functions

This application uses Azure functions to implement GraphQL APIs.

GraphQL playground

https://posts-graphql.azurewebsites.net/api/posts

This application is deployed using azure-functions VS code extension.

Queries

Some of the useful GraphQL queries that have been consumed by the dev-blog UI.

Get all the posts

query GetPosts {
  getPosts {
    id
    title
    description
    author
    createdAt
  }
}

Get a single post

query GetSinglePost{
  getPost(id:"2aa0b36f-c0d6-431e-87cf-e110684d0341"){
     id
    title
    description
    author
    createdAt
  }
}

Create a post

mutation CreatePost {
  createPost(
    input: {
      title: "React"
      description: "JS Library"
      createdAt: "Feb 17, 2022"
      author: "John Snow"
    }
  ) {
    id
    title
    description
    createdAt
    author
  }
}

Delete a post

mutation DeletePost {
  deletePost(id:"6f009c53-749e-45a5-a15e-73e0dbf84e35"){
    title
  }
}