Azure Deployment with Git (Linux) Web App

Question

Hi its my first time using azure to host an project. I got an error saying that i have an application error. [application error]

All of the deployment was successful as the logs says but I am getting the error. What should I do with it. What am I missing. Im using React as my frontend and Node as the backend. Also I am using Git Actions for my deployment. the image below is my folder structure [folder structure]

the public folder is where my frontend is.

I am not using any container yet cause I don't know how to use it.

I try to reupload the project but still getting the same error. Please help me with this

Answer 1

I tried the sample code of Node.js as the backend and React as the frontend, and deployed it to Azure App Service (Linux); it was successful.

Include these lines of code in your index.js file.

const path = require('path');

app.use(express.static(path.resolve(__dirname, '../client/build')));

app.get('*', (req, res) => {
    res.sendFile(path.resolve(__dirname, '../client/build', 'index.html'));
});

Below is the Complete index.js file.

server/index.js:

const express = require("express");
const cors = require('cors');
const path = require('path');
const PORT = process.env.PORT || 3001;
const app = express();
app.use(cors());
app.use(express.static(path.resolve(__dirname, '../client/build')));
app.get("/api", (req, res) => {
    res.json({ message: "Hello from server!" });
});
app.get('*', (req, res) => {
    res.sendFile(path.resolve(__dirname, '../client/build', 'index.html'));
});
app.listen(PORT, () => {
    console.log(`Server listening on ${PORT}`);
});

Include the following lines of code in your package.json:

  "scripts": {
    "start": "node server/index.js",
    "build": "cd client && npm install && npm run build"
  },
  "engines": {
    "node": "^18"
  },

Here is the complete package.json file.

package.json:

{
  "name": "react-node-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node server/index.js",
    "build": "cd client && npm install && npm run build"
  },
  "engines": {
    "node": "^18"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "cors": "^2.8.5",
    "express": "^4.19.2"
  }
}

Client/App.js:

import React from "react";
import logo from "./logo.svg";
import "./App.css";
function App() {
  const [data, setData] = React.useState(null);
  React.useEffect(() => {
    fetch("http://localhost:3001/api")
      .then((res) => res.json())
      .then((data) => setData(data.message));
  }, []);
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>{!data ? "Loading..." : data}</p>
      </header>
    </div>
  );
}
export default App;

I deployed the complete app to a single Azure App service. Below is my GitHub workflow file.

Workflow:

name: Build and deploy Node.js app to Azure Web App - kanodejsreactapp
on:
  push:
    branches:
      - main
  workflow_dispatch:
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Set up Node.js version
        uses: actions/setup-node@v3
        with:
          node-version: '18.x'
      - name: Install backend dependencies
        run: npm install
      - name: Install frontend dependencies and build client
        run: |
          cd client
          npm install
          chmod +x node_modules/.bin/react-scripts
          npm run build
      - name: Move build files to server directory
        run: mv client/build server/build
      - name: Zip artifact for deployment
        run: zip -r release.zip ./*
      - name: Upload artifact for deployment job
        uses: actions/upload-artifact@v3
        with:
          name: node-app
          path: release.zip

  deploy:
    runs-on: ubuntu-latest
    needs: build
    environment:
      name: 'Production'
      url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}
    steps:
      - name: Download artifact from build job
        uses: actions/download-artifact@v3
        with:
          name: node-app
      - name: Unzip artifact for deployment
        run: unzip release.zip
      - name: Deploy to Azure Web App
        uses: azure/webapps-deploy@v2
        with:
          app-name: 'kanodejsreactapp'
          slot-name: 'Production'
          package: .
          publish-profile: ${{ secrets.AZUREAPPSERVICE_PUBLISHPROFILE_<Secret_key> }}

Azure App Service Output: