Skip to content

Single file distribution

Jump to bottom
yacoubii edited this page Dec 20, 2024 · 1 revision

Creating a single-file distribution of Palindrome.js simplifies the deployment process. Users can download and run the application without worrying about complex installation procedures or dependencies.

To generate palindrome.js library files we can perform these commands:

  • yarn build:dev: will generate palindrome.dev.js file; project file with a configuration sidebar.
  • yarn build:basic: will generate palindrome.js file; project file that includes just the 3D object.

You can import the two versions of Palindrome.js in your project as follows:

image

  • palindrome.dev.js: palindrome.js with configuration controls.
  • palindrome.js: palindrome.js pure HTML.
  • client-app.js: the app of the client that will use palindrome.js. Palindrome can be imported and used as follows:
import { myUseCaseData } from './client-usecase.js';
import palindrome, { devPalindrome } from './palindrome/palindrome.dev.js';

export const mainClientFunction = () => {
    // Define Palindrome container
    const container = document.getElementById('palindrome');
    // Get Palindrome configuration
    const config = devPalindrome();
    // Customize configuration
    config.mockupData = true;
    // Bind your data
    config.data = myUseCaseData();
    // Instantiate
    palindrome(container, { ...config });
}

mainClientFunction();

  • client-app.html: contains the div that will contain palindrome.js. The div should have palindrome as id.

    <html>
    <head>
        <title>Palindrome.js</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <script src="https://cdn.tailwindcss.com"></script>
    </head>
<body>
    <div style="position:absolute;" id="palindrome"/>
    <script src="./client-app.js"></script>
</body>
</html>

  • client-usecase.js: the client use case that will be bound to palindrome.

Clone this wiki locally