#100DaysOfMERN - Day 58

#100DaysOfMERN - Day 58

·

3 min read

✏ 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.

  1. 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:

#100DaysOfMERN - The App