fosify-js
v1.0.5
Published
A JavaScript bundling plugin for foso.
Downloads
92
Readme
fosify-js
A JavaScript bundling plugin for foso.
Why is it needed?
It can be useful for developing A/B tests or preparing some scripts for DTM.
Foso is especially usefull for writing Optimizely experiments. A/B testing tools like Optimizely are not good for code writing. Writing code in the browser and reloading the target page every time the code was changed is simply not effective.
With Foso it is possible to write all the code in an editor and the page will be updated automatically each time the code changes were saved.
You can read more about using Foso with Optimizely here.
How to install it?
$ npm install -g foso
Reference the files that you are serving on your pages. For example, on non-secure pages you'll have to add something like this:
<script src="http://localhost:1769/index.js"></script>
The secure endpoint is https://localhost:1770
.
You can also add the links using Kibe. With Kibe you'll just have to write something like
kibe({
foso: function(mode) {
var isSecure = location.protocol === 'https:';
return [
location.protocol,
'//localhost:',
isSecure ? 1770 : 1769,
'/index.js'
].join('');
}
});
How to use it?
The project structure has to be the following in order to work with Foso.
my-experiment
├── target-page-type-1
│ └── bundle.js
├── target-page-type-2
| └── bundle.js
...
└── target-page-type-n
└── bundle.js
Running foso serve in the root directory will browserify all the bundle.js files in the target folders and serve them on http://localhost:1769
The foso server will host the bundled resources:
- target-page-type-1.js
- target-page-type-2.js
...
- target-page-type-n.js
To see how the scripts are affecting the website, run foso.on()
in the console of the page. Foso scripts will be always added to the page until foso.off()
is executed.
It can contain more files
The project structure above only shows the files that will be used as entry points for browserify. However, the project can contain many other files and not only JavaScript files.
my-experiment
├── components
| └── live-chat
| ├── index.js
| ├── index.css
| └── index.html
├── target-page-type-1
| ├── index.css
| ├── foo-template.html
| └── bundle.js
├── target-page-type-2
| ├── bar.js
| ├── foo.js
| └── bundle.js
...
└── target-page-type-n
└── bundle.js
Even though this project contains many js files, only the ones called bundle.js will be browserified and renamed to the folder name containing them.
Linking everything together
JavaScript, CSS and HTML files can be bundled using require('modules')
.
License
The MIT License (MIT)