---
title: Develop for Web
description: Learn how to develop your app for the web so you can build a universal app.
---

import { Terminal } from '~/ui/components/Snippet';
import { BoxLink } from '~/ui/components/BoxLink';

If you build your native app with the Expo SDK, then you can also run it directly in the browser with [Expo CLI](/more/expo-cli/#develop). On web, your app is rendered with [React Native for web](https://github.com/necolas/react-native-web) which powers massive websites and progressive web apps like [Twitter](https://mobile.twitter.com/), and [Major League Soccer](https://matchcenter.mlssoccer.com/). The Expo SDK also utilizes native browser functionality like Video, Camera, and Gestures without the need for a custom native browser.

## Getting started

Install the `expo` package which contains the [Expo CLI](/more/expo-cli/) used for starting the dev server:

<Terminal cmd={['$ yarn add expo']} />

Then you can use Expo CLI to install the web dependencies in your project:

<Terminal cmd={['$ npx expo install react-dom react-native-web @expo/webpack-config']} />

### Update the entry file

Modify the entry file to use [`registerRootComponent`](/versions/latest/sdk/register-root-component) instead of `AppRegistry.registerComponent`:

```diff
+ import {registerRootComponent} from 'expo';

import App from './App';
- import {AppRegistry} from 'react-native';
- import {name as appName} from './app.json';

- AppRegistry.registerComponent(appName, () => App);
+ registerRootComponent(App);
```

> Learn more about [`registerRootComponent`](/versions/latest/sdk/register-root-component#registerrootcomponentcomponent).

### Start the dev server

Finally you can start the webpack dev server with:

<Terminal cmd={['$ npx expo start --web']} cmdCopy="npx expo start --web" />

You can test secure web APIs like the camera and user location by adding the `--https` flag to `npx expo start`. This will host your app from a secure origin like `https://localhost:19006`.

> You can try experimental [Metro web support](/guides/customizing-metro#web-support) instead of webpack.

## Alternative Rendering Patterns

> **Example:** The website [beatgig.com](https://beatgig.com/) uses Expo web + Next.js to achieve SSR in the browser.

By default, Expo renders your web app as a **single page application (SPA)**. This rendering pattern is the closest to how native rendering works. If you'd like to render your Expo web using **server-side rendering (SSR)** or **static site generation (SSG)**, then you should try using the Expo SDK with another tool like Gatsby, Next.js, Remix, and so on. One caveat is that these tools are less universal and require a bit more effort to share code across platforms.

The ability to use Expo web with these other React frameworks is what makes it the most powerful way to build a universal app. The possibilities are endless and you won't hit a theoretic performance wall in the future.

- [Next.js](/guides/using-nextjs)
- [Storybook](https://github.com/expo/examples/tree/master/with-storybook)
- [Preact](https://github.com/expo/examples/tree/master/with-preact)
- [Gatsby](https://github.com/expo/examples/tree/master/with-gatsby)
- [Electron](https://github.com/expo/expo-electron-adapter/tree/main/example)

> Alternative framework implementations are maintained by the Expo community.

## Next

<BoxLink
  title="Publishing websites"
  description="Export your website and upload to any web host."
  href="/distribution/publishing-websites"
/>
<BoxLink
  title="Progressive web app"
  description="Learn how to make your website run offline."
  href="/guides/progressive-web-apps"
/>
<BoxLink
  title="Responsive design"
  description="Make your website work across different screens."
  href="https://blog.expo.dev/media-queries-with-react-native-for-ios-android-and-web-e0b73ed5777b"
/>