I have a React Native app. It works locally when I just use "expo start" and it also works serving the files via "npx serve dist --single".
What I would like to do is build the app into a bunch of static files and host them on Firebase Hosting. I followed the instructions followed in the docs [here](npx serve dist --single) but it doesn't work. Error: "Uncaught SyntaxError: Unexpected token '<'"
Looking a it deeper; the HTML files that is served, looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta httpEquiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<title>Amplify</title>
<!-- The `react-native-web` recommended style reset: https://necolas.github.io/react-native-web/docs/setup/#root-element -->
<style id="expo-reset">
/* These styles make the body full-height */
html,
body {
height: 100%;
}
/* These styles disable body scrolling if you are using <ScrollView> */
body {
overflow: hidden;
}
/* These styles make the root element full-height */
#root {
display: flex;
height: 100%;
flex: 1;
}
</style>
<link rel="shortcut icon" href="/favicon.ico" /></head>
<body>
<!-- Use static rendering with Expo Router to support running without JavaScript. -->
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<!-- The root element for your Expo app. -->
<div id="root"></div>
<script src="/_expo/static/js/web/entry-97e54fcf1c076f1bb36595244f148655.js" defer></script>
</body>
</html>
Looks fine but the JS script is being loaded and the browser for some reason thinks it's supposed to be HTML so it gives an error.
For deploying I use this in my package.json
"predeploy": "expo export -p web",
"deploy-hosting": "npm run predeploy && firebase deploy --only hosting"
I also have a fairly standard firebase.json
{
"hosting": {
"public": "dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
And then finally, my app.json just has a few property I want a single page as output. I tried outputting it with "static" and "server" but that didn't work either unfortunately.
"web": {
"bundler": "metro",
"output": "single",
"favicon": "./assets/images/favicon.png"
},
Anyone any ideas why the JS is getting interpreted as html and how I can fix it?