xref: /expo/docs/pages/routing/installation.mdx (revision ccb2279e) 
1---
2title: Install Expo Router
3description: Learn how to quickly get started by creating a new project with Expo Router or add the library to an existing project.
4sidebar_title: Installation
5---
6
7import { Terminal } from '~/ui/components/Snippet';
8import { Step } from '~/ui/components/Step';
9import { BoxLink } from '~/ui/components/BoxLink';
10import { GithubIcon, Map01Icon, BookOpen02Icon } from '@expo/styleguide-icons';
11import { Tabs, Tab } from '~/ui/components/Tabs';
12
13Find the steps below to create a new project with Expo Router library or add it to your existing project.
14
15## Quick start
16
17<Step label="1">
18
19We recommend creating a new Expo app using `create-expo-app`. This will create a minimal project with the Expo Router library already installed. To create a project, run the command:
20
21<Terminal cmd={['$ npx create-expo-app@latest --template tabs@49']} />
22
23</Step>
24
25<Step label="2">
26
27Once setup, you can start your project by running:
28
29<Terminal cmd={['$ npx expo start']} />
30
31- To view your app on a mobile device, we recommend starting with [Expo Go](/get-started/expo-go). As your application grows in complexity and you need more control, you can create a [development build](/develop/development-builds/introduction/).
32- Open the project in a web browser by pressing <kbd>w</kbd> in the Terminal UI. Press <kbd>a</kbd> for Android (Android Studio is required), or <kbd>i</kbd> for iOS (macOS with Xcode is required).
33
34</Step>
35
36## Manual installation
37
38Ensure the version of Expo Router is compatible with the Expo SDK version your project is using.
39
40| Expo SDK | Expo Router |
41| -------- | ----------- |
42| 49.0.0   | 2.0.0       |
43| 48.0.0   | 1.0.0       |
44
45### Prerequisites
46
47Make sure your computer is [set up for running an Expo app](/get-started/installation/).
48
49<Step label="1">
50
51### Create an Expo project
52
53To create a new project, run the following command:
54
55<Terminal cmd={['$ npx create-expo-app']} />
56
57</Step>
58
59<Step label="2">
60
61### Install dependencies
62
63You'll need to install the following dependencies:
64
65<Terminal
66  cmd={[
67    '$ npx expo install expo-router react-native-safe-area-context react-native-screens expo-linking expo-constants expo-status-bar react-native-gesture-handler',
68  ]}
69/>
70
71The above command will install versions of these libraries that are compatible with the Expo SDK version your project is using.
72
73</Step>
74
75<Step label="3">
76
77### Setup entry point
78
79<Tabs>
80
81<Tab label="SDK 49 and above">
82
83    Use the `expo-router/entry` file in the **package.json**. The initial client file is [**app/_layout.js**](/router/advanced/root-layout).
84
85    ```json package.json
86    {
87      "main": "expo-router/entry"
88    }
89    ```
90
91</Tab>
92
93<Tab label="SDK 48">
94
95    Either delete the entry point in your **package.json** or replace it with **index.js** to be explicit:
96
97    ```json package.json
98    {
99      "main": "index.js"
100    }
101    ```
102
103    Create a new file **index.js** in the root of your project. If it exists already, replace it with the following:
104
105    ```js index.js
106    import 'expo-router/entry';
107    ```
108
109</Tab>
110
111</Tabs>
112
113</Step>
114
115<Step label="4">
116
117### Modify project configuration
118
119Add a deep linking `scheme` in your [app config](/workflow/configuration/):
120
121```json app.json
122{
123  "scheme": "your-app-scheme"
124}
125```
126
127If you are developing your app for web, install the following dependencies:
128
129<Terminal cmd={['$ npx expo install react-native-web react-dom']} />
130
131Then, enable [Metro web](/guides/customizing-metro/#adding-web-support-to-metro) support:
132
133```json app.json
134{
135  "web": {
136    "bundler": "metro"
137  }
138}
139```
140
141</Step>
142
143<Step label="5">
144
145### Modify babel.config.js
146
147Add `expo-router/babel` plugin in the `plugins` array to your project's **babel.config.js**:
148
149```js babel.config.js
150module.exports = function (api) {
151  api.cache(true);
152  return {
153    presets: ['babel-preset-expo'],
154    /* @info Add it in the plugins list as the last plugin.*/
155    plugins: ['expo-router/babel'],
156    /* @end */
157  };
158};
159```
160
161</Step>
162
163## For Expo SDK below 49
164
165Expo Router requires at least `[email protected]`. If you are using Expo SDK version below 49, you will need to force upgrade your `metro` version by setting a Yarn resolution or npm override.
166
167<Tabs>
168
169<Tab label="Yarn">
170
171    ```json package.json
172    {
173      "resolutions": {
174        "metro": "0.76.0",
175        "metro-resolver": "0.76.0"
176      }
177    }
178    ```
179
180</Tab>
181
182<Tab label="npm">
183    ```json package.json
184    {
185      "overrides": {
186        "metro": "0.76.0",
187        "metro-resolver": "0.76.0"
188      }
189    }
190    ```
191</Tab>
192
193</Tabs>
194
195## Next steps
196
197<BoxLink
198  title="Create pages with Expo Router"
199  Icon={BookOpen02Icon}
200  description=" Learn about the file-based routing convention used by Expo Router."
201  href="/routing/create-pages/"
202/>
203