Where is index.html?

[aghasemi]

Hi. Sorry if the question is very basic. I am quite new to the React area, so I may have gotten lost here. May I kindly ask, what is the procedure, if any, to run third-party, or custom Javascript libraries in a web target, i.e. React Native for Web project, the same way we do with <script> tags in a "normal" web application?

I have created a bare project with expo-cli but cannot find any index.html, or src or public folder. I created the public folder and put an index file there, but it seems it is not read.

Thanks for the help
Best

[brentvatne]

you can run expo customize:web to expose the index.html file, otherwise it's managed by expo web automatically.

here's what it looks like when you run that command:

╰─$ expo customize:web
? Which files would you like to generate? › - Space to select. Return to submit  File exists, use --force to overwrite it.
◯   babel.config.js
◯   webpack.config.js
◯   web/expo-service-worker.js
◯   web/index.html
◯   web/register-service-worker.js
◯   web/serve.json

select the files that you want to manage yourself with space bar then hit return

---

but also, most libraries ship npm packages these days too!

[haveamission]

@brentvatne How do you undo it, now I'm stuck with a React Native Web page that won't show anything as it does hydrate the data

[brentvatne]

delete the files that were generated when you ran the command

[haveamission]

@brentvatne Yeah, I tried that of course, but I think Expo must make some other change as now it points to the parent directory of the place where index.html was placed by the command.

I'll see if I can find where this is stored.

[brentvatne]

you can initialize a new project with expo init and then run expo customize:web in it to see all of the changes it makes (just compare git from before running it and after)

[mohity777]

Running expo customize:web returns with Exiting with no change...
Any Solutions for this ?

[RomneyDa]

@mohity777 after running expo customize:web, use the arrow keys to choose the file, press space first to select the option (bullet point will fill green), and then enter to execute it. If you just press enter with no green dot it will exit with no change.

[mohity777]

Thanx @RomneyDa . I was able to figure out though. Still it may help others who might face this issue.

[tybro0103]

This a very important aspect of expo/RN-web development, and it's weirdly hard to find, which makes for much confusion to a new-comer. Greater visibility (particularly on this page) in the docs would help.

[vajda-media]

expo customize:web

"Press space to select" after it has been selected with the arrow keys? This is the result when back-end devs doing UX.

[irmakerdem]

I know this issue is closed but this may help future developers. I am using Expo with Metro bundler for a ReactNative/TS app and found out that npx expo customize works instead of expo customize:web to get the index.html file. You can then use this index.html contents to copy and paste into a new public/index.html folder for custom changes. Relevant Expo documentation: https://docs.expo.dev/guides/customizing-metro/.