DEV Community

Cover image for Dev Blog with Azure Functions
Pavan C
Pavan C

Posted on

3 1

Dev Blog with Azure Functions

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

GitHub logo 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
Enter fullscreen mode Exit fullscreen mode

Depolyment πŸš€

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

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






Back-end

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
  }
}
Enter fullscreen mode Exit fullscreen mode

Get a single post

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

Create a post

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

Delete a post

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

Additional Resources / Info

Screenshots

Home page
Home page
Dashboard view
dashboard
Create post
Image description
View and delete post
View and delete post

Image of Datadog

How to Diagram Your Cloud Architecture

Cloud architecture diagrams provide critical visibility into the resources in your environment and how they’re connected. In our latest eBook, AWS Solution Architects Jason Mimick and James Wenzel walk through best practices on how to build effective and professional diagrams.

Download the Free eBook

Top comments (0)

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free β†’

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay