Skip to content

feat: ssg rspress example #102

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

feat: ssg rspress example #102

wants to merge 4 commits into from

Conversation

fiorin
Copy link
Contributor

@fiorin fiorin commented Apr 24, 2025

add an example using Rspress for server static site generator

to make Rspress to work with Zephyr is needed need a custom plugin, but enabling SSG triggers multiple times the build, so it is needed to proper check with thread is the proper one, so a tweak in the plugin does the work:

const zephyrRsbuildPlugin = () => ({
  name: "zephyr-rsbuild-plugin",
  setup(api: { modifyRspackConfig: (config: any) => Promise<void> }) {
    api.modifyRspackConfig(async (config: any) => {
      // this is important to avoid multiple zephyr build triggers
      config.name === "web" && (await withZephyr()(config));
    });
  },
});

@arthurfiorette
Copy link
Member

Please also create a PR on zephyr-packages to add this example to the templates for create-zephyr-apps.

@fiorin
Copy link
Contributor Author

fiorin commented Apr 28, 2025

Please also create a PR on zephyr-packages to add this example to the templates for create-zephyr-apps.

ZephyrCloudIO/zephyr-packages#98

@VladyslavZinchenko
Copy link

@fiorin Have an errors in console, not sure is it an issue,
Also the flow from readme is not working for me
image

artem-sht
artem-sht previously approved these changes Apr 29, 2025
@fiorin fiorin changed the title feat: ssr rspress example feat: ssg rspress example Apr 30, 2025
@fiorin
Copy link
Contributor Author

fiorin commented Apr 30, 2025

Discussed already with @VladyslavZinchenko, but here some context on the PR.

The example is the default implementation from Rspress documentation: here with a Zephyr custom plugin and the SSG flag enabled on the config file:

  ...
  ssg: true,
  builderConfig: {
    plugins: [zephyrRsbuildPlugin()],
  },

The issue with SSG flag was multiple Zephyr triggering on build:

Screenshot from 2025-04-29 18-55-21
Multiple authentication requirement

Screenshot from 2025-04-29 18-55-47
Multiple asset upload

Screenshot from 2025-04-29 18-55-57
Multiple served URL

And after upload the assets, multiple served URL generated, but only the last one proper loading.

image
Wrongly served URL

So the main goal of the implementation was solve the multiple trigger issue, so the tweak in the custom Zephyr plugin:
```
api.modifyRspackConfig(async (config: any) => {
// this is important to avoid multiple zephyr build triggers
config.name === "web" && (await withZephyr()(config));
});


That line assure only the web targeted pipeline will build the application using Zephyr:
![Screenshot from 2025-04-29 18-56-30](https://github.com/user-attachments/assets/b32eb1f9-6aff-464f-a17b-996b8149daba)

As a future next step, it is planned to extract the custom plugin on a shared Rsbuild plugin on the packages repo, to be used along the Rs implementations.

So far, @VladyslavZinchenko pointed some console log errors on the build, and they seem to be related to brand icon on superior navbar for the Rspress default example:
![Screenshot from 2025-04-29 18-56-50](https://github.com/user-attachments/assets/b7c3d413-d8ae-4072-8cdf-344dde499705)
_Top left logo missing on builded example_

If you serve local the logo path seems to be resolved:
![Screenshot from 2025-04-29 18-57-02](https://github.com/user-attachments/assets/49703e96-4f76-4e5e-b547-3ef87e65edcc)
_Top left logo missing on dev served example_

After some exploration, the path confusion seems to be related to the expected public path for the logo in the navbar component, but all the page was built using .md and config files instead a regular .js/.ts code, so it is a edge specific case implementation.

Based on that, porting that implementation to a vanilla web code would solve the issue, instead fixing the rspress example components pre-setted config behavior. Although even that was not worthy the effort since the real goal for this example was to solve the multiple pipeline triggering.

Said that, it is proposed moving forward with this minor case, and keep as future step the Rsbuild shared plugin to be easily incorporated to Rs pipe instead using a custom plugin definition. And keep in sight possible other scenarios for path confusion like this one.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants