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. 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.

@gadgetinc/react 

@gadgetinc/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 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 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 frontend folder of your Gadget files. There are a few key files created by default:

• The frontend/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 frontend/main.jsx file is the JavaScript file that loads and mounts your React application into the rendered HTML.
• The frontend/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 frontend/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.

Adding new components

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

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

frontend/HelloWorld.jsx
React
Copy
1export const HelloWorld = (props) => {
2  return (
3    <div>
4      <h1>Hello World!</h1>
5    </div>
6  );
7};

We then need to mount and render the component within the App.jsx component:

React
Copy
1import { HelloWorld } from "./HelloWorld";
2
3const App = () => {
4  return (
5    <>
6      <main>
7        <h1>Example App.jsx</h1>
8        <HelloWorld />
9      </main>
10    </>
11  );
12};
13
14export default App;

For more on React components, see the React docs.

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 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.