Some issues installing v0.17.4 on ubuntu 16.04

[perlpty]

Hi. I am having a hard time installing mosaico on Ubuntu 16.04. I have previously installed mosaico v.0.15 in the past on some servers and it is running smoothly. When mosaico installs correctly it puts index.html and editor.html out of /dist folder and find all the libs it needs. However in my installation those .html files are inside /dist folder and some css files are not found.

Here I send a screenshot of the errors displayed. So, I guess it should be an issue with the installation process somehow.

I tried on Ubuntu 14.04 with node 8.x and then I formatted the drive and install ubuntu 16.04 with node 10.x, after that I tried with node 11.x downloaded from here: https://github.com/nodesource/distributions

My current setting is: Ubuntu = 16.04.5 LTS ($ cat /etc/issue ) npm = 6.6.0 ( $ npm --version) node = v11.7.0 ( $ node -v ) ImageMagick = 6.8.9-9 Q16 x86_64 2018-09-28 ($ convert -version) git = version 2.7.4 ( $ git --version )

I also recorded installation log. It says:

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.7 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.7: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

audited 4719 packages in 6.05s
found 4 vulnerabilities (2 low, 2 moderate)
  run `npm audit fix` to fix them, or `npm audit` for details

Thanks in advance!

[bago]

mosaico 0.15 used to have index.html out of dist. latest mosaico have index.html inside the dist folder... so you probably think it is failing while it is working.

[perlpty]

Thanks, I didnt know that. But still it is not working out the path to the css libs, as seen in the screenshot. Not finding templates either..

[bago]

https://github.com/voidlabs/mosaico/blob/master/CONTRIBUTING.md#issues-building

[perlpty]

I forgot to post my grunt commands output. Here it is:

Running "googlefonts:noto" (googlefonts) task
>> 1 font downloaded.

Running "copy:res" (copy) task
Created 6 directories, copied 41 files

Running "copy:root" (copy) task
Copied 1 file

Running "copy:htmls" (copy) task
Copied 2 files

Running "copy:fontawesome" (copy) task
Copied 5 files

Running "uglify:deps" (uglify) task
>> 1 sourcemap created.
>> 1 file created 2.42 MB → 923.05 kB

Running "cssmin:deps" (cssmin) task
>> 1 file created. 358 B → 322 B

Running "jshint:all" (jshint) task

✔ No problems

Running "combineKOTemplates:main" (combineKOTemplates) task

Running "browserify:main" (browserify) task
>> 1082596 bytes written (0.47 seconds)
>> Bundle build/mosaico.js created.

Running "exorcise:main" (exorcise) task
Exorcising source map from build/mosaico.js

Running "less:css" (less) task
>> 2 stylesheets created.

Running "postcss:dist" (postcss) task
Browserslist: caniuse-lite is outdated. Please run next command `npm update caniuse-lite browserslist`
>> 1 processed stylesheet created.
>> 1 sourcemap created.

Running "postcss:material" (postcss) task
>> 1 processed stylesheet created.
>> 1 sourcemap created.

Running "express:dev" (express) task
Starting background Express server
Express server listening on port 9006

Running "watch" task
Waiting...

[perlpty]

I think the main errors here are: 1) /dist/rs/mosaico-libs.min.css?v=0.17.4 net::ERR_ABORTED 404 (Not Found) as seen on screenshot previously sent. After inspecting this folder (/dist/rs), I still do not find this specific CSS file: mosaico-libs.min.css

The most similar css file (similar name) is: mosaico.min.css If that's the case I probably should edit index.html and editor.html

2) Templates folder is also misplaced. Because editor.html is looking at path: /dist/templates But templates are installed at the mosaico root path: / So I should move templates to /dist/templates manually for them to work. The other option would be to leave the templates in the same folder and edit editor.html.

With these 2 changes, everything works as expected.

[perlpty]

The system works as expected.. However, when looking at the console there are some messages. I was wondering if these messages are NORMAL?? or they are related to the change in the CSS file: from mosaico-libs.min.css to mosaico.min.css... ??

Or this is not the css to change?

Here is the screenshot of the messages.

Thanks.

[bago]

The blue logs are ok.

" mosaico-libs.min.css" is not a CSS is the last code. So if you have references to that code you probably are using an older version (you dind't even told us which version of mosaico you are testing) or you mixed/altered the code.

Please start from scratch in a new folder, tell us the tag of the code you are using and the full log. I can't understand how you could have a reference to mosaico-libs.min.css in 0.17.4

Files are not misplaced. The backend looks for templates and uploads in the root folder. The "dist" folder includes the client side code for mosaico (we don't consider templates as part of the main mosaico library for mosaico as most users have their own template or customized them).

[perlpty]

blue dots ok, that 's good !!! mosaico.min.js ---> Mosaico - OpenSource Email Template Editor - v0.17.4 - 2019-01-27

I just downloaded "https://github.com/voidlabs/mosaico/archive/master.zip"

I developed an automated script that 1) Erase any previous mosaico installation (all folders) 1) Install pre-requisites 2) download master.zip 3) Install mosaico from downloaded master.zip file.

I have tested a lot because I'm using a script for starting from scratch everytime. It is always the same result.

My current setting is: Ubuntu = 16.04.5 LTS ($ cat /etc/issue ) npm = 6.6.0 ( $ npm --version) node = v11.7.0 ( $ node -v ) ImageMagick = 6.8.9-9 Q16 x86_64 2018-09-28 ($ convert -version) git = version 2.7.4 ( $ git --version )

The 2 changes mentioned before are always needed to run mosaico without issue. 2 options to to implement these small 2 changes.

OPTION 1: 1) Edit /dist/editor.html and change: mosaico-libs.min.css ---> mosaico.min.css

2) move Templates: From "/" to "/dist/templates"

OPTION 2: 1) Edit /dist/editor.html and change: mosaico-libs.min.css ---> mosaico.min.css

2 Not moving templates but Move contents of "/dist" to mosaico root folder "/". I run these commands from the root folder like this: $ mv ./dist/index.html ./ $ mv ./dist/editor.html ./ $ mv -f ./dist/rs/ ./

Both ways works. But I decided to use Option 2 in my last installations.

I might be possible that some mosaico installation is not running properly on Ubuntu 16.04.5, and then files are not getting in the place where they should be.

However, with these 2 small changes everything works ok now. And I dont worry for blue dots any more!!!

Here is the original editor.html in /dist folder:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=1024, initial-scale=1">

    <link rel="canonical" href="http://mosaico.io" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="icon" href="/favicon.ico" type="image/x-icon" />

    <script src="rs/mosaico-libs-and-tinymce.min.js?v=0.17.4"></script>
    <script src="rs/mosaico.min.js?v=0.17.4"></script>
    <script>
$(function() {
  if (!Mosaico.isCompatible()) {
    alert('Update your browser!');
    return;
  }
  // var basePath = window.location.href.substr(0, window.location.href.lastIndexOf('/')).substr(window.location.href.indexOf('/','https://'.length));
  var basePath = window.location.href;
  if (basePath.lastIndexOf('#') > 0) basePath = basePath.substr(0, basePath.lastIndexOf('#'));
  if (basePath.lastIndexOf('?') > 0) basePath = basePath.substr(0, basePath.lastIndexOf('?'));
  if (basePath.lastIndexOf('/') > 0) basePath = basePath.substr(0, basePath.lastIndexOf('/'));
  var plugins;
  // A basic plugin that expose the "viewModel" object as a global variable.
  // plugins = [function(vm) {window.viewModel = vm;}];
  var ok = Mosaico.init({
    imgProcessorBackend: basePath+'/img/',
    emailProcessorBackend: basePath+'/dl/',
    titleToken: "MOSAICO Responsive Email Designer",
    fileuploadConfig: {
      url: basePath+'/upload/',
      // messages??
    }
  }, plugins);
  if (!ok) {
    console.log("Missing initialization hash, redirecting to main entrypoint");
    document.location = ".";
  }
});
    </script>

    <link rel="stylesheet" href="rs/mosaico-libs.min.css?v=0.17.4" />
    <link rel="stylesheet" href="rs/mosaico-material.min.css?v=0.17.4" />
  </head>
  <body class="mo-standalone">

  </body>
</html>

[bago]

Are you sure you're using grunt and not deploying differently? The bundled development server in "/backend" explicitly try to reference static files in templates/uploads/dist folders:

app.use('/templates', express.static(__dirname + '/../templates'));
app.use('/uploads', express.static(__dirname + '/../uploads'));
app.use(express.static(__dirname + '/../dist/'));

When I download the current master and run "grunt" and then open http://127.0.0.1:9006 it works without moving the html and templates around.

[bago]

I fixxed the CSS reference (but it simply prevented the noto font from being loaded, nothing that can break the editor, IMO)

[perlpty]

Ok... Css reference is fixed.. thanks. You are right, I m not using "backend". I run my own apache/perl backend like I have done with v0.15 before.

But for my test I just tried the basics.

A. For Install: $ npm install $ npm install -g grunt-cli $ (grunt &)

B. For Test.

1. Go to index.html. I did not open templates. When moving templates it opened good.
2. Go to editor.html. And I found the bad reference. That's all.

My backend is very basic. And it just respond to the commands: /dl, /upload, /img. So, if I do not upload, list or modify anything, it is simply not noted.

I will download the new fixed version, and comment later.

[bago]

When you run "grunt" it will run its own webserver on port 9006 and mosaico will work on that port, correctly.

If you are deploying on your own server then you need the content of the dist folder for the client side application, then the backend and the templates must be placed according to the way mosaico is initialized. So, if you leave the initialization "as is" then you need the "dist" content in your root and uploads and templates inside that root.

So, "dist" content is what you need if you are deploying in your own environment. Then you will have to add uploads/templates according to your setup. The other files are "sources" and you don't need them.

[perlpty]

I saw it... The correct css is: "mosaico-libs-and-tinymce.min.css"... I thought it was: mosaico.min.css. Excellent.

Yes, Im deploying my own server. The confusion was because the contents I need were placed on root in the past (v0.15) but now (v0.17.4) they are on /dist folder.

Everything is good now. (case closed!)

Thank you so much Bago...

:)