Skip to content

Instantly share code, notes, and snippets.

@camelaissani
Created July 6, 2017 00:02
Show Gist options
  • Save camelaissani/d8151777519d82766ec84e93a7f85544 to your computer and use it in GitHub Desktop.
Save camelaissani/d8151777519d82766ec84e93a7f85544 to your computer and use it in GitHub Desktop.
create a template url-routing script
<p>This is the content of the about page </p>
<p>This is content of home page</p>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/frontexpress@1.2.1/frontexpress.min.js"></script>
<title>Front Express</title>
</head>
<body>
<a class="menu-item" data-route="home" href="#"> Home</a>
<a class="menu-item" data-route="about" href="#"> About</a>
<div id="view"></div>
<script>
// Front-end application
const app = frontexpress();
// front-end logic on navigation for all pathnames
app.get((req, res) => {
document.querySelector('#view').innerHTML = res.responseText;
});
// start front-end application
app.listen(() => {
// Listen even on menus
const menus = document.querySelectorAll('.menu-item');
for (let i=0; i<menus.length; i++) {
const menu = menus[i];
menu.addEventListener('click', () => {
app.httpGet(`/${menu.dataset.id}`);
});
}
console.log('App is listening requests');
});
</script>
</body>
</html>
{
"name": "demo_frontexpress",
"version": "1.0.0",
"description": "",
"main": "server.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "MIT",
"dependencies": {
"express": "^4.15.3"
}
}
const express = require('express');
const path = require('path');
const app = express();
app.use(express.static('public'));
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname + '/home.html'));
});
app.get('/home', (req, res) => {
res.sendFile(path.join(__dirname + '/home.html'));
});
app.get('/about', (req, res) => {
res.sendFile(path.join(__dirname + '/about.html'));
});
app.listen(3000, function () {
console.log('Example app listening on port 3000!')
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment