DEV Community

loading...
Cover image for Getting Started with Expo Web

Getting Started with Expo Web

evanbacon profile image Evan Bacon ・4 min read

👉 This guide is for beginner React devs with no knowledge of Expo, or building mobile apps.

Expo lets you build and deploy real iOS, Android, and Web apps with React and JavaScript. Expo websites are performant and highly customizable; meaning you can use them with any of your existing React tools like Next.js, Gatsby, Preact, Electron, etc...

This guide will quickly show you the basics for creating a website and deploying it to the web in minutes! For more on mobile apps check out the Expo docs.

You'll Learn how to:


Getting Started

Install the Expo CLI and make a new universal project (Web, iOS, Android):

💡 Absolute beginners with no coding experience should visit snack.expo.io to get started in the browser without using the terminal.

$ npm install -g expo-cli

Create a new Expo project:

💡 Learn more about expo init

$ expo init myProject 

Now enter the project and start it:

$ cd myProject

$ expo start --web

Your browser will automatically open to the website and you'll see this:

Alt Text

Building

Creating a production build is simple:

💡 Expo Web builds live in the web-build folder.

$ expo build:web

You can deploy the website using any hosting service. For this example we'll use Netlify:

$ npx netlify deploy --dir web-build

And that's all! You just created and deployed your first universal Expo website!! See some examples and learn more in the Expo Documentation.

🤔 How Expo Web Works

Every screen in an Expo app is a React Component, but instead of using <div/>, <p/>, <img/> - Expo uses <View />, <Text />, <Image />, <ScrollView />, etc...

The first component in your app is whatever JSX you export from App.js:

import React from 'react';
import { Text } from 'react-native';

function App() {
  return <Text>Expo Everywhere!</Text>
}

export default App;

🏃🏻‍♂️ Running Everywhere

  • 🌐 Try Expo Web in the browser with:
$ expo start --web

# or faster in web-only mode

$ expo start:web
  • 💻 Run in the simulator with:
$ expo start --ios

# or Android

$ expo start --android
  • 📱 You can also open this on your phone with the Expo client!

🕵️‍♀️ Learn More

👋 Thanks for Reading

That's all for now. Keep up with the latest Expo Web news by following 👇

Discussion (2)

pic
Editor guide
Collapse
seanmclem profile image
Seanmclem

Is Expo the only way to use React Native Web? Or can it also be used with Plain React Native?

Collapse
pennmeg profile image
Megan Penn

Is Expo Web able to be added in to an existing Expo project?