Question 198910 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to serve a static JS file in SvelteKit?

I have a JS file that creates an iframe element and appends it to the body. I am planning on having it be used by other websites as a widget. I have it stored in src/lib/static/embed.js. If I am running in dev mode (yarn dev) – I can access said script by going to the path name mentioned above. However, if I build this website using yarn build – I can no longer access it (it’s no where to be found in build folder). How can I serve this JS file to the public? Or maybe I am having a wrong approach to begin with?

PS. I am using a node adapter

Tags:

2

Answers


  1. 0

    When you build your website using yarn build, the build process typically bundles and optimizes your JavaScript files into a single or multiple files. This means that individual JavaScript files may no longer exist in the build folder, as they have been combined or transformed.

    To serve your embedded widget script to the public, you have a few options:

    Inline the script: Instead of loading the script as a separate file, you can directly include it inline in your HTML file. This way, the script will be part of the HTML file and will be served along with it. You can copy the content of your embed.js file and paste it within <script> tags in your HTML file.

    Use a CDN: You can upload your embed.js file to a content delivery network (CDN) or a file hosting service and serve it from there. CDNs are designed for efficient content delivery and can handle high traffic. Once uploaded, you can reference the script file in your HTML using the CDN URL.

    For example, if you upload the file to a CDN and it provides you with a URL like: https://cdn.example.com/embed.js, you can include it in your HTML file using the following code:

    <script src="https://cdn.example.com/embed.js"></script>

    This way, when other websites use your widget, they can include the script directly from the CDN.

    Host the file on your server: If you prefer to host the file on your own server, you can place the embed.js file in a location accessible to the public and serve it through your server. Make sure the file is within a directory that is configured to serve static files.

    If you are using a Node.js server, you can use Express.js as an example to serve static files. Assuming you have an express instance called app, you can add the following code:

    const express = require('express');
const path = require('path');

const app = express();

// Serve static files from the 'public' directory
app.use(express.static(path.join(__dirname, 'public')));

// Start the server
app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

    Then, place your embed.js file in the public directory, and it will be accessible at http://localhost:3000/embed.js.

    You can then include the script in your HTML file using the following code:

    <script src="/embed.js"></script>

    Adjust the path accordingly if your embed.js file is located in a different directory.

    Login or Signup to reply.
  2. 0

    SvelteKit has a special static directory, that serves files as is. It is directly at the root (not within src).

    You could place your file there, note that you could run into caching/versioning issues if you just use /embed.js as the path. Also, the file is not not built, so you cannot import e.g. components, as that would require the Svelte compiler to process the file.

    You might want to just add a regular /embed route instead. To not have it a apply the default layout, you can create a group and put everything else in there (see docs on this).

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search