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 Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more