Templates
With Vitejs and a Framework

With ViteJS and a framework

1. Let's start by creating a new vite project

Run the following command in order to quickly scaffold a new vite project

npm create vite@latest
  1. Modify the vite.config.js file to add the following configuration
vite.config.js
import { defineConfig } from 'vite'
...
 
export default defineConfig({
  base: "./",
  ...
})

This configuration will make sure that static assets are served from the root of the project.

⚠️

When including a local file into your html document make sure to use a relative path, since after you will upload it to printerz it will be put in a specific folder

Assuming the following file tree:

    • index.html
    • logo.png

    • If you want to include the logo.png file you will need to use a relative path


    Bad ❌
    <img src="/logo.png" width="150px" height="100px">
    Good ✅
    <img src="./logo.png" width="150px" height="100px">

    2. Install printerz-template-sdk

    npm install @printerz-app/template-sdk

    3. Setup the template-sdk

    Add the following code in the main.ts/js file

    main.ts
    import { setup } from "@printerz-app/template-sdk"
 
setup()

    4. Register on render event handler

    In your App.tsx/jsx file

    import { useEffect, useState } from "react";
import { onRender } from "@printerz-app/template-sdk";
 
const [variables, setVariables] = useState({});
 
const { register, unregister } = onRender((printVariables) => { // this can be async to
    console.log(printVariables);
    setVariables(printVariables);
});
 
useEffect(() => {
    register();
 
    return () => {
        unregister();
    };
}, []);

    If you want to test the behavior of your on render function you can open your browser console and type the following

    window.printerzRender({courseName: "printerz expert", name: "John doe" /* ...yor variables */})

    5. Build your project

    Run the following command in order to build your project

    npm run build

    6. Ship it to printerz 🚀

    Our last step is to create a zip file containing file inside your dist folder.

    And now we can upload our zip file to printerz !

    With Plain HTMLTo Pdf