Hello, World! - From express to web

Pofoda — Tue, 03 Sep 2019 08:11:32 +0000

Hello, World! is a common starting tutorial, almost every dev has been through it.

Here in this tutorial, I will show you an easy way of setting up ‘Express’ with ‘NodeJS’

Why ‘Express’ and ‘NodeJS’?
NodeJs is the way we handle our server-side code in a lightweight way (i/o).
Express is a framework to NodeJS that makes it easier to develop websites, web apps, and API’s.

Assuming you already have your favorite editor, we can start, if you do not know any… ‘VScode’ (visual studio code) is a good choice
You will need to have NodeJS (software) installed too. (https://nodejs.org/en/download/)
Assuming you have been following along, you will now have to open the terminal in your editor and type in “npm init” it will now ask you a couple of things depending on your system you should be able to hit RETURN on most of them, ‘entry point:’ could be renamed to “app.js”.
Now it’s time to get Express on the server, simply open your terminal again and use ‘npm’ again. Type in: “npm install Express --save”, if all went well it should be in your ‘package.json’ file under root.
Now things are installed we can start working with Express, what you sat your ‘entry point’ to you should have/make a file under the root with the same name. fx in step 3 I suggested it to “app.js” if you did so name it that.
Go into your ‘entry point’ and make ready to code a little.

// Loads express as server program
const express = require('express');
// creates an express application
const app = express();

// makes you able to create ‘routes’ in an separated filed called: “routes.js”
require('./server/routes/routes.js')(app);

// Allows server to handle the ‘public’ folder, by serving HTML, CSS, JavaScript and pictures
app.use(express.static('public'));

// starts server on port 3000 and gives you a link in the terminal with some visual presentation
const port = 3000;
app.listen(port, (error) => {
if (error) console.log(error);
         console.log('\x1b[35m%s\x1b[0m', '================================================================'); console.log('Server is listening on port %s, address: %s', port, 'http://localhost:' + port);
});

Now you just need the structure and you should be set to go. Structure:

· “root”
· Public
·   Img
·   CSS
·     style.css
· Server
·   routes
·     routes.js
· license
· Package-lock.json
· Package.json
· app.js

EJS view engine (bonus)
EJS is a simple templating language that lets you generate HTML markup with plain JavaScript.

We have done it before and we will do it again, to install this package we will need to open the terminal and write in: “npm install ejs --save”, then it should be ready to work with.
All we have to do is to allow the server to work with our new package by:
Find your way into app.js, right above the part where we allowed ‘routes’ in another file you should put in:

// set view-engine as ejs 
app.set('view engine', 'ejs');
// point at the folder/file where the views are placed
app.set('views', './server/views');

app.js should now look something like this:

// Loads express as server program
const express = require('express');
// creates an express application
const app = express();
// sæt viewengine til ejs 
app.set('view engine', 'ejs');
// peg på den mappe hvor alle views filerne er placeret
app.set('views', './server/views');


// makes you able to create ‘routes’ in an separated filed called: “routes.js”
require('./server/routes/routes.js')(app);

// Allows server to handle the ‘public’ folder, by serving HTML, CSS, JavaScript and pictures
app.use(express.static('public'));

// starts server on port 3000 and gives you a link in the terminal with some visual presentation
const port = 3000;
app.listen(port, (error) => {
if (error) console.log(error);
         console.log('\x1b[35m%s\x1b[0m', '================================================================'); console.log('Server is listening on port %s, address: %s', port, 'http://localhost:' + port);
});

MySQL database (bonus)
MySQL is a SQL based database and is easy to manage (in my opinion).
If you are new to MySQL you should check out: ‘PHPMyAdmin’ for easy and visual representing
First, go to the terminal just as last time and type in: “npm install mysql2 --save”, if all done right you can start working on MySQL2.

Make a little difference to the structure, under ‘Server’ make a new folder and call it “config” in there you should make a new file called “mysql.js”. New structure:

· “root”
· Public (everything here is accessible for anyone with connection)
·   Img
·   CSS
·     style.css
· Server
·   config
·     mysql.js
· routes
·   routes.js
· license
· Package-lock.json
· Package.json
· app.js

Now go to the newest added file ‘mysql.js’ and type in the code:

// allows the server to load and run ‘mysql2’
const MySQL = require('mysql2/promise'); //

// module.exports allow other files in the document to access the code and simply make a connection to the chosen database
module.exports = {
  connect: async function () {
     return await mysql.createConnection({
        host: 'localhost',
        user: 'root',
        password: '', // not important
        port: '3000',
        database: 'the_name_database' // whatever name you gave your database
     });
  }
}

DEV Community: Pofoda

Hello, World! - From express to web