ExpressJS

revised: 23-May-2024

A proven and well-developed javascript framework

Prerequisites: Basic Server (Ubuntu22.04 64bit) with Webmin, FTP, Firewall and Fail2Ban: a server linked with a domain name (eg. example.com) and familarity with creating and deploying a basic Javascript and HTML.

The Javascript environment is mature with much in the way of tutorials and materials freely available on the Internet. A National Office may seek to have more comprehensive website with the power of Node.js behind it. Our choice of the Javascript MVC website framework is ExpressJS which, if the website is to be developped on a WinPC, this will require a Node.js environment.

Having understood the setup of the BasicSite , the following setup proposed here is a project called 'stack': a 3-4 page ExpressJS website with a contact page but also has private pages. This setup can first on the PC then to have the same site established on the server (running iRedmail/Nginx - see PartB) with the ability to have the two sites (one on the PC, the other on the virtual server) synchronized via FTP (eg. FileZilla)

Part A: Creating the Node.js/ExpressJS Environment on the PC

Step1: Install Node.js on a PC (Windows)

Following this link: Node.js and install the version:16.13.0 LTS 64-bit version. Afterwards, it would be useful to continue here using the commands below via 'PowerShell'[Win10] or in Win 7+, typing in 'cmd' after opening the Windows Start button:

cd Documents // enter 'Documents' directory.
mkdir js // create in 'Documents', the 'js' directory.
cd js // enter 'js' directory.
mkdir stack // create in 'js', the 'stack' project directory
cd stack // enter 'stack' directory.
npm init // fill in questions as convenient.

Following the above, open the 'package.json' file with your text editor and replace all lines from below "description" with the following text package_json-partial.txt and save:

Step 2: Install a ExpressJS App
To install the remaining parts of app called 'stack' download this zipped folder: stack2024.zip and place it in the 'js' folder -- and unzipped it. New folders/files will appear in the existing 'stack' folder
In the Powershell, enter the 'slack' directory and type the following:

npm install // the dependencies are then installed
npm run dev // Go to browser via link at: http://localhost:5000

If all has gone well, one should find a 'Welcome' webpage and to login, use email: johndoe@email.com, password: 'password'

Characteristics of 'Stack'

In the folder 'views', the html pages demonstrate how to incorporate images and documents, boosted by the 'eta' template language and 'w3.css'.
In the folder 'config', there is a file called 'users' where one can add new users. Use the hidden endpoint such as '/registerJoe2Morrow713pm' to produce a hashed password
In the same folder 'config', there is a file called 'config.env' where one can set the email user and password for a functioning contact page.

Note: For extra security,
1. one can change and improve on the hidden endpoint - see stack.js
2. one can change and extend the test number for to send a message in the contact page.

Recommended reading/viewing:
i. A good Youtube tutorial set by Travesy Media, start with Crash Course on Express.js
and another set by Zach Gollwitzer: What is Express Middleware finally these by DevSprout: How to Pass Data Through Middleware in Express JS
ii. Nodemailer: Quick start with Nodemailer
iii. Eta Template: Go to the source website for the best references/tutorials
iv. A modern and responsive CSS, w3.css - by W3-Schools - a stylesheet used in this demo.

Express	Express-PartB
Express-Deploy	Express-Extras