Skip to content

Instantly share code, notes, and snippets.

@camelaissani
Forked from aldebaran798/index.html
Last active December 21, 2017 10:25
Show Gist options
  • Save camelaissani/2da1dd0bb478a7a0989630320aff6b5c to your computer and use it in GitHub Desktop.
Save camelaissani/2da1dd0bb478a7a0989630320aff6b5c to your computer and use it in GitHub Desktop.
FrontExpress Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/frontexpress.min.js"></script>
<title>Prueba Front Express</title>
</head>
<body>
Probando <br />
<a class="menu-item" data-id="page1" href="#"> page 1</a>
<a class="menu-item" data-id="page2" href="#"> page 2</a>
<a class="menu-item" data-id="page3" href="#"> page 3</a>
<div class="content"></div>
<script>
// Front-end application
const app = frontexpress();
// front-end logic on navigation path "Root"
app.get('/', (req, res) => {
document.querySelector('.content').innerHTML = `<h1>Index</h1>`;
});
// front-end logic on navigation path "/page1"
app.get('/page1', (req, res) => {
document.querySelector('.content').innerHTML = `<h1>Page 1 content</h1>`;
});
// front-end logic on navigation path "/page2"
app.get('/page2', (req, res) => {
document.querySelector('.content').innerHTML = `<h1>Page 2 content</h1>`;
});
// front-end logic on navigation path "/page2"
app.get('/page3', (req, res) => {
document.querySelector('.content').innerHTML = `<h1>Page 3 content</h1>`;
});
// start front-end application
app.listen(() => {
// on DOM ready
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>
const
express = require('express'),
app = express(),
path = require('path');
const middleware = (req, res) => {
res.sendFile(path.join(__dirname + '/index.html'));
}
app.use(express.static('public'));
app.get('/', middleware)
app.get('/page1', middleware)
app.get('/page2', middleware)
app.get('/page3', middleware)
app.listen(3000, function () {
console.log('Example app listening on port 3000!')
})
{
"name": "prueba_frontexpress",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.15.3"
}
}
@camelaissani
Copy link
Author

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment