Creating a multi-page application (MPA) with Marko.js involves setting up multiple routes, each corresponding to a different page. Marko.js, with its efficient server-side rendering, makes it straightforward to build MPAs. Here's a step-by-step guide to creating an MPA with Marko.js:
1. Setup your project
First, create a new project directory and initialize a new Node.js project:
mkdir marko-mpa
cd marko-mpa
npm init -y
2. Install dependencies
You need to install Marko.js, Express (for the server), and some additional packages:
npm install marko express @marko/express
3. Project structure
Organize your project directory like this:
marko-mpa/
├── src/
│ ├── components/
│ ├── pages/
│ │ ├── home/
│ │ │ ├── index.marko
│ │ │ └── index.js
│ │ ├── about/
│ │ │ ├── index.marko
│ │ │ └── index.js
│ ├── layouts/
│ │ ├── main.marko
│ ├── server.js
├── package.json
4. Create page templates
Create the main layout template in src/layouts/main.marko:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>${input.title}</title>
</head>
<body>
<header>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
</header>
<main>
<${input.body} />
</main>
</body>
</html>
Create the home page template in src/pages/home/index.marko:
<layout-use template="../../layouts/main.marko">
<layout-put into="title">Home</layout-put>
<layout-put into="body">
<div>
<h1>Welcome to the Home Page</h1>
<p>This is the home page content.</p>
</div>
</layout-put>
</layout-use>
Create the about page template in src/pages/about/index.marko:
<layout-use template="../../layouts/main.marko">
<layout-put into="title">About</layout-put>
<layout-put into="body">
<div>
<h1>About Us</h1>
<p>This is the about page content.</p>
</div>
</layout-put>
</layout-use>
5. Create route handlers
Create src/pages/home/index.js for the home page route handler:
const template = require('./index.marko');
module.exports = (req, res) => {
res.marko(template, {});
};
Create src/pages/about/index.js for the about page route handler:
const template = require('./index.marko');
module.exports = (req, res) => {
res.marko(template, {});
};
6. Setup the Express server
Create src/server.js to setup the Express server and define routes:
const express = require('express');
const markoMiddleware = require('@marko/express').default;
const homePage = require('./pages/home');
const aboutPage = require('./pages/about');
const app = express();
app.use(markoMiddleware());
app.get('/', homePage);
app.get('/about', aboutPage);
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
console.log(`Server is running on http://localhost:${PORT}`);
});
7. Add start script
Update package.json to add a start script:
"scripts": {
"start": "node src/server.js"
}
8. Run your application
Start your application by running:
npm start
Now, open your browser and navigate to http://localhost:3000 to see the home page and http://localhost:3000/about to see the about page.
This setup provides a simple multi-page application with Marko.js and Express. You can add more pages by following the same structure: creating a template, a route handler, and adding the route to the server. Marko.js handles the server-side rendering efficiently, making it easy to build and scale MPAs.
