Hosting on your own server (round 2)



  • Hi @ivo and @ArneSeib, I'm excited to get working on converting https://fastseas.com to API v3. I'd like to stick with hosting my own JS/CSS though as i maintain it in git and have my own build and deploy methodology. I'm able to get the iframe working easily enough (hosted on a page on my domain). If I host my own JS, is the intended approach that I configure it to get loaded by the iframe using the Windy API Console? By putting a script element in the "head" configuration? and load it from a url in my domain? One concern I have is that JS communication between the parent frame and the child iframe is probably going to be challenging. I'm going to start digging in though and see how this goes.

    Thanks! Jeremy


  • administrators

    Windy API is just simplified www.windy.com client so it must run in iframe. No other solution have been found.

    If we want to make API as a library, like okd API, than we cant provide user controls (since they use CSS fixedbpositioning) and also all commercialy licenced data (for example ECMWF model).

    So far wait few weeks till all issues with API 3.0 will be fixed. We are still working with it.

    IL


  • administrators

    Hmm better to make iframe - parent comm I recommend to put all the codes inside iframe.



  • @ivo I'm ok with the iframe approach. i see the elegance. i've managed to get dynamically loaded js working by adding a block like this to the js config in windy console. the key is appending the external js below where windy inserts the wrapped js; and using the async flag to ensure proper execution order.

    var loadJS = function(url){
        var script = document.createElement('script');
        script.src = url;
        // this is needed to ensure proper execution order:
        script.async = false;
        document.body.appendChild(script);
        console.log('added',url);
    };
    loadJS('https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js');
    loadJS('https://test.fastseas.com/test1.js');
    

    this gets rendered as:

    <script>(function(){
    var loadJS = function(url){
        var script = document.createElement('script');
        script.src = url;
        script.async = false;
        document.body.appendChild(script);
        console.log('added',url);
    };
    loadJS('https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js');
    loadJS('https://test.fastseas.com/test1.js');
    }())</script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://test.fastseas.com/test1.js"></script>
    

    right now, we have at the bottom of the body:

    • dynamic body content
    • dynamic js content (wrapped for us)

    ...in that order. it feels like we need another dynamic block below the wrapped js:

    • dynamic body content
    • dynamic js content (wrapped for us)
    • dynamic end of body content

    either that, or don't wrap the js content for us - insert it as is (folks have to wrap their own js as needed depending on what they are doing). then it could be used for either or both purposes. if you do that, you could consolidate the js and body elements into a single "body" dynamic insert. same could be said for head and css - could made a single "head" insert. so windy console would just offer "head" and "body" and thats it.

    Cheers,
    Jeremy


  • administrators

    Great would be nice to use it.

    So far our head approach does not work (logically since page is already rendered)

    We are thinking that app.html will be statically rendered for each user apps (will be faster delivered) and than head section would be working.

    So far feel free to experiment but we will next weeks doing some improvements and bugfixing so please do not redirect your current traffic there.


  • administrators

    Hi @fastseas , we are currently working on a solution for this as well as the other problem you reported (your script being executed too soon). I will let you know as soon as I have some updates!



  • @ArneSeib ok thanks. When I looked at it last night, it looked like app.html is still doing dynamic dom changes client-side to insert the head and other pieces - and not full rendering app.html server-side.


  • administrators

    @fastseas : I just published a new release where the page is rendered on the backend. This should make external scripts work as you would expect: The tags are in the page already when it arrives at the browser.

    Even if you are planning to have your application completely inside external scripts, I suggest you still use the actual application js to bootstrap your app, since it is called (as a named function) after some basic dependencies were resolved.

    Let me know if this solves your issues!

    Cheers,
    Arne



  • @ArneSeib cool! this is working for me.


Log in to reply
 

Windyty, S.E. - all rights reserved. Powered by excellent NodeBB
NodeBB & contributors, OSM & contributors, HERE maps

Looks like your connection to Windy Community was lost, please wait while we try to reconnect.