fb0807c8c5
refs https://ghost.slack.com/archives/C02G9E68C/p1688983916615989?thread_ts=1687341349.559679&cid=C02G9E68C - these cause issues with our PR workflow because we can't push tags in a PR and the commit is rebased onto `main` so the hash changes - this disables tags for now |
||
---|---|---|
.. | ||
.storybook | ||
assets/icons | ||
src | ||
test | ||
.env.development | ||
.eslintrc.cjs | ||
.yarnrc | ||
index.html | ||
package.json | ||
playwright.config.ts | ||
postcss.config.cjs | ||
preview.html | ||
README.md | ||
tailwind.config.cjs | ||
tsconfig.json | ||
tsconfig.node.json | ||
vite.config.ts |
Embeddable Signup Form
Embed a Ghost signup form on any site.
Development
Pre-requisites
- Run
yarn
in Ghost monorepo root - Run
yarn
in this directory
Running via Ghost yarn dev
in root folder
You can automatically start the signup-form dev server when developing Ghost by running Ghost (in root folder) via yarn dev --all
. This will only build the production build, without the demo site.
Running via yarn dev --all --signup
or yarn dev --signup
will also serve the demo site on http://localhost:6173
.
Running the development version only
Run yarn dev
(in package folder) to start the development server to test/develop the form standalone.
- This will generate a demo site on http://localhost:6173
- This will build and watch the production build and host it on http://localhost:6174/signup-form.min.js (different port!)
Using the UMD build during development
Vite by default only supports HRM with an ESM output. But when loading a script on a site as a ESM module (<script type="module" src="...">
), you don't have access to document.currentScript
inside the script, which is required to determine the location to inject the iframe. In development mode we use a workaround for this to make the ESM HMR work. But this workaroudn is not suitable for production.
To test the real production behaviour without this hack, you can use http://localhost:6173/preview.html. This HTML page will use http://localhost:6174/signup-form.min.js
directly.
Develop
This is a monorepo package.
Follow the instructions for the top-level repo.
git clone
this repo &cd
into it as usual- Run
yarn
to install top-level dependencies.
Test
yarn lint
run just eslintyarn test
run lint and testsyarn test:e2e
run e2e tests on Chromiumyarn test:slowmo
run e2e tests visually (headed) and slower on Chromiumyarn test:e2e:full
run e2e tests on all browsers