Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .eventvisor/REVISION
Original file line number Diff line number Diff line change
@@ -1 +1 @@
4
5
84 changes: 52 additions & 32 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,96 +1,116 @@
# eventvisor-example-cloudflare
# Eventvisor with Cloudflare Pages

Example Eventvisor project using [Cloudflare Pages](https://pages.cloudflare.com/).
An Eventvisor v1 project which builds, tests, and deploys a web Target to [Cloudflare Pages](https://pages.cloudflare.com/).

For more information, visit https://eventvisor.org.
Use this repository as a reference for hosting generated Eventvisor datafiles on your own Cloudflare Pages project.

## Accessing datafiles

The generated datafiles from this repository is accessible via these URLs:
The generated web datafile from this repository is available at:

- https://eventvisor-example-cloudflare.pages.dev/eventvisor-tag-web.json
- https://eventvisor-example-cloudflare.pages.dev/eventvisor-web.json

The [`web` Target](./targets/web.yml) selects definitions tagged with `web`. Eventvisor v1 generates datafiles for Targets rather than tags, so the output is `eventvisor-web.json`.

### Usage with Eventvisor SDK

Install the SDK in your application:
Install the v1 SDK and the Console module in your application:

```
$ npm install --save @eventvisor/sdk
```sh
npm install @eventvisor/sdk@1 @eventvisor/module-console@1
```

Then use it in your application:
Load the deployed datafile and create an Eventvisor instance:

```js
import { createInstance } from "@eventvisor/sdk";
import { createEventvisor } from "@eventvisor/sdk";
import { createConsoleModule } from "@eventvisor/module-console";

const DATAFILE_URL =
"https://eventvisor-example-cloudflare.pages.dev/eventvisor-tag-web.json";
"https://eventvisor-example-cloudflare.pages.dev/eventvisor-web.json";

const datafileContent = await fetch(DATAFILE_URL).then((res) => res.json());

const eventvisor = createInstance({
const eventvisor = createEventvisor({
datafile: datafileContent,
modules: [createConsoleModule()],
});

await eventvisor.onReady();

await eventvisor.track("page_view", {
url: window.location.href,
});
```

Learn more about [SDK usage here](https://eventvisor.org/docs/sdks/javascript/).
Learn more in the [JavaScript SDK documentation](https://eventvisor.org/docs/sdks/javascript/).

## Installation

Since this example app lives outside of the Eventvisor [monorepo](https://github.com/eventvisor/eventvisor), you are recommended to make sure [`package.json`](./package.json) has the latest version of [`@eventvisor/cli`](https://www.npmjs.com/package/@eventvisor/cli) package.
This project uses Node.js 24 and Eventvisor CLI v1. Install its locked dependencies with:

```
$ npm ci
```sh
npm ci
```

## Usage

### Lint

```
$ npx eventvisor lint
```sh
npm run lint
```

### Build datafiles

```
$ npx eventvisor build
```sh
npm run build
```

Checkout output in `datafiles` directory.
The build writes `datafiles/eventvisor-web.json`.

### Test

```
$ npx eventvisor test
```sh
npm test
```

Tests cover the `page_view` event schema and its transformed body for the browser destination.

## Cloudflare

For this example, we are going to be uploading to and serving our datafiles from [Cloudflare Pages](https://pages.cloudflare.com/).
The publish workflow builds the project and uploads the `datafiles` directory to Cloudflare Pages.

Make sure you already have a Cloudflare Pages project set up, and then use it in the [`publish`](./.github/workflows/publish.yml) workflow.
Create a Cloudflare Pages project named `eventvisor-example-cloudflare`, or update the project name in [the publish workflow](./.github/workflows/publish.yml).

## GitHub Actions

This example project is configured to run its CI/CD pipeline with [GitHub Actions](https://github.com/features/actions).
GitHub Actions lint, test, and build every change. Pushes to the default branch also deploy the generated datafile and commit the updated Eventvisor revision.

You are free to choose any other CI/CD provider of your choice.
You can use the same commands with any other CI provider.

### Settings

Make sure you have `Read and write permissions` enabled in your GitHub repository's `Settings > Actions > General > Workflow permissions` section.
Enable `Read and write permissions` under `Settings > Actions > General > Workflow permissions` so the publish workflow can commit the updated revision.

### Workflows

You can find the GHA workflow files in [`.github/workflows`](./.github/workflows) directory.
The workflows live in [`.github/workflows`](./.github/workflows):

- `checks` workflow: runs against non-`master` (non-`main`) branches
- `publish` workflow: runs against `master` (`main`) branch
- `checks.yml` validates branches before merging.
- `publish.yml` validates and deploys pushes to `main` or `master`.

### Secrets

Follow the guide [here](https://developers.cloudflare.com/pages/how-to/use-direct-upload-with-continuous-integration/), and set up these two secrets in your GitHub repository's `Settings > Secrects and variables > Actions` section:
Follow Cloudflare's [direct upload guide](https://developers.cloudflare.com/pages/how-to/use-direct-upload-with-continuous-integration/) and add these repository secrets under `Settings > Secrets and variables > Actions`:

- `CLOUDFLARE_ACCOUNT_ID`
- `CLOUDFLARE_API_TOKEN`

## Further reading

- [Eventvisor quick start](https://eventvisor.org/docs/quick-start/)
- [Targets](https://eventvisor.org/docs/targets/)
- [Building datafiles](https://eventvisor.org/docs/building-datafiles/)
- [Deploying to Cloudflare Pages](https://eventvisor.org/docs/deployment/cloudflare-pages/)
- [Migrating to Eventvisor v1](https://eventvisor.org/docs/migrations/v1/)
1 change: 1 addition & 0 deletions events/js_error.yml
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ tags:
- web

level: error
type: object

properties:
name:
Expand Down
1 change: 1 addition & 0 deletions eventvisor.config.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
/** @type {import('@eventvisor/core').ProjectConfig} */
module.exports = {
tags: ["web"],
};
Loading
Loading