Improved Docs for newbies to Vite and mjs

[jonsherrard]

Prerequisites

• I have written a descriptive issue title
• I have searched existing issues to ensure the feature has not already been requested

🚀 Feature Proposal

Hi there!

I have a couple of thoughts about getting started.

1. It's worth putting into the docs "type": "module" - It's a bit embarrassing but I didn't even know node.js supported this! Amazing.
2. It would be good to explain import.meta.url - I have never seen this before and it's hard to google.
3. Using the default React guide and view renders 404 when you try it (even after type.module is set in package.json (it would be good if this worked out of the box - I still haven't got it working 😓
4. Instructions on how to use fastify-cli for automatic server restarts based on watching files.

I see the potential in this project but it's hard for people to get started still (with the React version) and it may put people off!

Thank you for all the work so far!

J

Motivation

I want the initial setup experience for newcomers to be really easy.

Example

It's a documentation thing.

[jonsherrard]

OK I've got it working:

Issue 1. It's worth putting "save this server file as app.mjs" at the beginning, I saved it as server.js and it didn't work.

Issue 2. Only .jsx files are supported for views - I know it's a matter for debate but lots of people save their JSX view files as .js files, so it's worth highlighting that.

Issue 3. The example view doesn't have import React from 'react' - If I was writing from scratch I'd remember that, but as I copied from your docs I didn't notice, and that caused another error.

[jonsherrard]

One more thing to document. Where do the styles come from? How do I get started changing them?

[galvez]

Awesome — thanks for the input @jonsherrard — I'll update the docs this weekend.

[jonsherrard]

No worries!

Also if you start from scratch and try to use some interaction code in your index file:

import React, { useState } from "react";

export default function Index() {
  const [counter, setCounter] = useState(0);
  return (
    <div>
      Value: {counter}
      <button onClick={() => setCounter(counter + 1)}>Increment</button>
      <h1>Hello World this is nice and very fast?</h1>
    </div>
  );
}

export const path = "/";

React isn't working at all.

I think it's something to do with this bug/issue: vitejs/vite#5608

[galvez]

React isn't working at all.

Can you share your repo? I have React apps running fastify-vite-react now that don't have this issue, weird.

[jonsherrard]

@galvez I could well be doing something silly: repro here: https://github.com/devular/fastify-vite-test

[galvez]

This was a breaking change I failed to properly document, my apologies. You need to explicitly import React now.

diff --git a/entry/client.jsx b/entry/client.jsx
index fc6f90a..e125ad1 100644
--- a/entry/client.jsx
+++ b/entry/client.jsx
@@ -1,3 +1,4 @@
+import React from 'react'
 import ReactDOM from 'react-dom'
 import { ContextProvider, hydrate } from 'fastify-vite-react/client.mjs'
 import { createApp } from '@app/client.jsx'