Getting Started with Expo Web
Tags: javascript, tutorial, beginners, webdev
Published: 2020-01-29 08:38:13

> 👉 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](https://docs.expo.io/versions/latest/guides/using-nextjs/), [Gatsby](https://docs.expo.io/versions/latest/guides/using-gatsby/), [Preact](https://dev.to/evanbacon/smaller-faster-websites-with-preact-and-expo-2m2b), [Electron](https://docs.expo.io/versions/latest/guides/using-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](https://docs.expo.io/versions/latest/get-started/create-a-new-app/).


<h2 align="center">You'll Learn how to:</h2>

<table>
<tr>
<th><a href="#install">🔽 Install</a></th>
<th><a href="#init">💫 Initialize</a></th>
<th><a href="#start">🏃🏼‍♀️ Start</a></th>
<th><a href="#build">🚀 Build</a></th>
<th><a href="#deploy">🔼 Deploy</a></th>
</tr>
</table>
---
<table>
<tr>
<td><a href="#explain">🔽 Components</a></td>
<td><a href="#running">💫 Run Everywhere</a></td>
<td><a href="#learn">🏃🏼‍♀️ Learn More</a></td>
</tr>
</table>

# Getting Started

<a name=install></a>

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

> 💡 Absolute beginners with no coding experience should visit [snack.expo.io](https://snack.expo.io/) to get started in the browser without using the terminal.

```sh
$ npm install -g expo-cli
```

<a name=init></a>

Create a **new Expo project**:

> 💡 [Learn more about `expo init`](https://docs.expo.io/versions/latest/get-started/create-a-new-app/)

```sh
$ expo init myProject 
```

<a name=start></a>


Now enter the project and **start** it:

```sh
$ cd myProject

$ expo start --web
```

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/oujur0hayv59krzaay1p.png)

# <a name=build>Building</a>

Creating a **production** build is simple:

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

```sh
$ expo build:web
```

<a name=deploy></a>


You can **deploy** the website using [_any_ hosting service](https://docs.expo.io/versions/latest/guides/deploying-websites). For this example we'll use [Netlify](https://www.netlify.com/):

```sh
$ npx netlify deploy --dir web-build
```

And that's all! You just created and deployed your first universal Expo website!! See some **[examples](https://github.com/expo/examples)** and learn more in the **[Expo Documentation](https://docs.expo.io/versions/latest/tutorial/text)**.

<a name=explain></a>

# 🤔 How Expo Web Works

Every screen in an Expo app is a [React Component](https://reactjs.org/), 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`:

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

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

export default App;
```

<a name=running></a>

# 🏃🏻‍♂️ Running Everywhere

- 🌐 Try Expo Web in the **browser** with:
```sh
$ expo start --web

# or faster in web-only mode

$ expo start:web
```
- 💻 Run in the **simulator** with:
```sh
$ expo start --ios

# or Android

$ expo start --android
```
- 📱 You can also open this on your **phone** with the [Expo client](https://expo.io/tools)!

<a name=learn></a>

# 🕵️‍♀️ Learn More

- 🎨 Now you can **[style the text](https://docs.expo.io/versions/latest/tutorial/text)**
- 🚗 Start Navigating and Routing with Expo's [React Navigation](https://reactnavigation.org/docs/en/hello-react-navigation.html).
- 🚀 Use with [Next.js](https://docs.expo.io/versions/latest/guides/using-nextjs/) or [Gatsby](https://docs.expo.io/versions/latest/guides/using-gatsby/) for simple web-only navigation and routing.
- 🔥 Use a **Universal Expo Component Library** to get moving faster:
  - [Elements](https://react-native-elements.github.io/react-native-elements/)
  - [Material Design](https://github.com/callstack/react-native-paper)
  - [Kittens](https://akveo.github.io/react-native-ui-kitten/)
- ⭐️ You can also simply visit [snack.expo.io](https://snack.expo.io/) to get started in the browser without installing anything!


# 👋 Thanks for Reading

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

<table>
  <tr>
 <td><a href="https://twitter.com/baconbrix">
    <img alt="Twitter: baconbrix" src="https://img.shields.io/twitter/follow/baconbrix.svg?style=flat-square&logo=TWITTER&logoColor=FFFFFF&labelColor=00aced&logoWidth=20&color=lightgray" target="_blank" />
  </a>
</td>
<td><a href="https://github.com/evanbacon" aria-label="Follow EvanBacon on Github">
    <img alt="Github: evanbacon" src="https://img.shields.io/github/followers/evanbacon.svg?label=Follow&style=flat-square&logo=github&logoColor=FFFFFF&labelColor=24292e&logoWidth=20&color=lightgray" target="_blank" />
  </a></a>
</td>
<td><a href="https://www.instagram.com/baconbrix" aria-label="Follow Baconbrix on Instagram">
    <img alt="Instagram: baconbrix" src="https://img.shields.io/badge/@baconbrix-E4405F.svg?style=flat-square&logo=INSTAGRAM&labelColor=000&logoWidth=20" target="_blank" />
  </a>
</td>
<td><a href="https://www.linkedin.com/in/evanbacon" aria-label="Connect with Evan Bacon on LinkedIn">
    <img alt="LinkedIn: evanbacon" src="https://img.shields.io/badge/connect-0077b5.svg?style=flat-square&logo=LINKEDIN&labelColor=000&logoWidth=20" target="_blank" />
  </a>
</td>
<td><a href="https://www.youtube.com/c/exposition?sub_confirmation=1" aria-label="Watch Evan Bacon on YouTube">
    <img alt="YouTube: Evan Bacon" src="https://img.shields.io/badge/Watch-FF0000.svg?style=flat-square&logo=YOUTUBE&labelColor=FF0000&logoWidth=20" target="_blank" />
  </a>
</td>
<td><a href="http://evanbacon.dev" aria-label="Learn more about Evan Bacon">
    <img alt="Website: Evan Bacon" src="https://img.shields.io/badge/Portfolio-4630EB.svg?style=flat-square&logo=EXPO&labelColor=000&logoWidth=20" target="_blank" />
  </a>
</td>
</table>