0.0.0 • Published 2 years ago
@criclabs/my-project-web v0.0.0
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 thebuild.lib.name
option with the project name. - Replace
MyProjectWeb
in thebuild.rollupOptions.output.name
option with the name that will be used as component prefix.
- Replace
- Replace
MyProjectWeb
in themain.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 optionbuild.rollupOptions.output.name
in vite configuration,vite.config.js
.
Usage
- Include following script tag to page head in the site setting or specific page.
- Update
version
of the module.
<script
defer
src="https://cdn.jsdelivr.net/npm/@criclabs/my-project-web@{version}/dist/my-project-web.js"
></script>
- 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
- Install ngrok on your local machine.
- Sign in to ngrok and configure your authentication token on your machine.
ngrok config add-authtoken YOUR-AUTH-TOKRN
Setup Local Development
- Run the ngrok's file server with following command:
ngrok http file://$PWD
- Get the public URL from the ngrok console and visit the URL from your browser then click on "Visit Site".
- 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