Skip to main content

Getting Started

Estimtest is designed to be used with minimal effort. There are multiple ways to use Estimtest: With the minimal configuration CLI, or a component library such as estimtest-core (for vanilla HTML), estimtest-angular, estimtest-react, and estimtest-vue.

CLI Method​

The Estimtest CLI is the suggested way to use Estimtest. The Estimtest CLI starts up a proxy server that modifies your HTML to contain estimtest-core, a component library. This way automatically works with minimal configuration and only require a download and a script to run.

Installation​

Install the script to your project.

npm install --save-dev estimtest-cli

Run the script​

Run the script to start up the server.

estimtest-cli start
tip

Want to concurrently run both your server and Estimtest CLI's proxy server? Use concurrently, concurrently could run multiple scripts at the same time under one terminal.

/package.json
{
  "scripts": {
    "dev:estimtest": "concurrently --kill-others \"npm run dev\" \"estimtest-cli start\"",
  }
}

And call that script using npm run dev:estimtest.

configuration​

Create an estimtest.config.js at the root of your project. Paste the following code into the configuration file.

/estimtest.config.js
/** @type {import('estimtest-utils/config').EstimtestConfig} */
const config = {
  // Change this to whichever server your application uses in development
  webPort: 5173,
}

export default config;

Read more about the configuration in the configuration documentation.

Component Method​

The component library offers customization that are especially useful to build third-party tools. For example, the Estimtest CLI is built on the estimtest-core library.

caution

Using the Estimtest component libraries is not suggested unless you need control over the library. The biggest drawback to using Estimtest component libraries is that the component may increase bundle size in the production build.

Installation​

Install the library into your project.

npm install estimtest-core
Framework not listed?

If your framework is not listed, it may be possible to follow along with the HTML solution. The magic behind web components is that they are framework agnostic. As long as the element is registered, any elements named estimtest-core will be automatically hydrated and active.

Registering Custom Elements​

Behind the hood Estimtest uses web components with Stencil. Therefore, we need to register the custom elements.

/index.html
<script type="module">
  import { defineCustomElements } from 'https://cdn.jsdelivr.net/npm/estimtest-core/loader/index.es2017.js';
  defineCustomElements();
</script>

Adding The Element​

Add the element to the page. The element should be the sibling of the page content, for example:

<body>
  <div id="App">
    <h1>Lorem ipsum<h1>
    <p>Lorem ipsum dolor sit amet<p>
    <!-- POSSIBLE LOCATION -->
  <div>
  <!-- POSSIBLE LOCATION -->
<body>

The component should work nicely with the default configuration.

/index.html
<estimtest-core></estimtest-core>
Element off-centered?

The component should naturally work, however you should ensure the element covers up the screen. If this becomes a problem, usually adding the following CSS class to the element is good enough:

.full-screen {
  position: absolute;
  left: 0rem;
}
Massive changes to dom structure

When the experimenter accepts the prompt to begin testing, the DOM structure will change massively. All siblings of the Estimtest component will be encompassed in 2 elements.