Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Server Side Includes? #81

Closed
peterbenoit opened this issue Feb 18, 2018 · 10 comments
Closed

Server Side Includes? #81

peterbenoit opened this issue Feb 18, 2018 · 10 comments
Labels
closed need more info

Comments

@peterbenoit
Copy link

Is there support (or planned support) for SSIs?
@ritwickdey
Copy link
Owner

Are you talking about HTTPS?

@peterbenoit
Copy link
Author

peterbenoit commented Feb 19, 2018 via email

@rjoydip-zz
Copy link
Collaborator

@peterbenoit yes you can do SSI which php support. Link.

@rjoydip-zz
Copy link
Collaborator

I think you got isolation. I am closing this issue now. Thank you for reporting this issue.

@nitech
Copy link

nitech commented Apr 12, 2019

Is server side includes possible in vscode live server?

@dapertutto
Copy link

@rjoydip SSI is server feature, It has nothing to do with PHP. Regarding php actual mature (apache, nginx, etc) server must be set up. If its on why bother with Live Server at all. So the question is: will Live Server support SSI in the future. I choose Live Server for html layout, support for SSI would be nice feature.

@nitech
Copy link

nitech commented May 22, 2019

I wanted SSI in Live Server so I could develop a static HTML-site without repeating code all over. Since it is not supported in Live Server, I ended up creating a little "client side includes" javascript snippet. If anyone is interested, please feel free to use:

Note that it will only allow you to load stuff between the <body>-tags. Tested on IE11, and evergreen version of FireFox and Chrome.

Usage in HTML

<!-- Partial: Hero with Carousel -->
<div data-include="partials/hero-with-carousel.html"></div>

Script

$(function() {
    // process "client side includes"
    processPartials($("div[data-include]"), function() { 
        // continue with the rest of the "on DOM ready" functionality
        processSite()
    });

    function processPartials(selector, callback){
        jQuery.ajaxSetup({async:false});
        
        var partials = selector.toArray();

        while(partials.length > 0){

            // get first item
            var el = $(partials[0]);

            // get contents of include
            $.get(el.data("include"), function(data) {
                var $newElement = $(data);
                el.replaceWith($newElement);
                
                // process possible includes
                $newElement.find("[data-include]").each(function(index, item){
                    partials.push(item);
                });
            }).always(function(){
                // remove this item from partials list
                partials.splice($.inArray(partials[0], partials),1);
            });
        }

        callback();
    }
});

@PowerUzer
Copy link

PowerUzer commented Aug 27, 2019 •
edited
Loading

Check the Live Server browser extension for Chrome (same author as Live Server). You can have VS Code launch IIS Express (which supports SSI, it is a separate extension to install) and then use the Chrome extension which basically bridges Live Server and IIS Express through the browser.

I tested this and it works perfectly. Make sure the file extension is of a type that goes through the SSI handlers that are configured in applicationhost.config, for example index.shtml or index.asp.

@fedegonzal
Copy link

I wanted SSI in Live Server so I could develop a static HTML-site without repeating code all over. Since it is not supported in Live Server, I ended up creating a little "client side includes" javascript snippet. If anyone is interested, please feel free to use:

Note that it will only allow you to load stuff between the <body>-tags. Tested on IE11, and evergreen version of FireFox and Chrome.

Usage in HTML

<!-- Partial: Hero with Carousel -->
<div data-include="partials/hero-with-carousel.html"></div>

Script

$(function() {
    // process "client side includes"
    processPartials($("div[data-include]"), function() { 
        // continue with the rest of the "on DOM ready" functionality
        processSite()
    });

    function processPartials(selector, callback){
        jQuery.ajaxSetup({async:false});
        
        var partials = selector.toArray();

        while(partials.length > 0){

            // get first item
            var el = $(partials[0]);

            // get contents of include
            $.get(el.data("include"), function(data) {
                var $newElement = $(data);
                el.replaceWith($newElement);
                
                // process possible includes
                $newElement.find("[data-include]").each(function(index, item){
                    partials.push(item);
                });
            }).always(function(){
                // remove this item from partials list
                partials.splice($.inArray(partials[0], partials),1);
            });
        }

        callback();
    }
});

Works well, thanks! but should be a native feature on this plugin..

This was referenced Dec 8, 2021
Open
Open
@snyk-bot snyk-bot mentioned this issue Feb 28, 2023
Open
@snyk-bot snyk-bot mentioned this issue Mar 13, 2023
Open
@touchthegold touchthegold mentioned this issue Nov 23, 2023
Open
@lilmoonlil lilmoonlil mentioned this issue Nov 23, 2023
Open
@designly1
Copy link

I wanted SSI in Live Server so I could develop a static HTML-site without repeating code all over. Since it is not supported in Live Server, I ended up creating a little "client side includes" javascript snippet. If anyone is interested, please feel free to use:

Note that it will only allow you to load stuff between the <body>-tags. Tested on IE11, and evergreen version of FireFox and Chrome.

Usage in HTML

<!-- Partial: Hero with Carousel -->
<div data-include="partials/hero-with-carousel.html"></div>

Script

$(function() {
    // process "client side includes"
    processPartials($("div[data-include]"), function() { 
        // continue with the rest of the "on DOM ready" functionality
        processSite()
    });

    function processPartials(selector, callback){
        jQuery.ajaxSetup({async:false});
        
        var partials = selector.toArray();

        while(partials.length > 0){

            // get first item
            var el = $(partials[0]);

            // get contents of include
            $.get(el.data("include"), function(data) {
                var $newElement = $(data);
                el.replaceWith($newElement);
                
                // process possible includes
                $newElement.find("[data-include]").each(function(index, item){
                    partials.push(item);
                });
            }).always(function(){
                // remove this item from partials list
                partials.splice($.inArray(partials[0], partials),1);
            });
        }

        callback();
    }
});

How would lazy loading parts of a web page effect SEO? Wouldn't Lighthouse complain about above the fold content being lazy loaded? Also creates unnecessary HTTP requests. Would make much more sense to use SSG. Not sure why live server doesn't support SSIs still in 2024. I guess there's not a demand for it anymore as everyone uses frameworks.

@Exkaleburx Exkaleburx mentioned this issue Apr 19, 2024
Open
@martossa111 martossa111 mentioned this issue Apr 29, 2024
Open
@irinazheltisheva irinazheltisheva mentioned this issue May 7, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
closed need more info
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
8 participants
@peterbenoit @fedegonzal @nitech @rjoydip-zz @ritwickdey @dapertutto @PowerUzer @designly1