Config: Migrate from CRA to Vite (wait for release 1.9.0 to merge)

[drikusroor]

I would hereby like to propose to think about migrating from CRA (Create React App) to Vite. CRA - which runs on Webpack under the hood - is a facebook/create-react-app#13072 and the React team no longer recommends it (CRA used to be on that page). They do recommend things like Next.js or Remix, which we could also consider, but those projects require a completely different setup (with server-side rendering). For our situation - serving a build of static assets - Vite is probably the best option. I have used Vite in React projects before and I have also migrated CRA projects to Vite before. Apart from the fact that CRA is no longer maintained, Vite also has benefits:

It's way faster (hence the name, Vite is fast in French)
It has typescript built-in, making it easier to migrate to typescript if we want to
For the rest not much changes. The application works more or less the same. There are some files and folders that need to be in a different location and the environment variables are no longer to be prefixed with REACT_APP_, but with VITE_.

[BeritJanssen]

Why?

[drikusroor]

Why?

A very good question! Apparently I have forgotten to provide a proper explanation in the PR description 😅 So yes, I would hereby like to propose to think about migrating from CRA (Create React App) to Vite. CRA - which runs on Webpack under the hood - is a deprecated / dead / no longer maintained project and the React team no longer recommends it (CRA used to be on that page). They do recommend things like Next.js or Remix, which we could also consider, but those projects require a completely different setup (with server-side rendering). For our situation - serving a build of static assets - Vite is probably the best option. I have used Vite in React projects before and I have also migrated CRA projects to Vite before. Apart from the fact that CRA is no longer maintained, Vite also has benefits:

• It's way faster (hence the name, Vite is fast in French)
• It has typescript built-in, making it easier to migrate to typescript if we want to

For the rest not much changes. The application works more or less the same. There are some files and folders that need to be in a different location and the environment variables are no longer to be prefixed with REACT_APP_, but with VITE_.

[BeritJanssen]

Nice! Still have to see how it plays out in practice. Please do change the VITE_... variable names to something more descriptive, see my comments. Users need to at least have an idea of what these variables are for.

[BeritJanssen]

Can you please still change the variable names here? Either leave it as REACT (since we're still serving / building React here), or change to FRONTEND. The last setting in this list (STRICT) is arguably a React setting, right?

[drikusroor]

Can you please still change the variable names here? Either leave it as REACT (since we're still serving / building React here), or change to FRONTEND. The last setting in this list (STRICT) is arguably a React setting, right?

That's not possible. CRA requires REACT_APP as prefix, but Vite requires VITE_ as prefix for environment variables.

[BeritJanssen]

All the variable names were chosen and set by ourselves. So if it says "process.env.REACT_APP..." in the code somewhere, that comes from this environment variable. This doesn't have anything to do with CRA, as far as I'm aware.
My bad: turns out that indeed CRA auto-ignores all environment variables not prefixed with REACT_APP, and then Vite must have similar behaviour, but for VITE. Would our internal variables perhaps still deserve a more descriptive name? So that we have in the docker-compose: VITE_SOMETHING=${FRONTEND_SOMETHING}? Or do you think this might be even more confusing?

[drikusroor]

All the variable names were chosen and set by ourselves. So if it says "process.env.REACT_APP..." in the code somewhere, that comes from this environment variable. This doesn't have anything to do with CRA, as far as I'm aware. My bad: turns out that indeed CRA auto-ignores all environment variables not prefixed with REACT_APP, and then Vite must have similar behaviour, but for VITE. Would our internal variables perhaps still deserve a more descriptive name? So that we have in the docker-compose: VITE_SOMETHING=${FRONTEND_SOMETHING}? Or do you think this might be even more confusing?

Yeah, we can definitely do that, especially since we have to update our environment variables anyway 👍