How to setup WebPack to generate static files from the API data

Developing with Prismic
1

Hello,

I am wondering how to setup the webpack.config.build.js file in order to generate the static files with the data from the Prismic API. I've been searching for awhile and I couldn't find any example. Do you guys have some simple example to share with us?

I am looking for a way of generating the html static files, but having in mind I am using 3 languages with :lang and :uid attribute for the routes. How could we setup this to work with webpack?

Any idea or suggested video/link to see more info about this topic?

Thank you!

2

Hi Nuno,

Have you thought about using a static site generator like Eleventy instead of doing this work by yourself? or am I missing something and there's a reason you want to do this yourself?

Thanks.

4

Hello @Phil and thank you for the reply!

Actually is there a reason, I will try to explain. I've made an online course where we make our own JS, app.js with express and we use Prismic as (headless) CMS. You can take a look on this repo, maybe you can understand it better afterwards: GitHub - LunacTec/floral: This is the result of following and modifiying the Bizarro's awwwards course! Hope you like it (this is the end code from the course)

I was happy that I would be able to use Prismic (specially for its multilingual feature). My problem now is that, for example, I would like to "generate a website" from time to time, like every half a year, for example. Then I would be able to host those files (for free) on Netlify or on a shared PHP hosting.

The main reason I want to use the "shared hosting" is because I am using wordpress to have a "school management backoffice" (just to have the school/students data on the wp-admin and not to have the "public website" in wp).

I would like then, to use this "code from the repo" and to be able to generate the "public website" and host on the same server as that "school backoffice", without having to have an extra special dedicate nodejs server for the "public website". Does it makes sense?

The main point of this course was to build a SPA website, without refresh and with page transitions. I am pretty sure I could do the same with Eleventy, but I would rather keep using this "boilerplate from the course".

I've been looking for 2 weeks for some examples with prismic and webpack, but I can't really find any help or example code on how to handle the data from prismic. I've been realizing this might be a tuff task to do. What's your thoughts?

Thank you!

5

OK, that's very clear for me, thank you. So you don't want to edit the above repo at all, you just need some middleware to generate it before deploying to Netlify.

I don't have much experience with Webpack so I'll reach out to the team to see if they have any recommendations/examples for this.

1 Like
6

So the team suggested using this plugin. Then you could just fetch all Prismic pages before hand to create the array of paths.

7

Hello again @Phil, thank you the help and link.

This looks a bit complicated, but I will try it out and ask somebody for help if needed. At least I have a "path/clue" to follow from now on :slight_smile:

Hope you have a good weekend!

1 Like
8

Hey @ositaka, you could try with a single path that you know exist, then npx serve the build to check you're on the right track and keep going from there. This can give you an idea on how to fetch all documents.

If you use routes resolver, most of your documents probably already have a url property set in the returned document.

1 Like
9

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.