Serving multiple static assets using Dropwizard

Question

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.

Answer 1

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)

Answer 2

You can add a filter to implement the functionality. For a dropwizard plugin which implements this kind of filter see https://github.com/xvik/dropwizard-guicey-ext/tree/master/guicey-spa. The following stand-alone example code is in Kotlin.

class SinglePageAppFilter : Filter {

    override fun doFilter(servletRequest: ServletRequest,
                          servletResponse: ServletResponse,
                          chain: FilterChain) {
        val request = servletRequest as HttpServletRequest
        val response = servletResponse as HttpServletResponse
        if (request.requestURI == "/" || request.requestURI.startsWith("/api")) {
            chain.doFilter(servletRequest, servletResponse)
        } else {
            val wrapper = ResponseWrapper(response)
            chain.doFilter(servletRequest, wrapper)
            val sc = wrapper.sc
            if (sc == HttpServletResponse.SC_NOT_FOUND) {
                request.getRequestDispatcher("/").forward(request, response)
            } else if (sc != null) {
                response.sendError(sc)
            }
        }
    }

    override fun init(filterConfig: FilterConfig) {}

    override fun destroy() {}

}

class ResponseWrapper(response: HttpServletResponse) : HttpServletResponseWrapper(response) {

    var sc: Int? = null

    override fun sendError(sc: Int) {
        this.sc = sc
    }

}

class MyApplication : Application<MyConfiguration>() {

    override fun initialize(bootstrap: Bootstrap<MyConfiguration>) {
        bootstrap.addBundle(AssetsBundle("/assets", "/", "index.html"))
    }

    override fun run(configuration: MyConfiguration, environment: Environment) {
        environment.servlets().addFilter("SinglePageAppFilter", SinglePageAppFilter())
            .addMappingForUrlPatterns(EnumSet.of(DispatcherType.REQUEST), true, "/*")
    }

}