🏝 Zero config islands for your next project

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 <Box padding="4"></Box>
  • 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...

NextJS BoilerPlate for Alpha version(Next.js + Styled Components + Customization + Theme)

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

Oct 24, 2022

This is a minimal Next-Js boilerplate for TypeScript and Tailwind.

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

Sep 15, 2022

A starter project to run your local server, and start sending voice packets to Deepgram

A starter project to run your local server, and start sending voice packets to Deepgram

A starter project to run your local server, and start sending voice packets to Deepgram

Sep 30, 2022

The deck, starter project, & final demo for @lachlanjc’s talk at PrideMakers 2021.

PrideMakers 2021 The deck, starter project, & final demo for @lachlanjc’s talk at PrideMakers 2021. Starter on Glitch: https://glitch.com/~pridemakers

Sep 24, 2021

A cli tool to generate cra-template from current create-react-app project.

Create Cra Template A cli tool to generate cra-template from current create-react-app project. Create Cra Template Templates cra-template-popular cra-

Aug 18, 2022

NextJS, TypeScript and Styled Components project boilerplate

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

Sep 21, 2021

Template repo for any node.js project

App Name The project uses: ESLint для линтинга кода, используется свой styleguide основанный на airbnb стандарте. prettier для форматирования кода. hu

Dec 20, 2021

A boilerplate to kick off any Gatsby project.

A boilerplate to kick off any Gatsby project.

A boilerplate to kick off any Gatsby project. This starter ships with: - Gatsby v4 - Material UI v5 with light/dark mode and a custom theme - Emotion JS (with access to Material UI custom theme) - React redux (with reduxjs/toolkit) - React intl for multilingual support - React helmet for SEO

Jul 6, 2022

This is a template project demonstrating how the MERN stack(Mongo, Express, React, Node) can be used, here we have the back end implementation and there is the React implementation as the front end

This is a template project demonstrating how the MERN stack(Mongo, Express, React, Node) can be used, here we have the back end implementation and there is the React implementation as the front end

Versão em português MERN stack This is a template project demonstrating how the MERN stack(Mongo, Express, React, Node) can be used, here we have the

Jan 22, 2022
Owner
Marcus Wood
Building Bounty https://www.bounty.co/
Marcus Wood
A default Next.js project with boilerplate packages and configurations. Includes Tailwind, TypeScript (strict), ESLint, Prettier, and Husky.

Yet another Next.js project template This template includes a set of our favorite dev tools scaffolded into a Next.js project. Tools include: TypeScri

Joey McKenzie 16 Dec 27, 2022
Starter Project for Nuxt3 project with full tailwind3 implementation and also docker & docker-compose supprt

Nuxt 3 & Tailwind 3 Starter Including tailwindConfig and Tailwind Config Viewer! Be patient, this is just a Beta version of Nuxt3. For Nuxt3 Installat

Michel Wächter 42 Nov 10, 2022
The next small thing in web development, powered by Svelte

sapper The next small thing in web development, powered by Svelte. What is Sapper? Sapper is a framework for building high-performance universal web a

Svelte 7.1k Jan 2, 2023
A full-stack dApp starter built on Ethereum (Solidity) with Next.js (React).

A full stack dApp starter built on Ethereum (Solidity) with Next.js (React) This repo contains boilerplate code for interacting with a simple smart co

Tom Hirst 272 Dec 30, 2022
Next.js + Tailwind CSS + TypeScript starter packed with useful development features

?? ts-nextjs-tailwind-starter Next.js + Tailwind CSS + TypeScript starter packed with useful development features. Made by Theodorus Clarence Features

Cornelius Denninger 7 Nov 12, 2022
Next Boilerplate with TypeScript, Redux Toolkit and Styled-Component.. For now

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

Ibrahim Yaacob 2 Feb 17, 2022
A Next + TypeScript Starter. Featuring Styled-Components, ESLint, Prettier, Axe a11y monitoring, Fathom analytics, sitemap generation, and more!

Next + TypeScript Starter A Next + TypeScript Starter by Justin Juno. Featuring Styled-Components, ESLint, Prettier, Axe a11y monitoring, Fathom analy

Justin Juno 11 Dec 13, 2022
Next Boilerplate was created to be a template for starting NextJS projects with pre-configured settings like Linters, Test Setup, Storybook and Commit Hooks.

Next Boilerplate was created to be a template for starting NextJS projects with pre-configured settings like Linters, Test Setup, Storybook and Commit Hooks.

Claudio Orlandi 4 Feb 22, 2022
A highly opinionated and complete starter for Next.js projects ready to production

The aim for this starter is to give you a starting point with everything ready to work and launch to production. Web Vitals with 100% by default. Folder structure ready. Tooling ready. SEO ready. SSR ready.

Fukuro Studio 28 Nov 27, 2022
🚀 A well-structured boilerplate and Starter for Next.js 12+, Tailwind CSS 3, Redux, Redux Thunk, and TypeScript

?? A well-structured boilerplate and Starter for Next.js 12+, Tailwind CSS 3, Redux, Redux Thunk, and TypeScript ⚡️ Made with developer experience first ESLint + Prettier + Lint-Staged + VSCode setup

null 4 Nov 28, 2022