bronze eagle
I am able to import a local script located in the public/ directory using
<script is:inline src="/libraries/highlight/highlight.min.js"></script>
Do I absolutely need to put my script inside the public directory or would it be possible to place it inside src ?
void shaleBOT
Hi @bronze eagle. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Yes, you can place your script inside the src/ directory. Astro allows you to write your scripts as separate .js/.ts files and reference them in a <script> tag’s src attribute. If your script lives inside of src/, Astro will build, optimize, and add these scripts to the page for you, following its script bundling rules. Here is an example:
<!-- relative path to script at `src/scripts/local.js` -->
<script src="../scripts/local.js"></script>
<!-- also works for local TypeScript files -->
<script src="./script-with-types.ts"></script>
(Source: Astro Documentation (https://docs.astro.build/en/guides/client-side-scripts/))
However, if your JavaScript file lives inside of public/ or on a CDN, you need to load scripts using the is:inline directive. This approach skips the JavaScript processing, bundling, and optimizations that are provided by Astro when you import scripts from the src/ directory. Here is an example:
<!-- absolute path to a script at `public/my-script.js` -->
<script is:inline src="/my-script.js"></script>
<!-- full URL to a script on a remote server -->
<script is:inline src="<https://my-analytics.com/script.js"></script>>
(Source: Astro Documentation (https://docs.astro.build/en/guides/client-side-scripts/))
src/ directory. The public/ directory is for files and assets that do not need to be processed during Astro’s build process. These files will be copied into the build folder untouched. If you place CSS and JavaScript in your public/ directory, those files will not be bundled or optimized in your final build.
bronze eagle
@void shale In your second example, where you use "is:inline", the scripts are still located inside the public/ directory. Is this a requirement ?
void shaleBOT
Let me check the knowledge base for you. One moment! :books:
No, it's not a requirement to place scripts in the public/ directory when using the is:inline directive. The is:inline directive tells Astro to leave the <script> or <style> tag as-is in the final output HTML. The contents will not be processed, optimized, or bundled. This means that the script or style tag will not be bundled into an external file, will not be deduplicated, and will not have its import/@import/url() references resolved relative to the .astro file.
However, the is:inline directive is typically used when your JavaScript file lives inside of public/ or on a CDN. This is because scripts outside of your project’s src/ folder are not processed, bundled, or optimized by Astro.
Here's an example of using is:inline with a script in the public/ directory and a script on a remote server:
<!-- absolute path to a script at `public/my-script.js` -->
<script is:inline src="/my-script.js"></script>
<!-- full URL to a script on a remote server -->
<script is:inline src="<https://my-analytics.com/script.js"></script>>
(Source: Astro Documentation (https://docs.astro.build/en/guides/client-side-scripts/))
But you can use is:inline with a script in the src/ directory as well. Just keep in mind that the script will not be processed, optimized, or bundled by Astro.
<!-- relative path to script at `src/scripts/local.js` -->
<script is:inline src="../scripts/local.js"></script>
is:inline directive is implied whenever any attribute other than src is used on a <script> or <style> tag. So, if you use any other attribute on your script tag, it will be treated as if it had an is:inline directive.
bronze eagle
@void shale I tried "../scripts/local.js", but then my script does not get copied to the build, so the page does not find the js code.
void shaleBOT
Let me check the knowledge base for you. One moment! :books:
When you use the is:inline directive with a script in the src/ directory, Astro does not process, optimize, or bundle the script. This means that the script is not copied to the build directory, which is why your page cannot find the JavaScript code.
If you want Astro to process, optimize, and bundle your script, you should not use the is:inline directive. Instead, you should reference the script in the src attribute of a <script> tag. Here's an example:
<!-- relative path to script at `src/scripts/local.js` -->
<script src="../scripts/local.js"></script>
(Source: Astro Documentation (https://docs.astro.build/en/guides/client-side-scripts/))
When you reference a script in this way, Astro will build, optimize, and add the script to the page for you, following its script bundling rules. The script will be included in the build output, so your page will be able to find the JavaScript code.
If you want to keep your script in the public/ directory and ensure that it is included in the build output, you can reference it using an absolute path:
<!-- absolute path to a script at `public/my-script.js` -->
<script src="/my-script.js"></script>
(Source: Astro Documentation (https://docs.astro.build/en/guides/client-side-scripts/))
public/ directory are copied to the build directory untouched, so your page will be able to find the JavaScript code.