Change the output folder for expo web projects

Is there a way to change the output folder for expo web projects?

My current react-native-web projects uses the following in its webpack config:

output: {
  path: path.resolve('../static/bundles'),
  filename: '[name]-[hash]-bundle.js',
  publicPath: '/static/bundles/',
},

Would love if expo web supported setting the public path, the output path for assets, and the output path for index.html, for both dev and prod.

Seems like I can edit the prod public path by setting expo.web.publicPath in my app.json


My setup / why I’d like to set the public path, the output path for assets, and the output path for index.html:

I’m working on webapp1 for https://example.com/webapp1, which I run from http://0.0.0.0/webapp1 locally

In order for my API calls to work, I need my server to serve webapp1, otherwise I get blocked by CORS. Instead of serving it from http://192.168.x.x/ I’d like to serve it from http://0.0.0.0/webapp1

I’m using flask and nginx. My static files are automatically served from <backend_path>/static and I can only render templates from <backend_path>/templates.

How I historically dealt with this, which worked for both dev/hot reloading + prod/built app: I’d output all my assets to /static/build/webapp1, I’d set /static/build/webapp1 as my public path and when someone would request /webapp1 I’d render render my /templates/webapp1 template which would look something like

...
  <body>
    <div id="react-root" data-react="{{ data }}"></div>
    {% webpack 'web' %}
  </body>
...

Where {% webpack 'web' %} just checks the stats file to import the bundle, i.e. it becomes <script type="text/javascript" src="/static/bundles/webapp1-ec95272a8deb2695f7c7-bundle.js"></script>

How this could work with expo web is that if you could specify the public path, the output folder for the assets, and the output folder for the HTML, we’d just set the public path to /static/build/webapp1, set the asset output folder to /static/build/webapp1, and set the html output folder to /templates/webapp1


Happy to share more of my current/prior react-native-web setup if it’s helpful in any way. I’ve loved building with expo web so far and am so glad you all are working on it. For now I think I’ll detach because this is a web-only project right now and on web that’s pretty no-cost (I don’t have to resubmit to the app stores and get people to update their apps when I detach / re-attach!!!)


Update: expo eject does not create a web folder like it does an android and ios folder. Could possibly make sense to include some of the configuration that was being used to create the web dev/prod builds.


Edit: another way to make this work / thing that would be nice would be being able to set some of the webpack devServer options. In particular publicPath, hot, host, port, and proxy

1 Like

You can use expo customize:web to create the web static files, this is akin to expo eject on native.

2 Likes

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.