a2a79cec0e
no issue Added support for `--signup` to `yarn dev`. This will make sure that the signup form preview server is served (with rebuilding) and can be used in admin (instead of using the published version). This is also automatically started when using `yarn dev --all`, but with a twist: If you only run `yarn dev --all`, it will only build and watch the production build of the signup form. If you use `yarn dev --signup` or `yarn dev --all --signup` it will also serve the demo app on `http://localhost:6173`. |
||
|---|---|---|
| .. | ||
| .storybook | ||
| 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
yarnin Ghost monorepo root - Run
yarnin 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 clonethis repo &cdinto it as usual- Run
yarnto install top-level dependencies.
Test
yarn lintrun just eslintyarn testrun lint and testsyarn test:e2erun e2e tests on Chromiumyarn test:slowmorun e2e tests visually (headed) and slower on Chromiumyarn test:e2e:fullrun e2e tests on all browsers