Not implemented yet: Access to webc bundles.
npm install express express-webc// app.js
const express = require("express");
const { WebCEngine } = require("express-webc");
const app = express();
app.engine("webc", WebCEngine);
app.set("view engine", "webc");
app.get("/", async (request, response) => {
response.render("index");
});
app.listen(8080, () => {
console.log("Application running at http://localhost:8080");
});<!-- views/index.webc -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello, World.</title>
</head>
<body>
<h1>Hello, World.</h1>
<cool-button>I'm a pretty cool button</cool-button>
</body>
</html><!-- components/cool-button.webc -->
<style webc:scoped>
button {
position: relative;
cursor: pointer;
padding: 0.5em 0.8em;
font-size: 1.2rem;
background: forestgreen;
color: white;
text-shadow: 0 1px darkgreen;
border: 1px solid darkgreen;
border-radius: 5px;
}
button:hover {
background: darkgreen;
}
button:active {
top: 1px;
}
button:focus {
outline-offset: 2px;
outline: 2px solid darkgreen;
}
</style>
<button>
<slot></slot>
</button>node app.jsSee examples/ directory for full examples.
Default components directory is the "components" directory
app.set("webc:components", "directory-for-my-components");