Deploy Node Express Server to Azure Web app

Question

I've got a visual code project which has a react front end, and a subfolder called 'server' which has a node express app hosted which provides api endpoints for my front end. This runs fine locally, but i am having trouble deploying to a Azure Web App via Github Actions

My package.json looks like this -

  "scripts": {
    "start": "npm-run-all -p react-start nodeserver",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "react-start": "react-scripts start",
    "nodeserver": "node --env-file .env src/server/server"
    }

When i run locally, i use npm start and it starts up my node server and builds my react project.

I am trying to deploy just the node server to a web app, but i can't figure out how to do this when its in the same project as another. When i tried node src/server/server it actually hosted the server in my GitHub action which is not correct.

How do i deploy part of a project using Github actions?

Answer 1

I tried the following code to publish the Node app to the Azure App Service, and it was successful.

Below is the root directory package.json file.

package.json:

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "cors": "^2.8.5",
    "express": "^4.18.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "npm-run-all -p start-react start-server",
    "start-react": "react-scripts start",
    "start-server": "node server/server.js",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "npm-run-all": "^4.1.5"
  }
}

server.js:

const express = require('express');
const path = require('path');
const cors = require('cors');
const app = express();
const port = process.env.PORT || 8000;
app.use(cors());
app.use(express.static(path.join(__dirname, '../build')));
app.get('/api/data', (req, res) => {
  res.json({ message: 'Hello from the server!' });
});
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, '../build/index.html'));
});
app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

App.js:

import React, { useState, useEffect } from 'react';
function App() {
  const [data, setData] = useState(null);
  useEffect(() => {
    fetchData();
  }, []);
  const fetchData = async () => {
    try {
      const response = await fetch('http://localhost:8000/api/data');
      const result = await response.json();
      setData(result);
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  };
  return (
    <div className="App">
      <h1>React App with Node Express Server</h1>
      {data && <p>Message from the server: {data.message}</p>}
    </div>
  );
}
export default App;

I ran below command.

npm start

Local Output:

For deploying nodejs to azure app service first I changed the terminal path to server and run below commands for deployment purpose.

npm init -y
npm install express
npm install cors

Below is my project structure.

server/package.json:

{
  "name": "server",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "cors": "^2.8.5",
    "express": "^4.18.2"
  }
}

I only push the server folder to my GitHub repository.

I successfully published a Node.js app to Azure web app (Linux) through GitHub, as shown below.

Azure App services Output: