Mjml dynamic / mjml-html

worked and forced me to learn a few new CLI skills

Hi @joeyk & @robm

I have followed directions (or maybe not) and not seeing it for me.

Steps I took.
Went to directory plugins/GrapesJsBuilderBundle/Assets/library/js/dist/

Made a backup of builder.js to builder.js.orig
Pulled the file above with wget into that directory.
Cleared cache
went back to my email, still not seeing it.
Turned GrapeJS off, Saved, Turned Back on Saved.
Cleared cache
went back to my email, still not seeing it.

Running 4.4.3

Hi guys,

just putting it out there. When you are updating JS for GrapeJS plugin you should run the following commands to update the dist folder (which is used in prod. env.):

cd plugins/GrapeJsBuilderBundle
yarn install  # install dependencies
yarn build

This will generate production ready code in plugins/GrapeJsBuilderBundle/Assets/library/js.

Hope it helps someone.

1 Like

Remember to

chown -R www-data:www-data /var/www/mautic/
chmod 755 builder.js

After u have updated the file. And clear cache of course.

what if we are not using yarn as the package installing but apt ?

I tried running yarn, it is not installed on my server.

Up date - I was not able to sort this out, was looking at the HTML template rather then the MJML one :man_facepalming:

So new builder.js is installed, chown’ed and chmod’d but still no DC in MJML builder.

Hi, yarn has nothing to do with apt. yarn is package manager for JS projects.

If you do not have yarn installed you can install it: < Installation | Yarn >.

So that you do not bloat the server with the software you do not need, you can build prod. build locally and upload it to the server. In this case you need to copy dist folder yarn build produces onto your server in mautic/plugins/GrapeJsBuilder/Assets/library/js. In this folder on your production server should already be dist folder. Backup the folder just in case and then replace it with the newly generated one from your local machine.

The other option of course would be to install yarn in production server.

I guess ideal is that you make generation of dist folder part of your deployment process, so that the process is automatic, but specifics for implementation of that wary for each use case.

Regards, M.

@joeyk did this work for you? Not working for me.

One option is to be patient and wait for the next update which will contain the PR and that should sort it out?

Hi @robm I understand you were not able to generate dist folder? What went wrong. Can you paste the output of yarn build?

I’ll send u a prvt message as the output might have sensitive info.

Solved with a lot of help from @mzagmajster

If anyone else is having an issue with this I can share the rather long and complicated solution that ended up working for me.

1 Like

@robm Would be great if you find the time to share it here. I’m sure others with the same problem will be thankful.

1 Like

Here goes

Steps via cli and SSH

SSH into the server
Install NPM (if you dont have it)
Install Yarn (if you don’t have it)
Navigate to the correct folder - cd /var/www/mautic/plugins/GrapesJsBuilderBundle (was my path)
wget the right file (https://raw.githubusercontent.com/mautic/mautic/4.4/plugins/GrapesJsBuilderBundle/package.json), Change 4.4 in the link to the version you have
yarn install
yarn build (create a swap file if you have memory issues running yarn build, bump up the server memory)
Clear cache
reload plugins - php bin/console mautic:plugins:reload
regenerate assets - php bin/console mautic:assets:generate

Test by creating new email with MJML

Be sure to drag in a new section before dragging on the DC tile.

3 Likes

Thank you @robm, that worked for me.
The only new feature was the dynamic content, for MJML, but the rest of the enhancements won’t show.
Is there another version what I should look for?

Which enhancements are missing?

I would expect the process would bring in all the latest updates to mjml.

Hi, for example this manual or auto-save:

image

I don’t have this:

image

I have donwloaded the 4.4.4 version, but both features are missing. Is this a payed plugin?

Is this Mautic or an MML Editor? The 2 things are not the same.
Mautic is an open source tool relying on Grapesjs builder, which is also open source.

Not all MJML features are added yet, it’s a work in progress. I hope these features will also exist in Mautic along with Google Fonts, image editor etc.

The grapesjs builder will have tokens and a better image manager (elfinder) in the next releases, you can already see them in Github.

Patience plz, there are community members working hard making it available!

No, @joeyk, you are wrong.

This is not another Mj editor or another software. This IS MAUTIC.

But it looks like Mautic from the future.

Look at the video: Blogs per RSS Feed einbinden - Newsletter Automation - YouTube
I’m not talking about the RSS block, I don’t care about it.
But the editor itself has different features. Not just the color. There are multiple buttons which are not in my system. It is a more advanced version of what I have for sure. And I upgraded to 4.4.4.

The video is posted by aivie and they also in github contributors for Mautic’s e-mail editor. I had the impression, this is a development version? Or is this live? If so can I get it or pay for it to get it?

Hi @berndappl, while Aivie contributes many features to the open source community, we keep other features as an exclusive for our customers. Those are usually (sometimes opinionated) features regarding the user experience. It is our goal to have a consistent best in class user experience.

Therefore, the email editor in the video only comes with the Aivie Mautic hosting. You can find more details and pricing on our website: aivie.ch

Thanks @robm, for sharing this. Looking through the steps, you are basically rebuilding the grapesjs JavaScript code. So I guess it would also be enough if you do the following steps:

SSH into the server
Install NPM (if you dont have it)
Navigate to the correct folder - cd /var/www/mautic/plugins/GrapesJsBuilderBundle (was my path)
wget the right file (https://raw.githubusercontent.com/mautic/mautic/4.4/plugins/GrapesJsBuilderBundle/package.json), Change 4.4 in the link to the version you have
npm run build

Test by creating new email with MJML

If I’m right, this would indicate that the Github action that runs npm run build is not working properly.

1 Like