Create SPA with React and Vite

[Mathieuka]

Issue #20

Description: In WIP...

Checklist

• run npm run test and npm run benchmark
• tests and/or benchmarks are included
• documentation is changed or added
• commit message and code follows the Developer's Certification of Origin
  and the Code of conduct

[Mathieuka]

@jean-michelet SonarCloud generates errors on pieces of code that are accepted or by design correct, like for example here in the test we have an error of a nested function, it is possible to configure it so that it can give us correct feedback or it is accepted which fails permanently and that we force merge ?

[jean-michelet]

If now the tests are in /server/test, you should update this file.

If you think some files or entire folders should not be checked by sonarcloud, you should indicate them too.

For false positive, I will review them directly on the dashboard of the website, and accept the changes there.

[jean-michelet]

You could not leverage https://fastify-vite.dev/?

[Mathieuka]

 @jean-michelet to guide our decisions, what is the business objective of the demo application SPA ?

Architectural Evolution

Separation of Concerns:
• Created separate server and client folders for better separation of responsibilities and thus maintain maintainability.

Server-side Changes:
• No changes to the server component itself.
• Updated execution path in the CI job and SonarQube configuration

Client-side Changes:
• Create an SPA with Vite, React and Typescript
• Added README documentation.
• Installed Prettier with rules identical to those of the server (use of single quotes).

Initial proposal, points to Define:
• Testing strategy will be defined according to the complexity of the application.
• Use CSS modules and vanilla CSS, consider adding a preprocessor or UI library only if necessary in the future

Before proceeding with further implementation, this draft is open for your suggestions and comments

cc: @EnzoDOROSARIO

[sonarqubecloud]

Quality Gate passed

Issues
1 New issue
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[Mathieuka]

You could not leverage https://fastify-vite.dev/?

This is relevant, if the goal is to demonstrate the use of Fastify for the generation of the SSR rendering for the client side in addition to the Fastify server

If the main purpose of the demo is to present the Fastify server and the SPA exists as a pretext to consume the API, that's different.

@jean-michelet this comes back to my initial question which is what is the business objective of the demo and here specifically of the SPA application?

[jean-michelet]

The aim was to introduce Fastify/vite, in particular the react part for an SPA or even an SSR (next style) if you're prepared to put in the necessary effort: https://fastify-vite.dev/react/.

Bad news

The package does not integrate typescript well and there are probably other areas to improve directly on the package.
Unlike Fastify's backend components, there's a real lack of contributors, the maintainer really needs help: https://fastify-vite.dev/contributing.

Good news

If you really want to contribute to opensource and develop Fastify ecosystem.

My advice is to read carefully the comments on this PR I started a while ago.

@galvez is the main contributor

@onlywei has already started some work about TypeScript integration.

[Mathieuka]

Sync @jean-michelet, I am in discussion with @galvez to certainly make an implementation with fastify/vue

fastify/react not being ready for production