How to serve web components app with an express server
Question
I have a project where I try to serve an app based on Web Components. The folder structure of the the project is as follows:
|-- index.html
|-- my-component-one.js
|-- mock-server.js
|-- package.json
When I start the project with
node./mock-server.js
and open this page on browser http://127.0.0.1:8092/ it just cannot find the lit-element dependency inside node_modules.
If I run curl http://127.0.0.1:8092/node_modules/lit-element/ I get this response:
Although I add the node_modules folder as a static folder in express( server.use(express.static('node_modules')) ), it cannot reach the files within node_modules.
I put the codes below.
Can you figure out the problem here?
Thanks in advance. Best,
index.html
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Web Component Test</title>
<script src="./node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
</head>
<body>
<h1>Component Trial</h1>
<my-component-one></my-component-one>
<script type="module" src="my-component-one.js"></script>
</body>
</html>
my-component-one.js
import { LitElement, html } from 'lit-element';
class MyComponentOne extends LitElement {
render() {
return html`
<p>My Component One</p>
`;
}
}
customElements.define('my-component-one', MyComponentOne);
mock-server.js
const express = require('express');
const port = 8092;
const server = express();
server.listen(port);
server.use(express.static('node_modules'));
package.json
{
"name": "web-componnet-test",
"scripts": {
"start": "node ./mock-server.js"
},
"dependencies": {
"express": "^4.17.1",
"lit-element": "^2.2.1"
},
"devDependencies": {
"@webcomponents/webcomponentsjs": "^2.4.2"
}
}
3 answers
solution1
0 2020-05-05 19:19:56
Put the listen call above like so:
server.use(express.static(path.join(__dirname, 'node_modules')));
server.listen(port);
Also, it's not a good idea to change things inside node_modules -- that folder is typically reserved only for external dependencies.
solution2
0 2020-05-05 19:44:39
Well, I switched to es-dev-server of web components https://github.com/open-wc/open-wc/tree/master/packages/es-dev-server and now it works like a charm.
I found this package within the example repository of lit element starter project: https://github.com/PolymerLabs/lit-element-starter-js
Apparently, the browser fails to bind the node_modules and this server fixes that.
FYI.
solution3
0 2020-05-09 19:36:57
For some reasons (for example its dependency with lit-html ) you cannot import lit-element directly from the node_modules directory. You'll need to bundle it (with Rollup, Webpack...)
If you don't want to use a packager, you can instead import lit-element and all its dependencies via a CDN:
import { LitElement, html } from 'https://unpkg.com/lit-element/lit-element.js?module'
Note that you test with curl didn't work for another reason. You should not use "node_modules" in the path, and add the Javascript file name. This should work (but not resolve the dependency issue.)
curl http://127.0.0.1:8092/lit-element/lit-element.js
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.