# Frontends 

## React 

Gadget applications come with built-in hosted React frontends. Like your Gadget app's backend and database, this React frontend is live on the internet so you can develop and build in a development environment that looks and acts similar to production.

## Vite 

Gadget React frontends are powered by [Vite](https://vitejs.dev/). With Vite, developers can build amazing frontends that enhance the developer experience, all without having to manage the complexities of deploying.

Vite offers a range of features such as:

1.  **Fast development server:** Vite leverages native ES modules in modern browsers to provide an incredibly fast development server. It utilizes an on-demand compilation approach, which means it only rebuilds the parts of the application that have changed, resulting in faster reload times during development.
    
2.  **Instant server start:** Vite starts the development server almost instantly, which reduces the initial startup time for your React app. This can significantly speed up the development workflow, especially for larger projects.
    
3.  **Optimized build process:** When it comes to production builds, Vite optimizes the build process by leveraging ES module bundling. It generates highly optimized, minified, and tree-shaken production bundles, resulting in smaller file sizes and improved loading performance.
    
4.  **ES module support:** Vite natively supports ES modules, which are the modern standard for organizing and loading JavaScript modules. This allows you to write modular code using import/export statements, making it easier to manage dependencies and improve code maintainability.
    
5.  **Hot module replacement (HMR):** Vite provides built-in support for Hot Module Replacement, allowing you to see immediate changes in your React app without needing a full page reload. HMR improves development efficiency by preserving the application state during code changes and updating only the affected modules.
    
6.  **Plugin ecosystem:** Vite has a rich plugin ecosystem that offers various extensions to enhance the development experience. These plugins can provide additional features such as TypeScript support, CSS preprocessing, and integrations with popular frameworks and libraries.
    

**Fast development server:** Vite leverages native ES modules in modern browsers to provide an incredibly fast development server. It utilizes an on-demand compilation approach, which means it only rebuilds the parts of the application that have changed, resulting in faster reload times during development.

**Instant server start:** Vite starts the development server almost instantly, which reduces the initial startup time for your React app. This can significantly speed up the development workflow, especially for larger projects.

**Optimized build process:** When it comes to production builds, Vite optimizes the build process by leveraging ES module bundling. It generates highly optimized, minified, and tree-shaken production bundles, resulting in smaller file sizes and improved loading performance.

**ES module support:** Vite natively supports ES modules, which are the modern standard for organizing and loading JavaScript modules. This allows you to write modular code using import/export statements, making it easier to manage dependencies and improve code maintainability.

**Hot module replacement (HMR):** Vite provides built-in support for Hot Module Replacement, allowing you to see immediate changes in your React app without needing a full page reload. HMR improves development efficiency by preserving the application state during code changes and updating only the affected modules.

**Plugin ecosystem:** Vite has a rich plugin ecosystem that offers various extensions to enhance the development experience. These plugins can provide additional features such as TypeScript support, CSS preprocessing, and integrations with popular frameworks and libraries.

## @gadgetinc/react 

[`@gadgetinc/react`](https://docs.gadget.dev/reference/react) is a package built-in to your Gadget frontend that provides a powerful set of React hooks for connecting to your Gadget backend application from a React application.

This library wraps [urql](https://formidable.com/open-source/urql/docs/) to communicate with a Gadget-generated API, so it benefits from all of the same features as urql as well.

**Key features include:**

1.  Rule-obeying hooks for reading and writing data from a backend that handle all request lifecycle and auth like `useFindOne`, `useActionForm`, etc
    
2.  A full-featured, GraphQL-powered nested object selection system using the select option
    
3.  Full type safety for inputs and outputs driven by each Gadget app's backend schema, including over dynamic selections
    
4.  Data hydrations that return useful objects like `Dates`
    
5.  [Realtime query](https://docs.gadget.dev/guides/frontend/realtime-queries) support for automatically re-rendering when backend data changes
    

Rule-obeying hooks for reading and writing data from a backend that handle all request lifecycle and auth like `useFindOne`, `useActionForm`, etc

A full-featured, GraphQL-powered nested object selection system using the select option

Full type safety for inputs and outputs driven by each Gadget app's backend schema, including over dynamic selections

Data hydrations that return useful objects like `Dates`

[Realtime query](https://docs.gadget.dev/guides/frontend/realtime-queries) support for automatically re-rendering when backend data changes

## How to use your frontend 

Gadget's Vite frontend is a standard React application living in the `web` folder of your Gadget files. There are a few key files created by default:

*   The `index.html` file is the entry point for your frontend application. It's a standard HTML file with a `<div id="root"></div>` element where your React application will be mounted.
*   The `web/main.jsx` file is the JavaScript file that loads and mounts your React application into the rendered HTML.
*   The `web/components/App.jsx` file is the main React component for your application. **It's a good place to start adding new components to your application**.
*   The `web/components/App.css` file is a CSS file imported into `App.jsx`. Vite handles the injection of `.css` files into a page via a `<style>` tag.

Gadget applications can also serve more traditional HTML, CSS, and JS/TS for server-rendered frontends using [HTTP Routes](https://docs.gadget.dev/guides/http-routes). HTTP routes can render whatever content they want and can be extended using plugins from [Fastify](https://www.fastify.dev/ecosystem/).

**Adding new components**

To add a new component to your frontend, create a new file within the `web` folder somewhere, and render the component within the component tree of `App.jsx`.

For example, we can add a new `web/components/HelloWorld.jsx` component to our frontend:

```tsx
import React from "react";

export const HelloWorld = () => {
  return (
    <div>
      <h1>Hello World!</h1>
    </div>
  );
};
```

We then need to mount and render the component within the `web/components/App.jsx` component:

```tsx
import { HelloWorld } from "./HelloWorld";

const App = () => {
  return (
    <>
      <main>
        <h1>Example App</h1>
        <HelloWorld />
      </main>
    </>
  );
};

export default App;
```

For more on React components, see the [React docs](https://beta.reactjs.org/learn).

## Remix 

Gadget also supports hosting Remix as a frontend framework, with rich support for loaders, actions, and more. See the [Remix guide](https://docs.gadget.dev/guides/frontend/remix-in-gadget) for more information.

## Development vs Production 

In the development environment, Gadget uses Vite to serve your application on your development domain. Vite provides developer-friendly features like hot module reloading, un-minified code for easy debugging, and error overlays. It also utilizes advanced pre-bundling to maintain fast development speed when adding dependencies and expanding your codebase.

In the production environment, Gadget builds minified assets optimized for production and serves them through a high-performance CDN. This ensures the best user experience and reliability.

## Frontend troubleshooting 

### Users outside of North America 

In our development environment, we use Vite to enable Hot Module Reloading. However, it's important to note that Vite's approach to dependency resolution and module loading may lead to slower initial load times for users in different regions than their development server environment. This is because Vite makes an HTTP request per source file.

If you are located in regions outside of North America, you may encounter slower initial page load times for your development app's frontend.

Production environments utilize a globally distributed CDN to serve JS\\TS files. This ensures that initial page loads are significantly faster across all regions.

[Check out our guide here on how to use an external frontend with your Gadget backend.](https://docs.gadget.dev/guides/frontend/external-frontends)