Search code examples
javareactjsdropwizard

Serving multiple static assets using Dropwizard

I have a react app that I am building and trying to serve using an AssetBundle, as such:

    @Override
    public void initialize(final Bootstrap<PersonalWebsiteConfiguration> bootstrap) {
        bootstrap.addBundle(new SwaggerBundle<PersonalWebsiteConfiguration>() {
            protected SwaggerBundleConfiguration getSwaggerBundleConfiguration(final PersonalWebsiteConfiguration configuration) {
                return configuration.swaggerBundleConfiguration;
            }
        });
        bootstrap.addBundle(new AssetsBundle("/build", "/", "index.html"));
    }

I also added the configuration 

server:
  rootPath: /api

so there wouldn't be conflicts with my API.

This works great for just the landing page of my React app. Whenever I try the route /login /dashboard, this page from the UI not found. So I tried adding more bundles to fix that problem with the routing:

        bootstrap.addBundle(new AssetsBundle("/build", "/", "index.html"));
        bootstrap.addBundle(new AssetsBundle("/build", "/login", "index.html"));
        bootstrap.addBundle(new AssetsBundle("/build", "/dashboard", "index.html"));

Now, only the dashboard is working. Does anyone know how to serve a React build with multiple routing/pages.

Solution

  • For a Single Page App you'd need every client route to return the index.html (to support browser reload or landing on paths other than /) As far as I know, Dropwizard AssetBundle can't do that, i.e. serve all routes with index.html. See similar (old) question.

    You can implement a servlet filter yourself or use some community plugin like this one.

    I must say that another approach worked better for me, don't use dropwizard for serving the static assets at all, only use it as a backend API. Use CDN routing or different subdomains for API and static assets. That way you can have you static assets at www.mydomain.com and your API at api.mydomain.com (or use same domain and based on the path prefix e.g. /api route to backend or static resources)