1--- 2title: Develop for Web 3description: Learn how to develop your app for the web so you can build a universal app. 4--- 5 6import { Terminal } from '~/ui/components/Snippet'; 7import { BoxLink } from '~/ui/components/BoxLink'; 8 9If 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. 10 11## Getting started 12 13Install the `expo` package which contains the [Expo CLI](/more/expo-cli/) used for starting the dev server: 14 15<Terminal cmd={['$ yarn add expo']} /> 16 17Then you can use Expo CLI to install the web dependencies in your project: 18 19<Terminal cmd={['$ npx expo install react-dom react-native-web @expo/webpack-config']} /> 20 21### Update the entry file 22 23Modify the entry file to use [`registerRootComponent`](/versions/latest/sdk/register-root-component) instead of `AppRegistry.registerComponent`: 24 25```diff 26+ import {registerRootComponent} from 'expo'; 27 28import App from './App'; 29- import {AppRegistry} from 'react-native'; 30- import {name as appName} from './app.json'; 31 32- AppRegistry.registerComponent(appName, () => App); 33+ registerRootComponent(App); 34``` 35 36> Learn more about [`registerRootComponent`](/versions/latest/sdk/register-root-component#registerrootcomponentcomponent). 37 38### Start the dev server 39 40Finally you can start the webpack dev server with: 41 42<Terminal cmd={['$ npx expo start --web']} cmdCopy="npx expo start --web" /> 43 44You 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`. 45 46> You can try experimental [Metro web support](/guides/customizing-metro#web-support) instead of webpack. 47 48## Alternative rendering patterns 49 50> **Example:** The website [beatgig.com](https://beatgig.com/) uses Expo web + Next.js to achieve SSR in the browser. 51 52By 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. 53 54The 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. 55 56- [Next.js](/guides/using-nextjs) 57- [Storybook](https://github.com/expo/examples/tree/master/with-storybook) 58- [Preact](https://github.com/expo/examples/tree/master/with-preact) 59- [Gatsby](https://github.com/expo/examples/tree/master/with-gatsby) 60- [Electron](https://github.com/expo/expo-electron-adapter/tree/main/example) 61 62> Alternative framework implementations are maintained by the Expo community. 63 64## Next 65 66<BoxLink 67 title="Publishing websites" 68 description="Export your website and upload to any web host." 69 href="/distribution/publishing-websites" 70/> 71<BoxLink 72 title="Progressive web app" 73 description="Learn how to make your website run offline." 74 href="/guides/progressive-web-apps" 75/> 76<BoxLink 77 title="Responsive design" 78 description="Make your website work across different screens." 79 href="https://blog.expo.dev/media-queries-with-react-native-for-ios-android-and-web-e0b73ed5777b" 80/> 81