Web Form to Notion Using Azure App Service

/ Technical / By

I started this as a fun way to organize my Minecraft world, but it turned into a full-stack learning experience using Azure, Notion, and GitHub Actions.
AZ-104 concepts like App Services, VNet integration, infrastructure as code, and deployment automation were on my mind. You can use Notion to build web apps and deploy them to Azure in this post. You can also watch my YouTube video where I show you how it’s done.

I created a simple web form that lets me submit Minecraft area updates directly into a Notion database. The frontend is a basic HTML form styled with CSS, and the backend is built in Node.js using Express. It connects to Notion through their official SDK and runs on Azure App Service with automated deployments using GitHub Actions.

Features

  • Full-stack Node.js app with Express.js backend
  • Notion API integration for database updates, based on their starter app
  • Deployment automation using GitHub Actions
  • Infrastructure as code via Azure Bicep
  • Hosted on Azure App Service (Linux, 64-bit configuration)

Resources Used

Setup Instructions

1. Clone the Repository

git clone https://github.com/shevonnepolastre/minecraft-dashboard-app.git
cd minecraft-dashboard-app
npm install

2. Configure Your Variables

Create an internal Notion integration and get your NOTION_KEY and NOTION_PAGE_ID. Add these to a .env file in your project root:

NOTION_KEY=your-notion-api-key
NOTION_DATABASE_ID=your-database-id

Also add your Azure service principal credentials:

  • Client ID
  • Client Secret
  • Tenant ID
  • Subscription ID

I stored them in JSON format for easier management with GitHub Actions.

Important: Add .env to your .gitignore and do not check it into Git.

3. Use Bicep to Create App Service

Use the Bicep files to provision Azure resources. Make sure to declare:

  • App Service pricing tier
  • Language stack (node, php, etc.)
  • Operating system compatibility (Linux vs Windows)

4. Create Your GitHub Actions YAML

Place the GitHub Actions YAML file inside .github/workflows. It defines deployment steps triggered on push.

5. Add a Self-Hosted Runner (Optional)

If you’re using a self-hosted runner, follow GitHub’s guide on adding self-hosted runners.

6. Test Locally

Run the app locally:

node server.js

Then go to http://localhost:[your-port] to test the form and confirm Notion integration works.

7. Deploy to Azure

Use Bicep and GitHub Actions to create the App Service and web app. You can also deploy manually or via VS Code if preferred.

8. Configure Environment Variables in Azure

Go to your Azure App Service > Configuration > Application Settings and add:

const notion = new Client({ auth: process.env.NOTION_KEY });
const databaseId = process.env.NOTION_DATABASE_ID;

This ensures your app can access the Notion API securely.

9. Use Debug Console and Log Stream

Troubleshooting is easier with Azure’s Debug Console and Log Stream. These tools helped me spot missing variables and app startup errors.

How It Works

  1. User submits a Minecraft area through the form.
  2. The backend receives the data and formats a Notion API request.
  3. The request is sent to Notion, updating the dashboard in real-time.

This simple setup has made it easier for me to keep track of builds, ideas, and progress in my Minecraft world.

Lessons Learned

  1. Linux App Service is easier to set up than Windows for Node.js apps.
  2. Always add .env to .gitignore, and remember to replicate those variables in Azure.
  3. Free App Service plans don’t support 64-bit—upgrade if needed.
  4. Deployment slots are only available in Standard tier or higher.
  5. Start simple: Use community templates or examples and customize them for your own needs.

Watch the Video

Want to see this project in action? Watch the full walkthrough on my YouTube channel, where I show how the form, Notion API, and Azure all work together.

GitHub Repository: https://github.com/shevonnepolastre/minecraft-dashboard-app

Free Minecraft Dashboard Notion template: https://www.notion.so/marketplace/templates/minecraft-tracker

Scroll to Top