0.0.0 • Published 2 years ago

@criclabs/my-project-web v0.0.0

Weekly downloads
-
License
-
Repository
-
Last release
2 years ago

my-project-web

Template Features

  • Fast Hot Module Replacement 🔥
  • TypeScript Supported 🛠️
  • Optimized Build and Bundling 📦
  • Sourcemap for development environment 🧭
  • Code Linting and Formatting 💅
  • CI/CD with GitHub Action 🤖

Template TODO Checklist

Follow these instructions to complete the project setup:

  • Update vite configuration, vite.config.js, to match the project
    • Replace MyProjectWeb in the build.lib.name option with the project name.
    • Replace MyProjectWeb in the build.rollupOptions.output.name option with the name that will be used as component prefix.
  • Replace MyProjectWeb in the main.ts with the project name.
  • Update project name by replacing all the word my-project-web in following files with the project name in Kebab case.
    • README.md
    • package.json
    • vite.config.js
  • Configure GitHub repository setting
    • Setup branch protection.
    • Create npm classic access token and add to NPM_ACCESS_TOKEN in GitHub Actions secret.
  • Update README.md content
    • Remove template related content.
    • Update MyProjectWeb in the code snippet to match the value of option build.rollupOptions.output.name in vite configuration, vite.config.js.

Usage

  1. Include following script tag to page head in the site setting or specific page.
  2. Update version of the module.
<script
  defer
  src="https://cdn.jsdelivr.net/npm/@criclabs/my-project-web@{version}/dist/my-project-web.js"
></script>
  1. On the Webflow page, initialize the component in the head section.
<script>
  window.addEventListener("DOMContentLoaded", () => {
    const buttonElement = document.querySelector("#unique-button");

    if (buttonElement) {
      new MyProjectWeb.Button(buttonElement);
    }
  });
</script>

Local Development

The following instructions for setting up a local development environment allow you to develop the web component locally and see the changes you make reflected on the Webflow site.

Prerequisites

  1. Install ngrok on your local machine.
  2. Sign in to ngrok and configure your authentication token on your machine.
ngrok config add-authtoken YOUR-AUTH-TOKRN

Setup Local Development

  1. Run the ngrok's file server with following command:
ngrok http file://$PWD
  1. Get the public URL from the ngrok console and visit the URL from your browser then click on "Visit Site".
  2. On the WebFlow's custom code setting, comment out the script tag of the original module and add the module you are working on.
<!-- <script defer src="ORIGINAL_MODULE_URL"></script> -->
<script defer src="NGROK_PUBLIC_URL/dist/my-project-web.js"></script>
0.0.0

2 years ago