1--- 2title: Developing for Web 3sidebar_title: Developing for Web 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](/workflow/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](/workflow/expo-cli.mdx) 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 20 cmd={['$ npx expo install react-dom react-native-web @expo/webpack-config']} 21 cmdCopy="npx expo install react-dom react-native-web @expo/webpack-config" 22/> 23 24### Update the entry file 25 26Modify the entry file to use [`registerRootComponent`](/versions/latest/sdk/register-root-component) instead of `AppRegistry.registerComponent`: 27 28```diff 29+ import {registerRootComponent} from 'expo'; 30 31import App from './App'; 32- import {AppRegistry} from 'react-native'; 33- import {name as appName} from './app.json'; 34 35- AppRegistry.registerComponent(appName, () => App); 36+ registerRootComponent(App); 37``` 38 39> Learn more here: [`registerRootComponent`](/versions/latest/sdk/register-root-component#registerrootcomponentcomponent). 40 41### Start the dev server 42 43Finally you can start the Webpack dev server with: 44 45<Terminal cmd={['$ npx expo start --web']} cmdCopy="npx expo start --web" /> 46 47You 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`. 48 49> You can try experimental [Metro web support](/guides/customizing-metro#web-support) instead of Webpack. 50 51## Alternative Rendering Patterns 52 53> **Example:** The website [beatgig.com](https://beatgig.com/) uses Expo web + Next.js to achieve SSR in the browser. 54 55By 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. 56 57The 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. 58 59- [Next.js](/guides/using-nextjs) 60- [Storybook](https://github.com/expo/examples/tree/master/with-storybook) 61- [Preact](https://github.com/expo/examples/tree/master/with-preact) 62- [Gatsby](https://github.com/expo/examples/tree/master/with-gatsby) 63- [Electron](https://github.com/expo/examples/tree/master/with-electron) 64 65> Alternative framework implementations are maintained by the Expo community. 66 67## Next 68 69<BoxLink 70 title="Publishing websites" 71 description="Export your website and upload to any web host." 72 href="/distribution/publishing-websites" 73/> 74<BoxLink 75 title="Progressive web app" 76 description="Learn how to make your website run offline." 77 href="/guides/progressive-web-apps" 78/> 79<BoxLink 80 title="Responsive design" 81 description="Make your website work across different screens." 82 href="https://blog.expo.dev/media-queries-with-react-native-for-ios-android-and-web-e0b73ed5777b" 83/> 84