Develop Reference

Azure: Connect/Proxy Frontend (React) to Backend (Express/node.js)

I am currently trying to connect a frontend (React) to a backend (Express/nodejs) within Azure App Services. I am using Windows, since "Virtual applications and directories" are currently not available for Linux. However, according to my research, that is necessary in this case.
Backend sample: server.js
const express = require('express');
const app = express();
const port = 3003;
require("dotenv").config(); // For process.env
[...]
app.get("/api/getBooks", async (req, res) => {
const books = await Books.find();
res.send(books);
});
Frontend sample: App.js
const getBooks = () => {
axios.get('/api/getBooks')
.then(res => {
setBooks(res.data);
console.log("Got books: ")
console.log(res.data);
})
.catch(err => {
console.log(err);
})
}
Azure: Folder structure
site/server/server.js (Express)
site/wwwroot/index.html (React)
I successfully executed "npm install" via "Development Tools/Console".
The two are already connected via Virtual applications in Azure by using the following configuration.
Virtual applications
The app generally loads succesfully. However, the connection to the backend is not working.
How can I start the node.js server now on Azure and make the proxy working?
I tried to start the server via "node server" on the console. But this does not seem to be working.

I discovered two possible ways to solve this issue.
Assuming you have a client (client/App.js) and a server (server/server.js).
Serve the React App via node.js/Express
Based on the above architecture, a little bit of structure needs to be changed here. Because the React app is no longer output through its own server, but directly through Express.
In server/server.js, the following function must be called after express is declared.
app.use(express.static("../client/build"));
After defining some endpoints to the APIs, the last API node to define is the default route - the static output of the React build.
app.get("/", (res) => {
res.sendFile(path.resolve(__dirname, "client", "build", "index.html"));
});
Using an FTP client, you can now create the /client/build directory that will contain the built React app. Of course, another directory structure can be used.
The client files from the built React app are then simply uploaded there.
The deployment from the server is best done via Visual Studio Code and the Azure plugin.
In the above structure, /server would then be deployed to your in the Azure extension (Azure/App Services --> Right click on "myapp" --> Deploy to Web App ...)
Create two App Services
For example: myapp.azurewebsites.net & myapp-api.azurewebsites.net
myapp must simply contain the built React app (/build) in the wwwroot directory. This can be achieved via FTP.
The deployment from the /server to *myapp-api is best done via Visual Studio Code and the Azure plugin.
In the above structure, /server would then be deployed to myapp-api in the Azure extension (Azure/App Services --> Right click on "myapp-api" --> Deploy to Web App ...)
Also worth mentioning is that CORS should be configured, so that API calls can only be made from myapp.azurewebsites.net. This can be configured in the Azure Portal.
Occasionally the node dependencies have to be installed afterwards via the SSH console in the Azure Portal. For me it sometimes worked automatically and sometimes not.
To do this, simply change to the wwwroot directory (of the /server) and execute the following command.
npm cache clean --force && npm install
Combine this with React Router
React Router is usually used with React. This can be easily combined with a static-served web app from Express.
https://create-react-app.dev/docs/deployment/#other-solutions
Excerpt
How to handle React Router with Node Express routing
https://dev.to/nburgess/creating-a-react-app-with-react-router-and-an-express-backend-33l3

How to start node.js server on Azure Web App service?

I have a create-my-react bootstrapped application that is essentially a website that uses some FETCH API calls to a external API and it is deployed and works fine.
However, I added my own Nodejs backend, by creating a server and using using express for the routes/middleware. Everything works fine locally. I can hit my internal API endpoints (localhost:3000/myapiurlhere) and it performs an action on a database.
I have to run npm start to start up the create-my-react-app locally and then manually run the node server by node src/server.js then my internal API works.
The Azure Web App service is basically a preconfigured server with the Node RUNTIME on it, and it only seems to give you access to the D:\home\site\wwwroot folder (Windows server).
Do I need to find a way to run node server.js command on the server to start my node backend, or should it be running automatically? Also, I'm using create-my-react-app and npm run build , so it creates a build folder with a nested static folder.
I have started up REST APIs on Java on my Linux Ubuntu servers before but never on an App Service like Azure. How can I achieve what I'm trying to do?
Here is my server.js file:
const http = require('http');
const app = require('./app');
const port = process.env.PORT || 3001;
const server = http.createServer(app);
server.listen(port);

You dont have to do anything special, Have you followed this page on how to deploy basic nodejs app on Azure AppService?
One additional thing you need to do is that pass the Node version on appsettings of the appservice.
WEBSITE_NODE_DEFAULT_VERSION for the setting key.

Proxy in production React for fetch API express

I was developping a app with React app. In developing env i was using proxy but I'm deploying the app and I saw that proxy didn't work in.
I read about http-proxy-middleware. It can be a solution or it don't works too?
Any way to do this without config the server with redirects to other port?
I need to continue fetching to my API server.

The best way what I found without configure server and NGINX is follow this steps:
Build front
Move folder into a backend server.
Put that code after routes:
if (process.env.NODE_ENV === 'production') {
app.use(express.static(`${__dirname}/yourFrontFolder/build`));
app.get('*', (req, res) => {
res.sendFile(`${__dirname}/yourFrontFolder/build/index.html`);
})
...
And build your backend code and access to your backend port like frontend.

You don't usually need a proxy in your React app when it is deployed. To deploy, you usually run npm run build, which creates a build directory containing all the compiled JavaScript and HTML files you need for the deployment. These are then served by a web server, such as NGINX or by your backend application.

Connect to a remote socket.io server from Django server

I am trying to build a real-time Django application.
Because of the way my hosting service works, I am unable to start a Websocket server in parallel of my Django server.
I managed to have user-to-user interactions by creating an express server on a separate NodeJS website with socket.io, and having clients on the Django server also connect to the remote socket.io server.
However, I'dlike to have my Django server directly send events to users. To do this, I would like to create a connection between the Django server and the NodeJS server. Something like that in python:
socket = io("http://socket.io.server")
socket.emit('eventForUsers')
Is there anyway for me to achieve this?
The only information I found seemed to require me to run a parallel server from my Django app, which I can't do because my host doesn't allow me to run long-term processes.

It really depends what is the most simple solution for you, and what are your requirements. (If you want realtime bidirectional messaging then I suggest to use the socket.io-client instead of the POST example)
POST (GET,PUT,...)
You can (for example) use POST requests from your Django to Node
Django: python example (there are other ways to perform a POST to Node from Django)
reqParams = {"action":"doThis","data":"put the pizza in the oven"}
import requests
requests.post('http://ip:port/route', params = reqParams)
Node example : Listens for post at /route (express) and prints the params of the Django request
var express = require('express');
var app = express();
app.post('/route', function (req, res) {
console.log(req.query); res.end();
});
app.listen(3000, function () {
console.log('Example app listening on port 3000!');
});
Then you can use the data in req.params to perform action like broadcasting something to the socket.io clients (or a specific client)
This can also be done the other way around, performing requests to send data from Node to Django using POST (GET,...)
Socket.io-client in Django
Another (easier) solution is to include the socket.io-client in your Django webapp so it connects to your Node socket.io server as a client when the webapp is opened by browsers.
(using javascript in django)
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io('http://ip:port');
socket.on('connect', function(){alert("Hello World!");});
socket.on('event', function(data){});
socket.on('disconnect', function(){});
</script>
More Resources :
1. JavaScript (Django Docs)
2. Including the static files in your template

How to make Node.js listen to specific website and use AWS?

So I'm kind of new to Node.js but i really want to host a website that uses Node.js in the background using Amazon Web Services (AWS). I am using Socket.io and Express.js with Node, and i have a html file with the client side code.
Here's part of each file:
server.js:
var express = require("express");
var app = express();
var http = require("http").Server(app);
var io = require("socket.io")(http);
io.on("connection", function(socket) {
console.log("-- User Connected");
});
//express home page
app.get("/", function(req, res) {
res.sendFile(__dirname + "/index.html");
});
//express listen on 8080
http.listen(8080, function() {
console.log("Running...\nListening on port 8080");
});
index.html (Just the client-side javascript)
<script src = "/socket.io/socket.io.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
var socket = io.connect();
socket.on("connect", function() {
console.log("connected");
});
});
</script>
Everything works great, but i was wondering how i would upload this to a AWS bucket and run it there. I already uploaded the full .html file to a AWS bucket and set up the host, so it opens and runs fine. But how would i go about uploading and running the server.js file? and what would i change in both the client side code (change io.connect() parameters?) and the server.js code (change .listen() to something?) so it runs with AWS?
Any help is much appreciated, thank you!

Buckets are a feature of AWS' simple storage. They only support static files. You can't use them run server side side programs that you wrote yourself.
For that you'll need a different product, such as EC2.

You can run Linux on Amazon EC2 instance.
Guide to get started with Amazon EC2.
Step 1: Create a Github/Bitbucket repository of your project so it can be easily cloned on the server. Private repo in GitHub are paid while in Bitbucket it's free under some conditions.
Step 2: SSH into the server. Clone the project. Install the required packages. Now you can run the node server on EC2 instance as you do on your localhost.
Step 3: AWS provides you with public DNS something like: ec2-**-**-**-**.compute-1.amazonaws.com Now access node server through ec2-52-86-163-5.compute-1.amazonaws.com:3000/
Step 4: To run the node app continuously you need something like forever

You can only use S3 for hosting static websites as described in this example.
If you would like to host your Node.js application on AWS I recommend that you use Elastic Beanstalk as explained in Deploying Node.js Applications to AWS Elastic Beanstalk. The main difference compared to hosting the Node.js application on EC2 is that Beanstalk is a service that provides a runtime environment, i.e. you do not have to set up and manage the operatings system yourself. All you need to do is to package your application and upload it to Beanstalk. Consequently, a launch environment will be created and configured with the AWS resources needed to run your code.
For more information, please read What Is AWS Elastic Beanstalk?