Completely Local / Offline

Bootstrap Studio Help
1

Is it possible to have the site links be completely offline / local such that the pages do not refer to any CDN’s?

I’ve set the export settings to not include any CDN’s. I have the JavaScript locally referenced, but the CSS in the <head> still refers to googleapis.com and cloudflare.

The Internet connection goes down periodically where the site is being used. I would like it so that the users can function while their Internet is temporarily down.

After exporting, I get:

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <link rel="apple-touch-icon" type="image/png" sizes="180x180" href="/assets/img/180x180.png?h=cca7b38d3504b2a35b2de93ffe6eae1f">
    <link rel="icon" type="image/png" sizes="16x16" href="/assets/img/favicon-16x16.png?h=b4c911ef5b017a22f69405e315eaea1b">
    <link rel="icon" type="image/png" sizes="32x32" href="/assets/img/favicon-32x32.png?h=845e466baa1ed4552e9bab3c5d011bf9">
    <link rel="icon" type="image/png" sizes="180x180" href="/assets/img/180x180.png?h=cca7b38d3504b2a35b2de93ffe6eae1f">
    <link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css?h=66c804fb2d3f3cdacc8af20b6df7ba77">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&amp;display=swap">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,900">
    <link rel="stylesheet" href="/assets/fonts/fontawesome-all.min.css?h=37efe7e508357f382d0a5b2b73cd47ee">
    <link rel="stylesheet" href="/assets/fonts/font-awesome.min.css?h=37efe7e508357f382d0a5b2b73cd47ee">
    <link rel="stylesheet" href="/assets/fonts/fontawesome5-overrides.min.css?h=37efe7e508357f382d0a5b2b73cd47ee">
    <link rel="stylesheet" href="/assets/css/styles.min.css?h=7854841eb870adf696c66c8539aac47e">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
</head>

Can the references to the Google fonts and the animate.css be completely local to the web server under the /assets directory?

2

I think you just need to download the file and then import them into your BSS file, then don’t check use cdn in export option, cmiiw

3

If the users internet is down, then they would not be able to access your servers either.

You need to look into pwa and service workers to download the site.

4

The server is local to the building, so if the Internet is down, they can still get to the server.

5

I did that - uncheck use CDN - the JavaScript files appear to be OK (all of them reference /assets for the location), but some of the CSS in the <> still refers to https://

6

Unchecking CDN will only relate to the bootstrap files.

As @raniaamina said, you will need to download the font files and run them locally.

also the same for the animate.css file

7

Thanks for the feedback.

I started a new project. Export the project. The <head> has:

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>Blank-Test</title>
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/styles.css">
</head>

Then, change the Bootstrap Theme in Settings to Sandstone. Then, add something like an <H1> heading and set the Animation in BSS to bounce on hover. The <head> now has:

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>Blank-Test</title>
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&amp;display=swap">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
    <link rel="stylesheet" href="assets/css/styles.css">
</head>

It appears BSS is adding the reference to animate.min.css and also to the Roboto font from Google.

Is it possible to not have the https:// references auto-entered by BSS so that the link references can all be local?

8

Did you download the fonts you use and the animation files and import them into BSS as suggested? As a couple have already mentioned, you need to have the files locally inside BSS in order to cancel out the online referencing of them.

9

The problem you have is the sandstone theme has Roboto built in which is referencing the google fonts link, if you really need to use the sandstone theme then download the original from here:
https://bootswatch.com/5/sandstone/bootstrap.css

Then take out the reference to the font which is in the first line after the comments.

You can also use the following css locally and just give your heading a class of bounce, to save using the built in animations.

@keyframes bounce {
	0%, 100%, 20%, 50%, 80% {
		-webkit-transform: translateY(0);
		-ms-transform:     translateY(0);
		transform:         translateY(0)
	}
	40% {
		-webkit-transform: translateY(-30px);
		-ms-transform:     translateY(-30px);
		transform:         translateY(-30px)
	}
	60% {
		-webkit-transform: translateY(-15px);
		-ms-transform:     translateY(-15px);
		transform:         translateY(-15px)
	}
}
 
.bounce:hover  {
animation-duration: 1s;
animation-name: bounce;
-moz-animation-name: bounce;
}
10

I did download the animation CSS file locally and import it - BSS seems to still reference the https:// version as well.

@richards, thanks for the detailed info - that sounds like the solution - fixup the Sandstone Bootstrap CSS and possibly use a different animation block to avoid the auto-import of the animation file.

Thanks again!

11

You need to setup an actual web server. We run LAMP stacks locally and they do not require internet.

Once you set up your server you should be able to open a web browser and enter the hostname and if you have it configured properly it will show the page. Boostrap will sftp the entire package up to your /www/html folder.

Under export settings uncheck use CDN for libraries
check minify java, minfiy HTML, skip unused images