examples/with-gatsby

Gatsby Example

💡 The most updated info is in the Expo docs: Using Gatsby

Using Gatsby with Expo will enable you to prerender the web part of your Expo app. This demo shows you how to setup your universal application to use use advanced universal modules from the Expo SDK like Camera, Gestures, Permissions, etc... with the Gatsby tool-chain!

Notice: Prerendering is an experimental feature with Expo so modules might not be fully optimized for Gatsby. If you find bugs please report them on the Expo repo with the [Gatsby] tag in the title.

⚽️ Running in the browser

• Create Expo project expo init

• Install the plugin: yarn add gatsby gatsby-plugin-react-native-web or npm install --save gatsby gatsby-plugin-react-native-web

• Create a gatsby-config.js and use the plugin: gatsby-config.js

  module.exports = {
    plugins: [
      `gatsby-plugin-react-native-web`,
      /* ... */
    ],
  }
  

• Add /.cache and /public to your .gitignore

• Now create the first page of your Gatsby project:

  • Create the pages folder: mkdir -p src/pages
  • Create the file:

  # JS
  cp App.js src/pages/index.js
  
  # TS
  cp App.tsx src/pages/index.tsx
  

• Run yarn gatsby develop to try it out!

  • Open the project in the browser http://localhost:8000/

🏁 New Commands

• Starting web

  • 🚫 expo start:web
  • ✅ yarn gatsby develop

• Building web

  • 🚫 expo build:web
  • ✅ yarn gatsby build

• Serving your static project

  • 🚫 serve web-build
  • ✅ yarn gatsby serve

📁 File Structure

Expo Gatsby
├── src
│   └── pages ➡️ Routes
│       └── index.tsx ➡️ Entry Point for Gatsby
├── .cache ➡️ Generated Gatsby files (should be ignored)
├── public ➡️ Generated Gatsby files (should be ignored)
├── assets ➡️ All static assets for your project
├── App.tsx ➡️ Entry Point for Mobile apps
├── app.config.js ➡️ Expo config file
├── gatsby-config.js ➡️ Gatsby config file
└── babel.config.js ➡️ Babel config (should be using `babel-preset-expo`)

👀 More Info

• Related: Expo support PR