Various improvements to the React boilerplate

[eric-burel]

Hi,

I am working on a project currently and I wanted to documented a few possible improvements for the React boilerplate (I might PR them when I am done):

• There is no 404 setup. We need to add <Route path="*" element={NotFound} /> in App. I couldn't find any official doc about this though, some people seem to debate whether this Route should be the first or the last, or if "path" is necessary... Route component doc doesn't help much. Using it as the first route like this seems to work as expected in my app.
• Path aliases are really useful, they could be configured as a default (need to be done in both vite.config.ts and tsconfig.json)

// tsconfig.json
    "paths": {
      "~/*": "src/*"
    }

// vite.config.ts
  resolve: {
    alias: {
// TS will cringe => see next point about tsconfig
      "~": path.resolve(__dirname, "./src"),
    },
  },

• tsconfig.json should probably be put into src and not at the root. Otherwise, you cannot add a tsconfig at the root of the project for configs (eg having node types loaded to correctly type vite.config.ts. Then you can add a tsconfig.js at the root that is targeted at root config files only. I haven't tested that because we probably need to explicitely tell Vite to look for src/tsconfig.json instead of tsconfig.json. This is the pattern preferred in Next.js apps as well.
• I couldn't have Tailwind to work properly, almost everything work, except that "className='py-2' in a .tsx file won't do anything. It seems that the "py-2" class isn't loaded properly, because if I had "py-2" in index.html, it does apply the style, but also starts working again in the ".tsx" component. Basically, during the step where Tailwind plugins collects all the classes used in your app, it only takes "index.html" into account. I've followed the basic Vite install process, nothing fancy.