Ubuntu - Some bower components are not configured

[perlpty]

Hi. First of all, I have to say thanks to the author(s) of Mosaico for releasing it as Open Source. It is exactly the type of solution I was looking for: Template based solution + Open Source + easy to use.

However, I have some issues that dont allow me to enjoy Mosaico 100%.
I have read mosaico building instruction more than 3 times and still having issues with installation.

========== My Enviroment ==========

1. Server OS: Ubuntu 14.04.5 LTS updated.
2. npm version = 3.10.9 ($ npm --version)
3. Node Version = v6.9.1 ( $ node -v )
4. git version = 1.9.1 ( $ git --version )
5. ImageMagick version = 6.7.7-10 ( $ convert -version )

========== TESTING TOOLS ==========

1. Several Browsers: Google-Chrome, Vivaldi and Chromium
2. Mail Clients: Roundcube in desktop browser, Gmail webmail in desktop browser.
3. Template: versafix-1
4. BackEnd: backend-php

========== My ISSUE ==========
After a lot of reading and testing I managed to build and install Mosaico. At first, I was glad that it appeared to be working. But when I sent the first TEST to my email address in a desktop enviroment using only the Block "sideArticleBlock" I noted that the image was on top but because it is a desktop environment it is supposed to be at the left, as it is correctly shown at mosaico PREVIEW (which also works good).

After that, I decided to DOWNLOAD the HTML to see the source code. The Download function also works Good. The HTML showed some things that catched my attention:

1. Most of lines have this code at the end: 
 I compared to other responsive templates that I found in the web (like foundation, antwort, etc.) and they dont have that character in each line.

2. The versafix-1 source code does not have this character at the end, so I guessed at that time that the issue could be related somehow to mosaico itself.

I must say that I am not an expert in responsive templates nor node.js, knockout, etc.. But I know about servers and programming and I have in the past 4 days a lot for knockout.js, grunt.... So, I decided to look at the installation process to look for something suspicious. When looking I found this:

Some Grunt install log lines:

Some bower components are not configured: [ 'knockout-sortable',
'knockoutjs-reactor',
'mensch',
'toastr',
'knockout-undomanager',
'knockout.wrap',
'jquery.iframe-transport',
'console-browserify',
'blueimp-file-upload',
'evol-colorpicker',
'jsep',
'juice',
'slick',
'tinycolor' ]

So, thought that for some reason some of the utilities are not being installed at all, so that might be the reason for the behavior I m seeing.

In order to be more sure about the installation process, I scripted it, so It can be replicable.

Anyways, I run twice "$ npm install" inside mosaico root folder as the author suggest. The 1st time there many warnings ( but it is usable ). The 2nd time there are less warnings (it s still usable). But in both cases the email problem described above is the same.

Warnings: For the 1st time

npm install > npmlog1.txt
npm WARN deprecated [email protected]: graceful-fs v3.0.0 and before will fail on node releases >= v7.0. Please update to graceful-fs@^4.0.0 as soon as possible. Use 'npm ls graceful-fs' to find it in the tree.
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: ReDoS vulnerability parsing Set-Cookie https://nodesecurity.io/advisories/130
npm WARN deprecated [email protected]: this package has been reintegrated into npm and is now out of date with respect to npm
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: graceful-fs v3.0.0 and before will fail on node releases >= v7.0. Please update to graceful-fs@^4.0.0 as soon as possible. Use 'npm ls graceful-fs' to find it in the tree.
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN prefer global [email protected] should be installed with -g
npm WARN prefer global [email protected] should be installed with -g
npm WARN prefer global [email protected] should be installed with -g
npm WARN lifecycle [email protected]~postinstall: cannot run in wd %s %s (wd=%s) [email protected] bower-npm-install --non-interactive /var/www/MYDOMAIN.COM/public_html/mosaico
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN [email protected] requires a peer of grunt@~0.4.0 but none was installed.

Warnings: For the 2nd time:

npm install > npmlog2.txt
npm WARN lifecycle [email protected]~postinstall: cannot run in wd %s %s (wd=%s) [email protected] bower-npm-install --non-interactive /var/www/MYDOMAIN.COM/public_html/mosaico
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN [email protected] requires a peer of grunt@~0.4.0 but none was installed.

As you can see, there are less warnings in the 2nd install. If I do a 3rd time the warning lines would be the same as the 2nd time.

If anyone could tell what I m doing wrong, it would be very helpful.

I attached the output of grunt as well as npm for you to see all log lines.

========== ADDITIONAL INFORMATION ==========
Maybe the following is another issue or maybe it is related. I don't know. But Im unable to use Mosaico with the supplied backend and thats the reason I tried the PHP-backend. PHP-backend did not work at first because of a .htaccess issue whose solution was found in this other thread:
uSked/mosaico-php-backend#23
I tried the solucion posted there and started using mosaico with PHP-Backend.

Thanks in advanced.

npmlog1_sent.txt

gruntlog_sent.txt

[perlpty]

Here is a Chrome-console view of mosaico's editor.html

[bago]

Most warnings are simply warnings and not errors. if the build created the dist folder and your have js/css files in the dist folder then the build worked.

From your last screenshot I'd say you are using an editor.html file "outdated" because it expects to find evol colorpicker in the dist folder while the colorpicker is built into the main distribution js file.

So, I guess you mixed things.

Please try again with the built in backend and check your result against the result you obtain by sending the same email with http://mosaico.io .

From what I can tell there are no issues in mosaico (if it doesn't build then you can't get that kind of console output... and I never saw mosaico "half-built" so it worked). You probably have issues with the php backend: maybe the php backend is not up to date for the latest version of mosaico.js ? Check with the mosaico php backend project.

[perlpty]

Ok. I got it. Im going to build again in another server only with built-in backend.

[perlpty]

Ok. here is the new info. Enviroment is the same as above, but in other server to let the first intact. If I use only the built-in backend the results are:

1. When going to editor.html only a red screen appears.
2. Google chrome console shows some errors. See them in attached images.
3. I also attached npm and grunt install logs
4. The procedure to build mosaico was:
   4.1. First of all I installed all the pre-requisites and check them to be the same as above:
   `
   $ npm --version

  $ node -v

  $ php -m | grep imagick

  $ git --version

  $ convert -version

`
4.2. Then I executed the following commands with SSH from my ubuntu desktop pc. ( I use Ubuntu for both desktop and server )

`

Download Mosaico

wget -O mosaico-master.zip https://github.com/voidlabs/mosaico/archive/master.zip
unzip mosaico-master.zip
rm mosaico-master.zip
mv mosaico-master mosaico
cp -R mosaico /var/www/MYDOMAIN.COM/public_html/
cd /var/www/MYDOMAIN.COM/public_html/mosaico

Install Knockout y others

npm install > npmlog1.txt 2>&1
npm install > npmlog2.txt 2>&1

install grunt-cli globally

npm install -g grunt-cli

Execute Grunt File ( run a local webserver (http://127.0.0.1:9006), etc. )

grunt > gruntlog.txt 2>&1

Permissions to image folder

chmod -R 777 /var/www/MYDOMAIN.COM/public_html/mosaico/uploads
`

1. To see mosaico in action, I went to:
   http://MYDOMAIN.COM/mosaico/
2. Grunt is running in the background, I can tell by doing:
   netstat -tpln

Where, among other things, says:
tcp 0 0 127.0.0.1:9006 0.0.0.0:* LISTEN 11541/grunt
tcp6 0 0 :::35729 :::* LISTEN 11541/grunt

1. After all of that, and without installing php-backend, I cannot run mosaico. It only worked with php-backend. However, It is built and installed since I have the Dist folder. The issue might be related to editor.html not finding what it needs. Just to compare, the old editor.html in php-backend receive the commands in new folder: dl, img, upload and uses a new .htaccess in each folder to redirect output to backend-php/index.php.
2. I also tested the email (same template) in your web ( mosaico.io ) and it worked good. But I noticed that some things are different. For instance, the preview button in the github version says "PREVIEW" but in your web it is just an icon, sponsor icon in template are different among other possible differences. Perhaps there are more changes between both versions and one of these changes is making the things go weird in my installation.

I appreciate your help. Thanks.

gruntlog_sent.txt
npmlog1_sent.txt
npmlog2_sent.txt

[bago]

OK, so there is an issue with Knockout 3.4.1 released 5 hours ago and not supported by the code.

You may try altering bower.json so to fix "knockout": "3.4.0", instead of "knockout": "~3.4.0",

I'll check the build later and either support ko3.4.1 or fix the build to use 3.4.0

[bago]

Opened #228

[perlpty]

ok.. I just saw your new post about new knockout version. So, I have to wait until mosaic updates its core. However, the things in the first post (php-backend) are still happening with old knockout.js, and with regular backend I remembered a few issues that obviously cannot replicate because of the new KO version. So, I will wait... Please let me know when the new mosaico is available. BTW, thanks so much for your help.

[bago]

"Some bower components are not configured" is an expected output. THe warnings are expected.

If the build complete creating a file in dist/mosaico.min.js and dist/mosaico.min.css then the npm/bower/grunt part worked as expected and we only care of the browser console output.

I just pushed changes to support KO 3.4.1, so please update and let me know.

[perlpty]

Ok. Noted. I will build it again.

[bago]

you may want to run a "bower update" before "grunt", or, otherwise, repeat the full build from scratch after downloading the latest code.

[perlpty]

Ok. now I am just where I started before the knockout.js change.
I mean, it works but just issues with the images. Here I send the screenshots of the console and the URL that is not found.

It might be related or not (who knows?) to the fact that I am installing mosaico in a subfolder of the public_html and not directly in the public_html.

3 possible solutions comes to my mind:

1. Try to apply or adapt the solution that employs the guy at php-backend (see above). But it is not the best solution as he recognizes.
2. Or hope that someone helps with a .htaccess file
3. Or hope mosaico's author introduce a fix to this issue.

Thanks.

[perlpty]

Well, I tried the option #1 (.htaccess method) like this:

`

RewriteEngine On
RewriteRule (.*) /mosaico/backend/main.js [QSA,L]

`
But it didn't work. Here is the screenshot of the error when trying to upload an image.

[perlpty]

Ohhh... I forgot to say that I did everything from scratch as you suggest...

[bago]

I'm sorry but if you are using mosaico php backend then you should go to the mosaico php backend project and fix your issue there.

Mosaico bundled sample backend is node js and doesn't have RewriteRule or other .htaccess stuff (Apache stuff): I can't support here code that is not part of this project.

You run "grunt" and then grunt open a local webserver using node.js and the bundled sample backend and you access mosaico connecting to the local webserver url running node.js (you can't install in subfolder.. you don't install at all because "grunt" simply run a custom webserver)

If you want to use the php backend then go ahead, but if you built mosaico.js succesfully there is nothing more I can do here for you: you seem to have issues with the mosaico php backend configuration.

[perlpty]

Ok. I mentioned the php-backend because it worked before. I just had the thing about the email not being responsive and I thought I might be because of the template or something wrong with the css inliner maybe. This is still the issue, as described in the first post. I will definite ask about this issue on the forum of php-backend. They should know that.

However, after the KO event I would like to try the node.js backend. I recognize I dont know anything about node.js but I d like to try it.

I installed mosaico as instructed (see some comments above) and made sure grunt is running with the local server:
npm install > npmlog1.txt 2>&1

npm install > npmlog2.txt 2>&1

npm install -g grunt-cli

grunt > gruntlog.txt 2>&1

chmod -R 777 mosaico/uploads

netstat -tpln

Shows: tcp 0 0 127.0.0.1:9006 0.0.0.0:* LISTEN 22609/grunt

After that, and By using ONLY the normal backend, I can go to editor.html y see the interface. But that's all I get. As soon as I try to upload a picture the system says "Unexpected upload error (Not Found)" as you can see in the attached picture.

I'm not saying that something is wrong with Mosaico, it is just that I am unable to run it with node.js backend.

With your last comment, I just realized that perhaps the setting I have is not appropriate to do what I intend to do. My setting is: My PC (ubuntu) as a client (in my country) using a web browser to connect to my web server (ubuntu also) in a datacenter (in another country). The same that you use in your website in demo: https://mosaico.io/editor.html

So, Im confused. Please help me understand. Are the followings statements correct?

1. Browser(client) & Server on different Computers = Only achievable with PHP-Backend ??? Is this concept right?
2. Browser (client) & Server on SAME Computer = Any Back-end ( Node.js or PHP Back-end )

To explain better myself, What I'm trying to do is: Run Mosaico with the built-in Node.js-Backend using server and client in different computers not even in same LAN (as I thought your demo site was running). The question would be: is it possible to run Mosaico in this way??? or to do that I definitively have to run the PHP backend?

Sorry for my ignorance about node.js ways

I really appreciate your help.

[bago]

Please provide "network console" from the browser when you upload the image and you get the "not found" error. Also the "grunt" process output during that upload could help.

You can have the backend in one server and open the page on any browser... this will work also with the bundled backend: the bundled backend is a demo and does not take security and performance into account: anyone will be able to upload files and do stuff with your backend.

[perlpty]

Ok. here it goes: Network console (with normal console + browser view + address bar) and also grunt watch terminal screen (by SSH). "Not found" is the error.

[bago]

You keep mixing things. You are connecting to an host without port and with "/mosaico/" in the path: this cannot be the node.js backend because the node.js backend answer to the 9006 port and in the root of this host, not in the mosaico subfolder.

Mosaico.js is working fine. This issue is invalid. Try reading the docs:
https://github.com/voidlabs/mosaico/wiki/Serving-Mosaico

If you are not a developer and you don't understand what is a backend call and how to check if they are implemented then I hardly can help you. Mosaico.js is a clientside library and you succesfully built it.

You have to run Grunt and run mosaico backend in the server, then you have to use your browser to connect to the "express server" started on the 9006 port of that server (using the IP of your server or the name of your server and the 9006 port with no paths/subfolders).

[perlpty]

Hi Bago. You have just enlighten me! Because of my lack of knowledge on node.js I assumed that somehow Apache was communicating with node.js server. But, now I know this is not the case. So in my case, I have 2 different servers installed: Apache (main and seen from outside world) and node.js watch server (only seen from inside that machine).

Then I realized that the best solution to achieve node.js from outside, without exposing internal ports would be a Proxy solution. And Apache does it right. Just configured Apache as reverse-proxy and that's all. In that way you have your Apache-Solution : ) Just need to add a few lines in the virtualhost configuration and that's all.

Advantages of this approach:

1. Easy of use, by adding 3 or 5 lines to virtual host.
2. Use the same back-end the author is using (node.js), so easy to spot issues.
3. Easy to implement security with Apache HTTP Authentication ( if using another folder )
4. Other features that could be implemented by the use of Apache as proxy to node.js.

I have tested it in Google-Chrome and it is working fine. I Still need to make some little fixes to make it fully functional, but right now is like 99%: All images upload good, place holders are displaying good, and the best part is that HTML template is responsive when sending.

I couldn't do responsive email with PHP-backend but I submitted that to them ( see: uSked/mosaico-php-backend#24 ). My best guess is that the code with them is somehow old and maybe they are still trying to do CSS-inlining in the backend which is not required since 2 months ago with v0.15 ( https://github.com/voidlabs/mosaico/releases ).

Although my solution works (Apache-Solution ), it has some mayor drawbacks:

1. It still needs 2 servers (node + Apache) which could be resource intensive in the long run.
2. You are limited to the functions of node.js. And if you'r like me who knows nothing about node.js then you cannot make new functions.

Because of Drawback No.2 specially, I think I'd like to build another back-end (maybe Perl back-end) to be less resource-intensive and specially to implement (in a future) more features at the back-end like security, etc. And of course, because of php-backend now I have the right direction to make it possible, when the time comes.

And finally, a sreenshot of mosaico running with this approach with no error displayed on the chrome-console. You can compare with the screenshots at the beginning to see the difference.

Just 1 question remains for me: do I need to run node.js server all the time while using php-backend or anyother-backend. I mean, can I just kill :9006 and :::35729 grunt processes if using other backend in order to save resources?

[perlpty]

and this is how it looks the node server (watch screen)

[bago]

You just need one working backend. If you implement it using PHP then I don't see reasons to keep running node.js backend.