🔥 hot-reloading
CRO live development server with Setup
- Make sure you have Node JS installed
- Install the package globally by using
npm i -g @conversiondev/engine
. This will give you access to thecro
command (CLI).
Create an experiment
Main steps
-
In any directory on your machine type
cro s path/to/exp
.If the experiment at
path/to/exp
exists the dev server will start up, otherwise it will prompt you to confirm creating a new experiment file structure inpath/to/exp
-
Once the above is done there will be a new file created in
path/to/exp/__dev/client.js
. Code in this file is used to make the live connection between the client site and the development server. -
Create a new experiment on the CRO platform (e.g. Optmizely, Kameleoon etc.) and paste the contents of
path/to/exp/__dev/client.js
into the JavaScript section. -
Preview the experiment with the dev server running and you should now have a development environment with hot-reload
-
Once finished you can copy over code from
path/to/exp/index.js
&path/to/exp/index.css
to the CRO platform -
You can also start the server for multiple variations by passing in
-v
options (e.g.cro s path/to/exp -v variation-1 -v variation-2
).This would create two separate folders on your system (
path/to/exp/variation-1
&path/to/exp/variation-2
) and the server will watch for changes in either one. This way you can write shared code (TS/SCSS) and use it between the different variations. E.g.path/to/exp/shared.ts
can be used in both variations to do some common logic.
JavaScript concepts
-
The entry file for JavaScript is
path/to/exp/source/index.ts
. As you might guess you are free to use TypeScript in the experiments. All of the code will be bundled and compiled to ES5 JavaScript. -
You can install and import packages from NPM - this allows you to reuse code with proper package versioning.
-
You can split up your code into multiple logical files and then import them into
path/to/exp/source/index.ts
. This way you can write more complex experiments without having to fit everything into a single JS file. -
Every time you'll make a change in your code, the compiled JavaScript will be re-inserted (hot-reload) useng a WebSocket connection established by the code in
path/to/exp/__dev/client.js
.This means if you're adding new elements to the page the server will add a new element every time you update your code. To fix this you can write some cleanup logic to
path/to/exp/__dev/cleanup.js
. E.g.:document.querySelectorAll('.inserted-element-selector').forEach($item => $item.remove());
The server will inject this cleanup code before executing the experiment code. This is only used in development and is not included in the final compiled code in
path/to/exp/index.js
.
CSS concepts
-
The entry file for CSS is
path/to/exp/source/index.scss
. As you might guess you are free to use SASS (SCSS) in the experiments. All of the code will be bundled and compiled to regular CSS. -
You can split up your code into multiple logical files and then import them into
path/to/exp/source/index.scss
. This way you can write more complex experiments without having to fit everything into a single CSS file. -
Every time you'll make a change in your code, the compiled CSS will be re-inserted (hot-reload) useng a WebSocket connection established by the code in
path/to/exp/__dev/client.js
.
Asset optimization
You can optimize assets by running cro o path/to/assets
. This will:
-
Find any SVG files and create a minified version in a
min
directory next to the minified file. If you pass in-i
option the SVG file will be updated "inline" (replaced)E.g. to minify
path/to/assets/icon-1.svg
&path/to/assets/icon-2.svg
you would runcro o path/to/assets
and it will createpath/to/assets/min/icon-1.svg
&path/to/assets/min/icon-2.svg
. -
Find any PNG/JPEG files and create a WEBP version in a
webp
directory next to the minified file.E.g. to minify
path/to/assets/bg-1.png
&path/to/assets/bg-2.png
you would runcro o path/to/assets
and it will createpath/to/assets/webp/bg-1.webp
&path/to/assets/webp/bg-2.webp
. -
You can expect a 40-80% file size saving without losing any quality.