4ui will not load

Bug and problem reporting on Cyclos 4 version

Moderators: hugo, alexandre, rmvanarkel

Post Reply
atitokor
Posts: 44
Joined: Tue Jan 01, 2019 8:33 pm

4ui will not load

Post by atitokor » Sat Apr 27, 2019 10:17 am

Hope I'm not getting ahead of myself? It's clear that 4UI is backwards compatible with Cyclos 4.11.2+; but I was also under the impression that it's ready for use now. Or did I get that part wrong?

I launched 4UI on Cyclos v4.11.5 using CORS for API backend connectivity (uncommented cyclos.cors.origin setting in cyclos.properties). Main Cyclos 4.11.5 is installed in base.example.com and 4UI setup on example.com, www.example.com using (npm run build -- --base-href /app/). All looks good except that example.com, www.example.com return no content except a loading image. Please see image below.
4ui-1.png
4ui-1.png (6.17 KiB) Viewed 231 times
On browser inspect I get the following errors in console

Code: Select all

The script from “https://example.com/app/runtime.27fdf337e5b72e33198f.js” was loaded even though its MIME type (“text/html”) is not a valid JavaScript MIME type.[Learn More] example.com
The script from “https://example.com/app/polyfills.ab5fbb32515c8387d011.js” was loaded even though its MIME type (“text/html”) is not a valid JavaScript MIME type.[Learn More] example.com
The script from “https://example.com/app/main.c94303305612943710a4.js” was loaded even though its MIME type (“text/html”) is not a valid JavaScript MIME type.[Learn More] example.com
SyntaxError: expected expression, got '<'[Learn More] runtime.27fdf337e5b72e33198f.js:1
SyntaxError: expected expression, got '<'[Learn More] polyfills.ab5fbb32515c8387d011.js:1
SyntaxError: expected expression, got '<'[Learn More]
Below is a screenshot of console.
4ui-2.png
4ui-2.png (42.64 KiB) Viewed 223 times
Would highly appreciate your help to get this right.

Thanks
Art

atitokor
Posts: 44
Joined: Tue Jan 01, 2019 8:33 pm

Re: 4ui will not load

Post by atitokor » Wed May 01, 2019 7:44 pm

I am still struggling to get 4ui to load. I am running on Cyclos 4.11.5, NodeJS 10.15.3, NPM 6.4.1. I enabled CORS "cyclos.cors.origin", and built the app using "npm run build -- --base-href /ui/". Perhaps I should disclose that my entire infrustructure is built on Docker containers behind a Traefik reverse proxy using docker-compose on a bridge network. All subdomains are reachable and display content properly. Only the ui frontend at example.com and www.example.com has problems displaying content. I will be happy to share my configuration settings if needed:

VirtualHost

Code: Select all

<VirtualHost *:80>

<Directory "/usr/local/apache2/htdocs/">

#############
# .HTACCESS #
#############
<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

#Do not rewrite css, js and images
RewriteCond %{REQUEST_URI} !\.(?:css|js|map|jpe?g|gif|png)$ [NC]
# rewrite everything else to index.html
RewriteRule ^(.*)$ /index.html?path=$1 [NC,L,QSA]

# Enable compression and caching
<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/json
</IfModule>
<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType image/* "access plus 1 days"
  ExpiresByType text/css "access plus 1 year"
  ExpiresByType text/javascript "access plus 1 year"
  ExpiresByType text/json "access plus 1 year"
</IfModule>


#################
# End .HTACCESS #
#################

</Directory>
</VirtualHost>
My site continues to show only the spinner image placeholder and on inspection shows the following errors:

Google Chrome

Code: Select all

Uncaught SyntaxError: Unexpected token < runtime.839a0d7cdf12067175e7.js:1 
Uncaught SyntaxError: Unexpected token < polyfills.ab5fbb32515c8387d011.js:1
Uncaught SyntaxError: Unexpected token < main.33e99e33d06e9300eeb1.js:1 
Firefox

Code: Select all

The script from “https://example.com/ui/runtime.839a0d7cdf12067175e7.js” was loaded even though its MIME type (“text/html”) is not a valid JavaScript MIME type.[Learn More] example.com
The script from “https://example.com/ui/polyfills.ab5fbb32515c8387d011.js” was loaded even though its MIME type (“text/html”) is not a valid JavaScript MIME type.[Learn More] example.com
The script from “https://example.com/ui/main.33e99e33d06e9300eeb1.js” was loaded even though its MIME type (“text/html”) is not a valid JavaScript MIME type.[Learn More] example.com
SyntaxError: expected expression, got '<'[Learn More] runtime.839a0d7cdf12067175e7.js:1
SyntaxError: expected expression, got '<'[Learn More] polyfills.ab5fbb32515c8387d011.js:1
SyntaxError: expected expression, got '<'[Learn More] main.33e99e33d06e9300eeb1.js:1
Below is my Apache log

Code: Select all

172....0.2 - - [02/May/2019:11:51:29 +0000] "GET / HTTP/1.1" 200 2189
172....0.2 - - [02/May/2019:11:51:29 +0000] "GET /ui/styles.0a238ad98301d867151a.css HTTP/1.1" 200 2189
172....0.2 - - [02/May/2019:11:51:29 +0000] "GET /ui/images/spinner.svg HTTP/1.1" 200 2189
172....0.2 - - [02/May/2019:11:51:29 +0000] "GET /ui/runtime.839a0d7cdf12067175e7.js HTTP/1.1" 200 2189
172....0.2 - - [02/May/2019:11:51:29 +0000] "GET /ui/polyfills.ab5fbb32515c8387d011.js HTTP/1.1" 200 2189
172....0.2 - - [02/May/2019:11:51:29 +0000] "GET /ui/main.33e99e33d06e9300eeb1.js HTTP/1.1" 200 2189
172....0.2 - - [02/May/2019:11:51:29 +0000] "GET /ui/images/logo.png HTTP/1.1" 200 2189
172....0.2 - - [02/May/2019:11:51:35 +0000] "GET / HTTP/1.1" 304 -
172....0.2 - - [02/May/2019:11:51:35 +0000] "GET /ui/images/logo.png HTTP/1.1" 200 2189
172....0.2 - - [02/May/2019:11:51:42 +0000] "GET /ui/styles.0a238ad98301d867151a.css HTTP/1.1" 304 -
172....0.2 - - [02/May/2019:11:52:25 +0000] "GET / HTTP/1.1" 304 -
172....0.2 - - [02/May/2019:11:52:25 +0000] "GET /ui/styles.0a238ad98301d867151a.css HTTP/1.1" 304 -
172....0.2 - - [02/May/2019:11:52:25 +0000] "GET /ui/images/spinner.svg HTTP/1.1" 304 -
172....0.2 - - [02/May/2019:11:52:25 +0000] "GET /ui/polyfills.ab5fbb32515c8387d011.js HTTP/1.1" 304 -
172....0.2 - - [02/May/2019:11:52:25 +0000] "GET /ui/runtime.839a0d7cdf12067175e7.js HTTP/1.1" 304 -
172....0.2 - - [02/May/2019:11:52:25 +0000] "GET /ui/main.33e99e33d06e9300eeb1.js HTTP/1.1" 304 -
172....0.2 - - [02/May/2019:11:52:25 +0000] "GET /ui/images/logo.png HTTP/1.1" 304 -


I notice a few lines with "GET / HTTP/1.1" 304 -" and wonder what these might mean for api connectivity. I would really appreciate if somebody could help me out.
Thanks
Art

Smittkon
Posts: 1
Joined: Wed Jul 31, 2019 9:09 am

Re: 4ui will not load

Post by Smittkon » Wed Jul 31, 2019 9:12 am

As for me, sometimes it is worth transferring to other platforms and with other utilities to do it all. As for me, a Cordova or Xamarin could fit in perfectly with its utilities for development. This way they could close down various bugs and vulnerabilities and they plan what will be automated. If someone considers me wrong you can check out this article https://clockwise.software/blog/xamarin-vs-cordova/ . There will be much more answers to your questions. Thank you for attention!

Post Reply