I have problem with Require JS using prettyurl.
When i turn on prettyurl it in couch, the javascript file didn't load at subdomain only. But when i turn off the prettyurl it was fine.

Here is my app.js code:

Code: Select all

"use strict";

//scripts availabel
require.config({
    baseUrl: '',
    paths: {
        //PLUGINS
        'jquery': 'vendor/jquery/jquery.min',
        'plugins/modernizr': 'vendor/modernizr/modernizr',
        'plugins/bootstrap_v3': 'vendor/bootstrap/v3/js/bootstrap.min',
        'plugins/slick': 'vendor/slick/slick.min',
        'plugins/progress': 'vendor/progress/dist/circle-progress.min',
        'plugins/magnificPopup': 'vendor/magnificPopup/dist/jquery.magnific-popup.min',
        'plugins/bridget': 'vendor/jquery/jquery-bridget',
        'plugins/isotope': 'vendor/isotope/isotope.pkgd.min',
        'plugins/datePicker': 'vendor/datePicker/js/datepicker',
        //MODULES
        'modules/main': 'js/modules/main',
        'modules/player': 'js/modules/player',
        'modules/progress': 'js/modules/progress',
        'modules/upload': 'js/modules/upload',
        'modules/userToggle': 'js/modules/user-toggle',
        'modules/menu': 'js/modules/menu',
        'modules/statistic': 'js/modules/statistic',
        'modules/posts': 'js/modules/posts',
        'modules/googleCharts': 'js/modules/google-charts',
        'modules/datePicker': 'js/modules/datepicker',
    },
    shim : {
        //PLUGINS
        'plugins/modernizr': {
            exports: 'Modernizr'
        },
        'plugins/bootstrap_v3': {
            deps: ['jquery'],
            exports: 'Bootstrap'
        },
        'plugins/datePicker': {
            deps: ['jquery'],
            exports: 'datePicker'
        },
    }
});

My header code:

Code: Select all

<script data-main="js/app" src="<cms:show k_site_link/>vendor/require/require.js"></script>

And prettyurl also turn the javascript into subdomain link i.e: mydomain.com/subdomain/js/app.js instead of mydomain.com/js/app.js. So it was not loading the javascript correctly at the subdomain link.
Here is the screenshot:


How to fix this?
Thankyou.

[KK]

I think you should explicitly set the baseUrl key in your code to the correct domain -

//scripts availabel
require.config({
baseUrl: '',
paths: {

Hope it helps.

I think you should explicitly set the baseUrl key in your code to the correct domain -

//scripts availabel
require.config({
baseUrl: '',
paths: {

Hope it helps.

I have tried it, but nothing seem to be works.
Here my base url: http://localhost:8888/desain360/
since i install the couch in subdomain.

Thankyou for your reply KK.

[KK]

Exactly what value are you using for the baseurl and what is the correct location of your js files?

I think e.g. if jquery.min is at http://mydomain.com/vendor/jquery/, the following setting should work -

Code: Select all

 baseUrl: 'http://mydomain.com/',
    paths: {
        //PLUGINS
        'jquery': 'vendor/jquery/jquery.min',

Exactly what value are you using for the baseurl and what is the correct location of your js files?

I think e.g. if jquery.min is at http://mydomain.com/vendor/jquery/, the following setting should work -

Code: Select all

 baseUrl: 'http://mydomain.com/',
    paths: {
        //PLUGINS
        'jquery': 'vendor/jquery/jquery.min',

Yes, I think all my code path is correct, and it works and fine when in the homepage: http://mydomain.com/ but it's not when in subdomain e.g: http://mydomain.com/subdomain.

Here is my baseurl:

Code: Select all

baseUrl: 'http://localhost:8888/desain360/',
    paths: {
        //PLUGINS
        'jquery': 'vendor/jquery/jquery.min',

My problem is at the every subdomain, the link of my javascript turn into subdomain link e.g: http://mydomain.com/subdomain/app.js. It has to be http://mydomain.com/app.js to get working.

One more thing
If prettyurl turn off, all working fine between Top Domain: http://mydomain.com and Subdomain: http://mydomain.com/subdomain. I don't know where the problem is.

Sorry for my bad english

[KK]

It'd be difficult for me to know about the problem without taking a look at it myself.

I suggest you continue with building your site on the localhost without prettyURLs.
Once the site is finished, deploy it online and get me access to it if the problem persists.

It'd be difficult for me to know about the problem without taking a look at it myself.

I suggest you continue with building your site on the localhost without prettyURLs.
Once the site is finished, deploy it online and get me access to it if the problem persists.

I have found the solutions. It was data-main on header and should be set as full link on the app.js.

Here is the code for app.js:
Since app.js is not on the server side, the base url must be added manually: http://localhost:8888/desain360/

Code: Select all

"use strict";

//scripts availabel
require.config({
    baseUrl: '',
    paths: {
        //PLUGINS
        'jquery': 'http://localhost:8888/desain360/vendor/jquery/jquery.min',
        'plugins/modernizr': 'http://localhost:8888/desain360/vendor/modernizr/modernizr',
        'plugins/bootstrap_v3': 'http://localhost:8888/desain360/vendor/bootstrap/v3/js/bootstrap.min',
        'plugins/slick': 'http://localhost:8888/desain360/vendor/slick/slick.min',
        'plugins/progress': 'http://localhost:8888/desain360/vendor/progress/dist/circle-progress.min',
        'plugins/magnificPopup': 'http://localhost:8888/desain360/vendor/magnificPopup/dist/jquery.magnific-popup.min',
        'plugins/bridget': 'http://localhost:8888/desain360/vendor/jquery/jquery-bridget',
        'plugins/isotope': 'http://localhost:8888/desain360/vendor/isotope/isotope.pkgd.min',
        'plugins/datePicker': 'http://localhost:8888/desain360/vendor/datePicker/js/datepicker',
        //MODULES
        'modules/main': 'http://localhost:8888/desain360/js/modules/main',
        'modules/player': 'http://localhost:8888/desain360/js/modules/player',
        'modules/progress': 'http://localhost:8888/desain360/js/modules/progress',
        'modules/upload': 'http://localhost:8888/desain360/js/modules/upload',
        'modules/userToggle': 'http://localhost:8888/desain360/js/modules/user-toggle',
        'modules/menu': 'http://localhost:8888/desain360/js/modules/menu',
        'modules/statistic': 'http://localhost:8888/desain360/js/modules/statistic',
        'modules/posts': 'http://localhost:8888/desain360/js/modules/posts',
        'modules/googleCharts': 'http://localhost:8888/desain360/js/modules/google-charts',
        'modules/datePicker': 'http://localhost:8888/desain360/js/modules/datepicker',
    },
    shim : {
        //PLUGINS
        'plugins/modernizr': {
            exports: 'Modernizr'
        },
        'plugins/bootstrap_v3': {
            deps: ['jquery'],
            exports: 'Bootstrap'
        },
        'plugins/datePicker': {
            deps: ['jquery'],
            exports: 'datePicker'
        },
    }
});

And this one is to call requirejs on header:
I have to adding base url also on data-main code: data-main="<cms:show k_site_link/>js/app"

Code: Select all

<script data-main="<cms:show k_site_link/>js/app" src="<cms:show k_site_link/>vendor/require/require.js"></script>

Thankyou for your time KK, it help me so much.
Cheers.