✏ Plesk Obsidian: Hosting a React Frontend with Node/Express Backend
A step-by-step walkthrough how I finally managed to make it work.
(I'm using Plesk for Windows, Linux configuration might be slightly different)
✏ Folder Structure on Plesk
The root directory is the root for the domain/subdomain, the default is httpdocs. I have some folders for the database connection and related, so your structure might look differently. The node_modules folder and package-lock.json will be added automatically by Plesk when you initialise the app.
/domainroot
|
|- /controllers
|- /db
|- /node_modules
|- /public
| |- /static
| |- asset-manifest.json
| |- index.html
|- /routes
|
|- .user.ini
|- app.js
|- package-lock.json
|- package.json
|- server.js
|- web.config
✏ Preparing the Frontend
Before creating the bundle with npm run build, make sure to add this to the package.json:
{
"homepage": "."
}
✏ Preparing the Backend
The official Plesk blog doesn't explain why, but you need a slightly different setup.
- server.js
This is the entry point/startup file, it contains only these three lines:
const app = require('./app');
const http = require('http');
http.createServer(app).listen(process.env.PORT);
2.app.js
This file contains all the usual code you'd write for the server:
require('./db/connect.js');
const express = require('express');
const path = require('path');
const routes = require('./routes/apiroutes.js');
const app = express();
app.use(express.json());
// serving the frontend from the /public folder
app.use(express.static(path.join(path.resolve('./'), '/public')))
// the api endpoints the frontend is connecting to
app.get('/api/ping', (req, res) => res.send('API is running'));
app.use('/api/appdata', routes);
module.exports = app;
✏ Adjusting the web.config
The following handler and rewrite rule needs to be added (it works without the <handlers> for me, but all of the (few) articles I found about this topic had it included).
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<handlers>
<add name="iisnode" path="server.js" verb="*" modules="iisnode"/>
</handlers>
<rewrite>
<rules>
<rule name="your-app">
<match url="/*"/>
<action type="Rewrite" url="server.js"/>
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
✏ Initialising the App
In Plesk, move to Websites & Domains. Under Dev Tools, click on Node.js.
The Application Root is the entry point (the location of the server.js file/the Application Startup File), the Document Root is the location of the /public folder. I ran into issues when the application and document root weren't the same, apparently because I use the Windows version. So for me, both pointed at the /domainroot folder.
If the directory contains a package.json, there should be a button NPM install.
After installing all dependencies, your App should (hopefully) be up and running 🤞
✏ Ressources
Plesk Documentation: Administrator's Guide (Node.js support)
How to Work with Node.js Apps on Plesk Obsidian
Hosting express node.js applications in IIS using iisnode
✏ Thanks for reading!
I do my best to thoroughly research the things I learn, but if you find any errors or have additions, please leave a comment below, or @ me on Twitter. If you liked this post, I invite you to subsribe to my newsletter. Until next time 👋
✏ Previous Posts
You can find an overview of all previous posts with tags and tag search here: