53157f3c40
refs https://vitejs.dev/config/build-options.html#build-reportcompressedsize - this should make building a little bit quicker because it doesn't have to calculate the gzip size (I don't think we're likely to hit this because we don't have large projects, but it's still nice to clean up the output) |
||
|---|---|---|
| .. | ||
| .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
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 workaround 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