У меня есть некоторые проблемы с моим веб-проектом Firebase. Я пытаюсь подключить свой хостинг Firebase к функциям, чтобы я мог преобразовать его в более динамичное приложение c и использовать функции кэширования, которые предоставляют функции.
Но каждый раз, когда я пытаюсь служить мое приложение мое окно продолжает загружаться - почти как оно застряло или тянет большой файл. Затем через некоторое время приходит сообщение об ошибке для моих таблиц стилей (Bootstrap и пользовательский лист)
Вот скриншот из Chrome Это первое консольное сообщение Я беспокоюсь о ..
Мой код выглядит так Обратите внимание, что я использую руль с express. Я в основном следую собственному руководству по настройке Firebase: https://www.youtube.com/watch?v=LOeioOKUKI8&feature=emb_logo
const functions = require('firebase-functions');
const firebase = require('firebase-admin');
const express = require('express');
const engines = require('consolidate');
const hbs = require('handlebars');
const firebaseApp = firebase.initializeApp(
functions.config().firebase
);
// App settings
const app = express();
app.use(express.static('Misophonia_web/public/public'))
app.engine('hbs', engines.handlebars);
app.set('views','./views');
app.set('view engine', 'hbs');
// Routes
app.get('/', (request, response) => {
response.set('Cache-Control', 'public, max-age=300, s-max-age=600');
response.render('index.hbs');
});
// Firebase export
exports.app = functions.https.onRequest(app);
/* Overall static elements and styles */
html {
height: 100%;
}
body {
background-color: white;
font-family: Arial, Helvetica, sans-serif;
height: 100%;
/* Misophonia colors */
--main-blue-color: #1B508E;
--miso-white: #fefefe;
--miso-black: #1b2128;
--miso-pink: #dbd3d6;
--miso-dark-blue: #132647;
--miso-grey: #a2a3a3;
/* Other colors for designs */
--main-blue-color: #1B508E;
}
h1 {
font-family: 'Ramabhadra', sans-serif;
font-size: 115px;
font-weight: bold;
}
h2 {
font-family: 'Ramabhadra', sans-serif;
font-size: 75px;
font-weight: bold;
color: var(--miso-dark-blue);
}
h3 {
font-family: 'Ramabhadra', sans-serif;
font-size: 36px;
font-weight: bold;
}
h4 {
font-family: 'Ramabhadra', sans-serif;
font-size: 29px;
}
p {
font-family: 'Roboto', sans-serif;
font-size: 25px;
font-weight: 300;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
/* Cookie banner */
#cookie {
z-index: 2;
}
#cookie-banner {
background: var(--miso-dark-blue);
color: var(--miso-white);
font-size: 16px;
position: absolute;
bottom: 0px;
width: 100%;
height : 100px;
padding-top: 10px;
padding-left: 25px;
padding-right: 25px;
padding-bottom: 10px;
transition: 500ms;
}
#cookie-banner p {
font-size: 16px;
}
.cookie-button {
color: var(--miso-white);
font-size: 15px;
background-color: var(--miso-dark-blue);
border: 2px solid var(--miso-dark-blue);
width: 200px;
transition: 500ms;
}
.cookie-button:hover {
opacity: 75%;
}
/* Misophonia front page title styles */
.misophonia {
color: var(--miso-white);
transition: 1.5s;
font-weight: bold;
transition-timing-function: ease-in-out;
}
.misophonia:hover {
color: var(--miso-dark-blue);
transition: 1.5s;
font-weight: bold;
}
#cover-image {
background-image: url('../imgs/miso-1.png');
background-size: cover;
background-repeat: no-repeat;
height: 100%;
max-height: 1200px;
transition: 1s;
transition-delay: 500ms;
transition-timing-function: ease-in-out;
z-index: 1;
}
#cover-image:hover {
background-image: url('../imgs/miso-cover.png');
background-size: cover;
background-repeat: no-repeat;
height: 100%;
max-height: 1200px;
}
.vertical-center {
min-height: 100%; /* Fallback for browsers do NOT support vh unit */
min-height: 100vh; /* These two lines are counted as one :-) */
display: flex;
align-items: center;
}
/* Text area */
#intro {
margin-top: 150px;
margin-bottom: 150px;
}
#welcome-header {
margin-bottom: 100px;
text-align: justify;
}
.welcome-text {
font-size: 60px;
font-weight: bold;
color: var(--miso-dark-blue);
}
.welcome-text-bottom {
font-size: 60px;
font-weight: bold;
color: var(--miso-dark-blue);
padding-top: 150px;
}
/* Table of content area */
#tabel-of-content-header h2 {
font-family: 'Ramabhadra', sans-serif;
font-size: 65px;
font-weight: bold;
color: var(--miso-white);
}
#table-of-content {
background-image: url('../imgs/miso-3.png');
background-size: cover;
margin-top: 100px;
padding-bottom: 100px;
padding-top: 50px;
transition: 1s;
transition-delay: 500ms;
transition-timing-function: ease-in-out;
}
.content-area {
background-color: var(--miso-white);
color: var(--miso-black);
padding: 15px 25px 10px 25px;
border: 5px solid var(--miso-dark-blue);
border-radius: 10px;
margin-left: 12px;
margin-right: 12px;
box-shadow: 0px 0px 20px var(--miso-dark-blue);
}
.content-area p {
font-size: 20px;
}
/* Chapter styles */
#chapter-1 {
background-image: url('../imgs/Noise/noise-hover.png');
background-size: cover;
background-color: var(--miso-dark-blue);
color: var(--miso-white);
transition: 2s;
}
#chapter-2 {
background-image: url('../imgs/the-london-heart/IMG_6444.jpg');
background-size: cover;
background-color: var(--miso-dark-blue);
color: var(--miso-white);
transition: 2s;
}
#chapter-3 {
background-image: url('../imgs/i-hide/i-hide-gif-1.gif');
background-size: cover;
background-color: var(--miso-dark-blue);
color: var(--miso-white);
transition: 2s;
}
#chapter-4 {
background-image: url('../imgs/BLAA/img1.jpg');
background-size: cover;
background-color: var(--miso-dark-blue);
color: var(--miso-white);
transition: 2s;
}
#chapter-5 {
background-image: url('../imgs/nights/IMG_6507.jpg');
background-size: cover;
background-color: var(--miso-dark-blue);
color: var(--miso-white);
transition: 2s;
}
#chapter-6 {
background-image: url('../imgs/today/today.jpg');
background-size: cover;
background-color: var(--miso-dark-blue);
color: var(--miso-white);
transition: 2s;
}
#chapter-7 {
background-image: url('../imgs/cover/IMG_5307.jpg');
background-size: cover;
background-color: var(--miso-dark-blue);
color: var(--miso-white);
transition: 2s;
}
.chapter-btn {
color: var(--miso-white);
font-size: 30px;
background-color: var(--miso-dark-blue);
border: 3px solid var(--miso-dark-blue);
width: 200px;
box-shadow: 0px 0px 5px var(--miso-dark-blue);
transition: 500ms;
font-size: 20px;
margin-top: 25px;
margin-bottom: 15px;
}
.chapter-btn:hover {
opacity: 85%;
}
/* Next button */
.next-button {
color: var(--miso-white);
font-size: 30px;
background-color: var(--miso-dark-blue);
border: 3px solid var(--miso-dark-blue);
width: 275px;
box-shadow: 0px 0px 5px var(--miso-white);
transition: 500ms;
margin-top: 25px;
margin-bottom: 25px;
}
.next-button:hover {
color: var(--miso-white);
font-size: 30px;
background-color: var(--miso-dark-blue);
border: 3px solid var(--miso-dark-blue);
transition: 1s;
box-shadow: 0px 0px 20px var(--miso-dark-blue);
}
/* Footer section */
#footer {
margin-top: 25px;
margin-bottom: 25px;
color: var(--miso-black);
}
#footer a {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
text-transform: uppercase;
color: var(--miso-black);
padding-top: 20px;
padding-bottom: 20px;
padding-left: 25px;
padding-right: 25px;
transition: 1s;
}
#footer a:hover {
background-color: var(--miso-dark-blue);
color: white;
}
/* Media queries */
@media only screen and (max-width: 600px) {
h1 {
font-size: 45px;
}
h2 {
font-size: 27px;
}
h3 {
font-size: 25px;
}
h4 {
font-size: 25px;
}
p {
font-size: 15px;
}
.welcome-text {
font-size: 25px;
}
.welcome-text-bottom {
font-size: 25px;
}
#tabel-of-content-header {
font-size: 27px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
{{!-- <script async src="https://www.googletagmanager.com/gtag/js?id=UA-145407129-2"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-145407129-2');
</script> --}}
<!-- Boilerplate -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Bootstrap link -->
<link rel="stylesheet" type="text/css" href="./css/library/bootstrap.min.css">
<!-- Stylesheet -->
<link rel="stylesheet" type="text/css" href="/Misophonia_web/public/index.css">
<!-- Google fonts -->
<link href="https://fonts.googleapis.com/css?family=Ramabhadra|Roboto:400,900&display=swap" rel="stylesheet">
<!-- AOS scroll -->
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css"/>
<!-- Page begins -->
<title>misophonia • misophonia, a visual experience • GO BY LUCK</title>
</head>
<body>
<section id="cookie">
<div id="cookie-banner">
<p>'misophonia, a visual experience' only uses cookies for analytics purposes. If you wish to learn more, then you can read our cookie policy.</p>
<a href="./cookies"><button class="cookie-button">READ COOKIE POLICY</button></a>
<button id="close-cookie-banner" class="cookie-button">THAT'S OK WITH ME!</button>
</div>
</section>
<section id="cover-image" data-aos="fade-in">
<div class="d-flex justify-content-center vertical-center">
<h1 class="misophonia">misophonia</h1>
</div>
</section>
<section id="intro">
<div class="container-fluid">
<div class="row mb-3" data-aos="fade-in">
<div class="col-sm-12 col-md-12 col-lg-12 col-xl-12">
<div class="d-flex justify-content-center">
<h1 id="welcome-header">misophonia, <br> a visual experience</h1>
</div>
</div>
</div>
</div>
<div class="container-fluid" data-aos="fade-in">
<div class="row d-flex justify-content-center">
<div class="col-sm-10 col-md-10 col-lg-10 col-xl-10">
<div>
<p class="welcome-text">
If you’re reading this, it means that misophonia has officially been released from its digital cage and is now living in the world around us.
</p>
<p class="welcome-text">
It’s been 3 years since I first sat down in my small bedroom in East London and started recording what has now grown to become a full-length hour-long album, ‘misophonia’. It’s been a long, fragile, powerful but extremely inspiring process to make this record. I hope you find that it sounds unique and personal.
</p>
<p class="welcome-text">
With ‘misophonia’ the idea was always to experiment a lot, especially with creating different universes and sonic worlds, from old home-recorded samples, vocals as well as hard (and soft) synthesizers. I would like to believe that misophonia is a pretty vivid and texturized album full of perfect imperfections.
</p>
<p class="welcome-text">
The point of this website is to be a hyperzine. A place that acts as a 'behind-the-scenes' and tells the story of ‘misophonia'.
</p>
<p class="welcome-text">
Thank you for your time and for listening to ‘misophonia’.
</p>
<p class="welcome-text">
Yours sincerely, <br>
Gustav <br>
GO BY LUCK <br>
</p>
<p class="welcome-text-bottom">
Ps. <br> This site is best experienced on a full-scale browser. Should you visit it on your phone, then please try not to go too far and use a full-scale browser instead. <br> I promise it will be worth it.
</p>
</div>
</div>
</div>
</div>
</section>
<section id="table-of-content">
<div class="container-fluid">
<div class="row mt-4">
<div class="col-sm-12 col-md-12 col-lg-12 col-xl-12 mt-3 mb-2" id="tabel-of-content-header">
<div class="d-flex justify-content-center">
<h2>TABLE OF CONTENTS</h2>
</div>
</div>
</div>
<div class="d-flex justify-content-center">
<a href="./noise"><button type="button" class="btn btn-outline-primary next-button mb-5">Start Chapter I</button></a>
</div>
<div class="row mt-4 d-flex justify-content-center">
<div class="col-sm-10 col-md-10 col-lg-6 col-xl-6 content-area mt-3" id="chapter-1">
<h3>Chapter I</h3>
<h4>misophonia is noise</h4>
<p>Noise is everything in misophonia</p>
<a href="./noise"><button class="chapter-btn">GO TO CHAPTER</button></a>
</div>
</div>
<div class="row mt-4 d-flex justify-content-center" data-aos="fade-in">
<div class="col-sm-10 col-md-10 col-lg-6 col-xl-6 content-area mt-3" id="chapter-2">
<h3>Chapter II</h3>
<h4>The heart of London</h4>
<p>London: throwback</p>
<a href="./london"><button class="chapter-btn">GO TO CHAPTER</button></a>
</div>
</div>
<div class="row mt-4 d-flex justify-content-center" data-aos="fade-in">
<div class="col-sm-10 col-md-10 col-lg-6 col-xl-6 content-area mt-3" id="chapter-3">
<h3>Chapter III</h3>
<h4>'I hide'</h4>
<p>'I hide' <br> (the super secret long version)</p>
<a href="./hide"><button class="chapter-btn">GO TO CHAPTER</button></a>
</div>
</div>
<div class="row mt-4 d-flex justify-content-center" data-aos="fade-in">
<div class="col-sm-10 col-md-10 col-lg-6 col-xl-6 content-area mt-3" id="chapter-4">
<h3>Chapter IV</h3>
<h4>BLAA, BLUE, Blå</h4>
<p>Blue photos</p>
<a href="./blaa"><button class="chapter-btn">GO TO CHAPTER</button></a>
</div>
</div>
<div class="row mt-4 d-flex justify-content-center" data-aos="fade-in">
<div class="col-sm-10 col-md-10 col-lg-6 col-xl-6 content-area mt-3" id="chapter-5">
<h3>Chapter V</h3>
<h4>the night I wrote 'Point & Shoot'</h4>
<p>All night I wrote</p>
<a href="./nights"><button class="chapter-btn">GO TO CHAPTER</button></a>
</div>
</div>
<div class="row mt-4 d-flex justify-content-center" data-aos="fade-in">
<div class="col-sm-10 col-md-10 col-lg-6 col-xl-6 content-area mt-3" id="chapter-6">
<h3>Chapter VI</h3>
<h4>Today, tomorrow</h4>
<p>It's not time to say goodbye</p>
<a href="./today"><button class="chapter-btn">GO TO CHAPTER</button></a>
</div>
</div>
<div class="row mt-4 d-flex justify-content-center" data-aos="fade-in">
<div class="col-sm-10 col-md-10 col-lg-6 col-xl-6 content-area mt-3" id="chapter-7">
<h3>Chapter VII</h3>
<h3>Sleeve notes</h3>
<p>Thank you!<br> and bye-bye!</p>
<a href="./sleeve-notes"><button class="chapter-btn">GO TO CHAPTER</button></a>
</div>
</div>
</div>
</section>
<section id="footer">
<div class="d-flex justify-content-left">
<a href="./cookies">Cookie & privacy policy</a>
</div>
</section>
<!-- Scripts -->
<script src="../js/mobile/mobile-detection.js"></script>
<script src="../js/cookie-banner.js"></script>
<!-- Obligatory bootstrap code -->
<script src="../js/library/bootstrap.min.js"></script>
<!-- AOS Scroll -->
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init();
</script>
</body>
</html>
Я надеюсь, что кто-то может мне помочь! Заранее спасибо!