How to access build directory with netlify functions

Support
1

Is there a way to access my vue/react/SPA build directory from a netlify function?

With netlify dev I could simply access the file system, e.g. with fs.readdirSync('./dist/assets'). However, that doesn’t work after deploy, because, as I just learned, netlify functions and the SPA build run at entirely different places.

Put differently, my question is: How can my netlify function read files from the rest of my netlify deploy?

Why

I want to enhance some routes of my SPA with SSR-generated HTML headers, like <meta property="og:titlle" ...> to get the sweet SEO :candy:. My netlify function fetches data from my API first and then serves the enriched index.html as a string with headers: { 'Content-Type': 'text/html' }. :+1::robot: The bots are parsing the pages as I hoped.

:tv: However, displaying the same page to normal users from within my SPA is difficult because my build process uses automatic hashes in generated file names (like /dist/assets/index.d4f62007.js). So, I’m trying to include the JS and CSS assets of my build by amending the HTML string the function serves like so:
<script type="module" crossorigin src="/assets/${assets.index}"></script>
Where assets.index would be a string, pointing to the JS file with a hash.

Is that possible?

2

I haven’t understood this part exactly even after reading it multiple times, but I think I’ve got the gist of the question. If not, do correct me.

My first instinct would say, try to build without hashes in the file name if possible. This leads to cache busting and thus, would slow down your website on Netlify as Netlify handles cache in its own way. NuxtJS, for example has an option to disable hashes in file name. Check if your SSG has such an option.

Moving on, you can actually see what files you have in your website, so you could dynamically reference them in your functions. You’d have to use Netlify API for that. You can get your site’s deploy’s files as an array and then probably use regex to select the required files to process and do the needful accordingly. Would that be helpful?

1 Like
3

Hi @hrishikesh,

thanks for the hint on my cache busting strategy. I thought I needed filename hashing, but I should have had RTFM. This makes my entire point moot because now I know the filename beforehand.

But, for posterity: Using the netlify API is indeed the right track; more specifically, the files endpoint seems to be appropriate.

Btw: thanks for trying to parse that sentence there. What I meant was that my netlify function returns text/html. This return value is a template literal (string with surrounding ` instead of ") that I build during the execution of the function. And in that template literal is an embedded expression ${assets.index} that contains the file name of the index.[hash].js file.

4

Thank you for clarifying. It was close to what I had understood, but yeah now it’s better. And yes, you’ve got the correct API, that would help you get the list and you can do the filtering as you see fit. Do note, the API is rate-limited so do not overuse it.

1 Like