Hosting Astro.js app @Vercel skips static scripts & files

23 viewsastrojsjavascriptvercelweb hosting
0

I have an Astro website, I’m using Around template with it.

That template has already built JavaScript and CSS in the assets folder. Therefore I added the whole assets folder inside a public dir, and just import them using is:inline in my Layout.astro file:

--- import AOS from 'aos'; import 'aos/dist/aos.css' import Navbar from "../components/Navbar.astro"; import Footer from "../components/Footer.astro"; interface Props { title: string; } const {title} = Astro.props; ---

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />

  <!-- SEO Meta Tags-->
  <meta name="description" content="Glyde">
  <meta name="keywords" content="Glyde, Finance, Glyde Money">
  <meta name="author" content="Glyde Team">
  <meta name="generator" content={Astro.generator}/>

  <!-- Favicon and Touch Icons-->
  <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png">
  <link rel="manifest" href="/assets/favicon/site.webmanifest">
  <link rel="mask-icon" color="#6366f1" href="/assets/favicon/safari-pinned-tab.svg">
  <meta name="msapplication-TileColor" content="#080032">
  <meta name="msapplication-config" content="/assets/favicon/browserconfig.xml">
  <meta name="theme-color" content="white">

  <!-- Viewport-->
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>{title}</title>

  <!-- Import Google Font-->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&amp;display=swap" rel="stylesheet" id="google-font">

  <!-- Vendor styles-->
  <link rel="stylesheet" media="screen" href="/assets/vendor/aos/dist/aos.css" />
  <link rel="stylesheet" media="screen" href="/assets/vendor/swiper/swiper-bundle.min.css" />
  <link rel="stylesheet" media="screen" href="/assets/vendor/img-comparison-slider/dist/styles.css" />
  <!-- Main Theme Styles + Bootstrap-->
  <link rel="stylesheet" media="screen" href="/assets/css/theme.min.css">
</head>

<body>
  <Navbar/>
  <main class="page-wrapper">
    <slot/>
  </main>

  <!-- Vendor scripts: js libraries and plugins-->
  <script is:inline src="/assets/vendor/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
  <script is:inline src="/assets/vendor/smooth-scroll/dist/smooth-scroll.polyfills.min.js"></script>
  <script is:inline src="/assets/vendor/aos/dist/aos.js"></script>
  <script is:inline src="/assets/vendor/parallax-js/dist/parallax.min.js"></script>
  <script is:inline src="/assets/vendor/swiper/swiper-bundle.min.js"></script>
  <script is:inline src="/assets/vendor/img-comparison-slider/dist/index.js"></script>
  <script is:inline src="/assets/vendor/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
  <script is:inline src="/assets/vendor/smooth-scroll/dist/smooth-scroll.polyfills.min.js"></script>
  <script is:inline src="/assets/vendor/swiper/swiper-bundle.min.js"></script>
  <script is:inline src="/assets/vendor/simplebar/dist/simplebar.min.js"></script>
  <script is:inline src="/assets/vendor/lightgallery/lightgallery.min.js"></script>
  <script is:inline src="/assets/vendor/lightgallery/plugins/video/lg-video.min.js"></script>
  <script is:inline src="/assets/vendor/lightgallery/plugins/fullscreen/lg-fullscreen.min.js"></script>
  <script is:inline src="/assets/vendor/lightgallery/plugins/zoom/lg-zoom.min.js"></script>
  <!-- Main theme script-->
  <script is:inline src="/assets/js/theme.min.js"></script>
  <script>
    AOS.init()
  </script>

  <Footer />
</body>

</html>

Everything works perfectly locally: AOS lib and all the other libraries that I imported are working correctly. However, when I deploy the app to Vercel using official tutorial, it seems like it doesn’t include that files or can’t see it, as the on scroll animations are off, dynamic testimonials are not working too. How can I fix it? I didn’t change anything in the Vercel config.