Skip to content
Branch: master
Find file History
panw Add project creation step
Add project creation step to make instructions more verbose and clear.
Latest commit b23ae63 May 7, 2019
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
assets Added examples and docs Mar 18, 2019
.gitignore Removed generated folder from git Apr 13, 2019
.watchmanconfig Added examples and docs Mar 18, 2019
App.js Added examples and docs Mar 18, 2019
README.md Add project creation step May 7, 2019
app.json updated project for web latest Mar 22, 2019
babel.config.js Added examples and docs Mar 18, 2019
package.json updated project for web latest Mar 22, 2019
yarn.lock Added examples and docs Mar 18, 2019

README.md

Using Expo for web in a expo init project

This is a preview and subject to breaking changes. Do not use this in production yet.

  • Install the latest expo-cli npm i -g expo-cli
  • Create new project
    • expo init AwesomeProject (select blank project)
    • cd AwesomeProject
  • Add dependencies:
    • react native web: yarn add react-native-web react-dom
    • (preview) Use the next version of Expo: yarn add expo@next
  • Add "web" to platforms in the app.json:
    "platforms": [
        "android",
        "ios",
    +    "web"
    ]
  • Start with expo start then press w
    • or better expo start --web --non-interactive

Extra Credit

This will most likely change

  • To use react-navigation use: yarn add react-navigation@3.5.0-alpha.0
  • Build with expo build:web
    • optionally you can use the --no-polyfill flag to get 100kb back
  • Customizations to the PWA and index.html can be done through the app.json. Everything is undocumented at the moment, so check the source code here: @expo/webpack-config
    {
        "expo": {
            ...
            "web": {
                // Add web stuff here.
    
                // twitter card example
                "twitter": {
                  "card": "summary",
                  "title": "Expo Web",
                  "description": "examples of using Expo in the browser",
                  "site": "https://expo.io",
                  "image": "//url-to-image",
                  "creator": "expo bacon"
                },
    
                // additional meta
                "metatags": {
                  "author": "anthony kiedis",
    
                  // meta defaults override
                  "format-detection": "telephone=yes"
                },
    
                // turn off minify html (default true)
                "minifyHTML": false
            }
        }
    }
You can’t perform that action at this time.