Skip to content

Ability to preview template expressions on localhost #1472

Closed

Description

@vpanyushenko

For those users who are creating templates with Maizzle with expressions, often the expression will get filled out on the server, when fetching a user's name or order number. When developing on localhost, it's often hard to see exactly how the final template will look, especially when there are images and loops.

I propose adding an property to the config server options which would be a path to local data that would match the templates. For example

//config.js

export default {
  server: {
++  testData: ["./src/testData/**/*.json"],
  },
  build: {
    //other build options here
    content: ["./src/templates/**/*.html"],
  }
};

This would allow us when developing locally to have a directory, of json files that can be used to match the filename of the template and fill in the data on localhost. For example, if I have confirmation.html and login.html in my templates directory, I can also have a confirmation.json and login.json in my testData directory. So now while I'm developing locally, I can quickly see how the email will look after it's filled with data on the server. All of this data, of course, would not be included in the build.

Activity

  1. cossssmin commented on Mar 15, 2025

    @cossssmin
    Member

    You can import the data locally and have it in the same structure as in production. If using Node 20+ you can use import:

    data.json

    {
        "name": "Maizzle"
    }

    config.js

    import data from './data.json' with {type: 'json'}
    
    /** @type {import('@maizzle/framework').Config} */
    export default {
      build: {
        content: ['emails/**/*.html'],
      },
      data,
    }

    example.html

    <p>Hello, {{ page.data.name }}</p>
  2. locked and limited conversation to collaborators on Mar 15, 2025
  3. converted this issue into a discussion #1473 on Mar 15, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions