af0f26c75f
no issue - Dev Containers let you work on Ghost in a consistent, isolated environment with all the necessary development dependencies pre-installed. VSCode (or Cursor) can effectively run _inside_ the container, providing a local quality development environment while working in a well-defined, isolated environment. - For now the default setup only works with "Clone repository in Container Volume" or "Clone PR in Container Volume" — this allows for a super quick and simple setup. We can also introduce another configuration to allow opening an existing local checkout in a Dev Container, but that's not quite ready yet. - This PR also added the `yarn clean:hard` command which: deletes all node_modules, cleans the yarn cache, and cleans the NX cache. This will be necessary for opening a local checkout in a Dev Container. - To learn more about Dev Containers, read this guide from VSCode: https://code.visualstudio.com/docs/devcontainers/containers#_personalizing-with-dotfile-repositories --------- Co-authored-by: Joe Grigg <joe@ghost.org> Co-authored-by: Steve Larson <9larsons@gmail.com> |
||
|---|---|---|
| .. | ||
| .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