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

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up