Build a simple SPA using Node.js + Express

Question

I develop a web application using Node.js for the Back End and HTML/CSS/JS as Front End. I am attempting to build a single page app using Express framework.

I want to build a single page application using just Node.js or JavaScript, I know that for the response we could call something like res.render('contact'), but this is not working in my case because I wan't to change dynamically my page, I don't want any additional frameworks like React, Angular, ...

On my index.html page, there is a menu that each of its elements contain a hyperLink. For example when clicking on contact hyperLink in index page, I want to display on the same page dynamically the content of contact page with forms...ect without loading the page :

    <li> <a href="/contact">Contact</a></li>

My server.js file that defines the routes, by default I am directed to index page :

//to define the routes
var express = require('express'), app = express();
//to call multiple template engines easly, like html page...ect
var engines = require('consolidate');

app.engine('html', engines.nunjucks);
app.set('view engine', 'html');
app.set('views', __dirname + '/public');
app.use(express.static(__dirname + '/public'));


app.get('/', function(req, res){
    res.render('index');
});

app.get('/contact', function(req, res){
    res.render('views/contact');
});


var server = app.listen(8080, function(){
    console.log('Listening on port ' + server.address().port);
});

I know that SPA live on a single HTML document, but how I can do this with Express Framework without loading the pages? I am a bit lost.

Use ajax to load the other pages, you can also override the defaults for your anchors to do the loading. — Keith
– Keith, Commented Feb 4, 2018 at 21:26
Exactly what do you want to do with Express? Because Express is a backend http server and has nothing to do with your front end Javascript. — darksmurf
– darksmurf, Commented Feb 4, 2018 at 21:29
So can I build SPA with Ajax! for example when I click on contact hyperLink in index page, it'll display on the same page dynamically the content of contact page with forms...ect, I want to do something like this — iLyas
– iLyas, Commented Feb 4, 2018 at 22:34
If you want a SPA you should take a look at ReactJS, Vue or Angular. You use Express as Backend, your front end framework will make requests to your backend feeded by Express — Jackal
– Jackal, Commented Sep 11, 2020 at 18:03

Matt Morgan · Accepted Answer · 2018-02-04 21:30:50Z

5

Your question is very broad, but I'll try to explain a few things that may help.

The job of Express is to handle HTTP requests and return responses. Some of those responses will be HTML files, perhaps with JavaScript and CSS.

To create an SPA, you will need to, at minimum, serve up a bundle of HTML and JavaScript to the client's browser as a starting point, usually an index.html page.

This page, through JavaScript and HTML, can listen for events, including user actions and inputs, and make calls back to other endpoints on your Express server than can return data, snippets of HTML, or whatever you need to allow you to alter the single page that you have served to the user. But the changes must be executed by JavaScript that exists on the initial page, or scripts that are added by that initial JavaScript and executed.

You could for example use jQuery or fetch to make calls back to your server, or even the basic web APIs in the browser. There are other tools available as well.

answered Feb 4, 2018 at 21:30

Matt Morgan

5,3334 gold badges23 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

iLyas Over a year ago

It's useful, I understand that to make SPA, I'll handle it on front-end through JavaScript for example not in the Backend (Node.js). With express I can just handle Http Requests and define routing, right ?

Matt Morgan Over a year ago

That's right. Your server responds to requests, at a minimum for the main page of your application, sending HTML and JavaScript needed by the application. The server can also handle ajax requests for data or anything else the app needs.

Collectives™ on Stack Overflow

Build a simple SPA using Node.js + Express

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related