Local host (Offline)

[bdahle]

Hello,

I’m hoping to be able to create a website with webflow, and export the code and host it locally on a computer with very poor and unreliable internet connection. The website will include photos, video and audio clips.

I’ve reviewed other posts that are on this topic, and from what I understand it can be done.

From this post, I understand that the issues arise when you use custom JS or CSS and googlefonts.

Using the website offline

Hello. I have a small question regarding using Webflow.After i create my website is it possible to use it offline also?I saw that there are possibilities to save the html and css.I am asking this because i want to use it also on a PC with limited internet bandwith. Thank you very much.

And this post describes how to work around having the video (and audio I’m assuming) hosted externally by redefining the source to a filepath.

Embed video for offline presentation

Can I somehow embed a video in a Webflow presentation I built so it plays even without an online connection? This is very important for a client I have. I hope anyone has a clear answer for me. I have read a topic from someone who did HTML5 video conversions (through the $60 EasyHTML5Video app, which seems to do the same as the free Miro Convertor App) and was able to host the video locally through the use of a html widget. It worked after doing an export – but the free version of Webflow does…

Before I go ahead with this project, I’m wondering if anyone has any experience in this and any unexpected issues? Or anything that I should be aware of.

Thanks very much!
B

[Karl-Heinrich (Tobias)]

Hi @bdahle,

you can make your website work offline using service worker. The website will only load once and be stored in cache. You can then hijack the browser request and serve the offline version instead of retrieving it from the web. If its just a website, it is very easy to do. I have yet to encounter any issue with my exported webflow site. Everything works as expected.

I am using Visual Studio Code for this. To host it on your localhost, you can use a basic HTTP server. Like this one. Though, with the ability to have your website work offline, you can just upload it anywhere and enjoy the offline version of your website.

Here is the code snippet that does all the magic.

self.addEventListener('install', function(e) {
  e.waitUntil(
    caches.open('the-magic-cache').then(function(cache) {
      return cache.addAll([
        '/',
        '/css/greatgatsby.webflow.css',
        '/css/normalize.css',
        '/css/webflow.css',
        '/fonts/Relancer-Regular.otf',
        '/fonts/TheFontGatsby.otf',
        '/images/Favicon.png',
        '/images/hipster-outfit.svg',
        '/images/hipster-pfeife.svg',
        '/images/hipsterparty-greatgatsby.svg',
        '/images/hipsteruhr.svg',
        '/images/icon-144.png',
        '/images/icon-192.png',
        '/images/Marco-Angelina.svg',
        '/images/schallplatte.svg',
        '/images/Webclip.png',
        '/js/app.js',
        '/js/modernizr.js',
        '/js/webflow.js',
        'index.html',
        'manifest.json',
        'sw.js',
      ]);
    })
  );
});

self.addEventListener('fetch', function(event) {
    event.respondWith(
        caches.match(event.request).then(function(response) {
            return response || fetch(event.request);
        })
    );
});

[bdahle]

Hi @Karl-Heinrich

Thank you so much for your reply! I have a couple questions.

1. Scanning the code snippet you provided, it appears that the css, fonts, images, etc will have to be manually added to the code to tailor it to my website?

2. For video/audio, this method still requires that the source be redirected to a filepath, correct? And not hosted externally.

3. Where does this code go? Is it added to the index.html after export, and if so where? Or is it placed in the embed component?

4. To use Web Server for Chrome, from what I can see, you just need to “Choose Folder” and place the exported website at that location, and enter the Web Server URL into the browser, load it once in internet and then it should be able to run? Am I missing a step there?

Thank you very much!

[Karl-Heinrich (Tobias)]

Hi @bdahle

Sorry I couldn’t visit the forum for a while.
Answering your questions:

1. No, not at all. You can add them manually if you only have a static website. If you have something dynamic, like blog posts, you can use this and the additional assets will automatically be added to your chache-list.

2. It really does not matter what assets you put in your cache. However, if you want the videos stored offline then yes.

3. You put the scripts in your <head> tag of your website. Also, every page you have needs to register the service worker. So you either put your app.js script on every page or you put it in a script which gets executed on every page, e.g. webflow.js. I made some screenshots for your reference.

4. Place your website whereever you want. Then choose folder and set the webserver to that location. For ports, you can use 8887 for example. Then your website will be available under this address http://127.0.0.1:8887 As long as the webserver runs, the website will be available in YOUR network (e.g. WLAN, so all your devices that you have in your LAN will be able to access your localhost)

How far have you come since we last talked?

Best,
Karl-Heinrich

[bdahle]

Hi @Karl-Heinrich

No problem! I haven’t actually started to build the website yet, we are still in design stage, but I would like to work out the technical details before we get started so I’m doing some simple tests.

1. Okay, it will be a static website as we will not be using CMS at this time.

2. Ok, I’m struggling with that a bit actually. I have virtually no coding experience. So, what I did was use the video widget to connect to a random youtube video, and I exported the code and looking at it, it seems the widget uses an iframe to show the youtube video. I played around with the code to try to reroute it to a video within a folder I created called videos, but I couldn’t get it to work…

Here is my super simple one photo and one video website:

Here is one of the versions I tried:
I assumed I had to take out the iframe, and just replace it with simple

Do you see my mistake??

3. Ok, I think I follow the concept, and since I’ll likely have many pages, I like the idea of putting it in the webflow.js script. I’m still a little lost with the screenshots. The first “if” function, where does that go? on the 15th line of webflow.js?

4. I’ll try this once I get the 3rd step figured out, but I think I follow.

Again, thank you so much for helping me out! I really appreciate it!
Bree