Search code examples
node-modulesgithub-pagesweb-component

How to deploy to GitHub pages with Web Components Dependencies in Node Modules


I am trying to host my web site using Github Pages. I am currently using Web Components and Lit-HTML (No Lit Element). No server side code. Just using NPM and Node Modules. I am wanting to build the site and publish to my git branch gh-pages but I am not quite sure what steps I need to take as currently the page error as it can not find the dependencies.

I am currently running the site locally using WAMP on my Windows Machine. Works perfectly here. Not sure if its possible to compile the code so that its in a Jekyll format

EDIT: I know how to push the code to Github. Just not sure how Github uses Node Modules to build the site.

Here is my Package.json

{
  "name": "Repo",
  "version": "1.0.0",
  "description": "Description",
  "dependencies": {
    "@webcomponents/webcomponentsjs": "^2.2.1",
    "lit-html": "^1.0.0"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/username/Repo.git"
  },
  "author": "ME",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/username/Repo/issues"
  },
  "homepage": "https://homepage.com"
}


Solution

  • It depends from where you want to get the dependencies.

    Do you want to host them yourself on your own site? Maybe it's not necessary. Instead you could get them directly from their original CDN.

    For webcomponentsjs, according to their website, it's on the unpkg.com CDN.

    <script src="https://unpkg.com/@webcomponents/webcomponentsjs@^2/webcomponents-bundle.js"></script>
    

    For lit-html, according to the doc, it's on the unpkg.com CDN too:

    import {html, render} from 'https://unpkg.com/lit-html?module'