Bootstraps a Preact Island project with no configuration

Overview

🏝 Preact Island Starter

Bootstraps a Preact Island project with no configuration.

downloads version Supports Preact and React MIT License

Features

  • πŸš€ Multi entry point builds by default. Make all the islands you need!
  • 🌲 Infinitely tree shakeable. Each entry point tree shakes both the JS and CSS.
  • 🧩 First class web component support (including web component portals 🀯 )
  • 🧁 Zero runtime styles in Typescript thanks to vanilla-extract
  • ⛷️ Dev environment injects scripts just like you would use in production.
  • 🐿️ Dynamic island build environment thanks to Webpack layers
  • 🚒 Built in Netlify deployments
  • πŸ™ Environmental variable support
  • πŸ”₯ Playwright testing built in
  • πŸ‘” Fully typed with TypeScript

Stack

  • βš›οΈ Preact
  • πŸ‘” TypeScript
  • 🌐 Webpack 5
  • 🧁 Vanilla-Extract
  • 🀑 Netlify
  • πŸ”₯ Playwright testing

What's Preact Island?

Sometimes you need to embed a component onto someone else's website. This could be a Shopify widget, email sign up form, CMS comment list, social media share icon, etc. Creating these experiences are tedious and difficult because you aren't in control of the website your code will be executed on.

Preact Island helps you build these experiences by adding a lightweight layer on top of Preact. For <5kB, you get a React style workflow (with hooks!), and a framework for rendering your widget with reactive props.

Head on over to the repo for more details!

Using the Template

No fancy CLI (yet), so to use the template we're going old school!

git clone [email protected]:mwood23/preact-island-starter.git <NAME OF YOUR PROJECT>

cd <NAME OF YOUR PROJECT>

# Remove the Git history from the repo
rm -rf .git

# Edit the name in the package.json

# Create a new Git history
git init
git add .
git commit -m "Initial commit"


#############################################################
# From here, create a new repo, hook up the remote and push #
#############################################################

# Node 16 is recommended!
# To run the app
npm install

npm run dev

API

Adding Islands

To add a new island, create a file suffixed with .island.tsx. The webpack compiler will automatically pick it up and add your new island to the index.html page. You may need to restart your development server to see the changes take hold.

Styling Islands

This template uses vanilla-extract for all styles. Please refer to their docs for more information. The starter has some base patterns set up, including a Box component that everything is built off of. There are some footguns with vanilla extract due to how CSS is interpreted by browsers so watch out!

  • If you use a style() object those are going to have higher specificity than any sprinkles, including props passed directly to a
  • Make sure reset.css is imported at the top of every island. This makes sure it is executed first in the stylesheet so that your styles can override it.

Deploying Islands

Run npm run build to create your islands and a demo page that you can deploy anywhere. These are static files so it's best to go somewhere with a good CDN like Vercel, Cloudflare, Netlify, etc. The islands are in a separate directory /islands so you don't pollute the root domain. You can alter this output in the webpack.config.js if you need.

Environmental Variables

The starter ships with support with environmental variables. To develop locally, add variables to .env.local. The starter uses Netlify for the CI and deployment process so that is where you would add variables per environment if you choose to use them for deployment.

Remember that nearly all islands are going to run on a client somewhere. These are meant to be use to create environments, all variables will be exposed onto the client (aka public), so don't put anything secretive in here!

Credits

Artwork by vik4graphic

License

MIT - Copyright (c) Marcus Wood

You might also like...
Completely static, built with Next.js, Preact, and TailwindCSS

Oxygen Updater website Completely static, built with Next.js, Preact, and TailwindCSS. Detailed setup instructions may follow in a later commit. Getti

Example repository for integrating Ant Design with ReactPWA project. This repo demonstrates the usage & integration of Ant Design in existing ReactPWA project.

ReactPWA - PawJS & Ant Design Example repository for integrating Ant Design with ReactPWA project. This repo demonstrates the usage & integration of A

Simple React-Native boilerplate code in Typescript for getting started with a new project quickly. It has all the essentials that one would require in a project.

react-native-boilerplate-typescript Simple React-Native boilerplate code in Typescript for getting started with a new project quickly. It has all the

Mg-project-template - A cli tool for creating a template project
Mg-project-template - A cli tool for creating a template project

Proyect Template CLI Tool A cli tool for creating a template project Quick Overv

This project is a template for ReactJS project. This template was built with Create React App.

This project is a template for ReactJS project. This template was built with Create React App.

Project similar to the Create React App for libraries and dependencies
Project similar to the Create React App for libraries and dependencies

Create React Dependency β€’ β€’ β€’ Contributing | Code of Conduct Project similar to the Create React App for libraries and dependencies. It creates a read

This Project Is Deprecated. Use [Ant Design Pro](https://pro.ant.design/) instead.
This Project Is Deprecated. Use [Ant Design Pro](https://pro.ant.design/) instead.

This Project Is Deprecated. Use Ant Design Pro instead. Ant Design Pro is a production-ready solution for admin interfaces. Built on the design princi

This project is designed to help those who use antd to develop a website(or web app). Maybe also need to use redux, router and so on.
This project is designed to help those who use antd to develop a website(or web app). Maybe also need to use redux, router and so on.

react-antd-redux-router-starter This project is designed to help those who use antd to develop a website(or web app). Maybe also need to use redux, ro

A growing collection of responsive Chakra UI Templates ready to drop into your React project.

A growing collection of responsive Chakra UI Templates ready to drop into your React project.

Owner
Marcus Wood
Building Bounty https://www.bounty.co/
Marcus Wood
A toolkit for React, Preact, Inferno & vanilla JS apps, React libraries and other npm modules for the web, with no configuration (until you need it)

nwb nwb is a toolkit for: Quick Development with React, Inferno, Preact or vanilla JavaScript Developing: React Apps Preact Apps Inferno Apps Vanilla

Jonny Buchanan 5.5k Sep 27, 2022
Zero configuration Preact widgets renderer in any host DOM

Preact Habitat A 900 Bytes module for that will make plugging in Preact components and widgets in any CMS or website as fun as lego! Demos Login Widge

Zouhir ⚑️ 496 Sep 9, 2022
Universal rendering for Preact: render JSX and Preact components to HTML.

preact-render-to-string Render JSX and Preact components to an HTML string. Works in Node & the browser, making it useful for universal/isomorphic ren

Preact 495 Sep 28, 2022
βš›οΈPreact-PWA - a boilerplate to build fast progressive web applications with Preact & Vitejs

βš›οΈ pheralb/preact-pwa is a boilerplate to build fast progressive web applications with Preact & Vitejs. ?? Demo - Cloudflare Pages. ?? Gett

Pablo Hdez 5 Aug 26, 2022
✨ Create server-rendered universal JavaScript applications with no configuration

Universal JavaScript applications are tough to setup. Either you buy into a framework like Next.js or Nuxt, fork a boilerplate, or set things up yours

Jared Palmer 10.9k Sep 22, 2022
Enjoy React, Redux, and React-Router, with zero build configuration.

react-redux-starter-kit This is yet another single page web application template using React. However, this project attempts to balance simplicity wit

cloudmu 354 Sep 15, 2022
TypeScript basics, Compiler & Configuration, working with Next-gen JS Code, Classes & Interfaces;

TypeScript basics, Compiler & Configuration, working with Next-gen JS Code, Classes & Interfaces; Advanced Types & TypeScript Features, Generics, Decorators; Full Project culminating this learning adventure; Working with Namespaces & Modules, Webpack & TypeScript, Third-Party Libraries & TypeScript.; React + TypeScript, NodeJS + TypeScript

Debora Schuch da Rosa 0 Dec 27, 2021
A template to create a React Library. Zero configuration, just use!

React lib template ?? A simple React lib template based on Parcel and Jest. Usage use this template for your next React lib, modify it and run npm run

RaΓ­ Siqueira 15 Aug 22, 2022
Gab 3 Mar 5, 2022
⚑️ WebExtension Vite Starter Template with Preact

Preact Webext A Vite powered WebExtension (Chrome, FireFox, etc.) starter template with Preact. Credits This boilerplate is a shameless fork of antfu/

Piyush Suthar 17 Aug 29, 2022