frli/deliver_snippet.vcl

## readme.md

      
    Raw
  

              readme.md
            
          
    Serving static react apps straight from Azure Blob Storage via Fastly

Our current project requires us to serve several different static react apps via different paths on the same hostname.

www.company.com (old corporate site)
www.company.com/new-shiny-react-app
www.company.com/another-new-shiny-react-app

We deploy the react apps to separate containers in the same Azure Blob Storage account and to keep things simple we use the reuse the same naming structure.

blobstorage/new-shiny-react-app
blobstorage/another-new-shiny-react-app

The included VCL snippets take care of serving the default document when the client side routing points to urls that do not exist on the backend.
Disclaimer:


I'm no VCL expert and I'm sure there are better ways to do it. This way does work quite nicely though :)


## deliver_snippet.vcl
if (resp.status == 404 && req.restarts == 0) {
    # Routing in a React app is most of the time handled client side.
    # To support a good end user experience we need to return the contents of index.html
    # when the client requests a resource that does not exist server side.
    # If we get a 404 response from the backend we restart the request inside Fastly
    # so we can take another shot at generating a response to the client.
    # This will increment the req.restarts counter.

    if (req.url ~ "^/new-shiny-react-app" || req.url ~ "^/another-new-shiny-react-app") {
        return (restart);
    }
}

## rcv_snippet.vcl
if(req.url ~ "^/new-shiny-react-app")
{
  if (req.restarts > 0) {
    # after a restart, clustering is disabled.  This re-enables it.
    set req.http.Fastly-Force-Shield = "1";
    # return the default document if this is a restarted request
    set req.url = "/new-shiny-react-app/index.html";
  }
  # don't pass end user authorization header to blob storage backend to avoid having a bad time
  unset req.http.authorization;
}

if(req.url ~ "^/another-new-shiny-react-app")
{
  if (req.restarts > 0) {
    # after a restart, clustering is disabled.  This re-enables it.
    set req.http.Fastly-Force-Shield = "1";
    # return the default document if this is a restarted request
    set req.url = "/another-new-shiny-react-app/index.html";
  }
  # don't pass end user authorization header to blob storage backend to avoid having a bad time
  unset req.http.authorization;
}
	if (resp.status == 404 && req.restarts == 0) {
	# Routing in a React app is most of the time handled client side.
	# To support a good end user experience we need to return the contents of index.html
	# when the client requests a resource that does not exist server side.
	# If we get a 404 response from the backend we restart the request inside Fastly
	# so we can take another shot at generating a response to the client.
	# This will increment the req.restarts counter.

	if (req.url ~ "^/new-shiny-react-app" \|\| req.url ~ "^/another-new-shiny-react-app") {
	return (restart);
	}
	}
	if(req.url ~ "^/new-shiny-react-app")
	{
	if (req.restarts > 0) {
	# after a restart, clustering is disabled. This re-enables it.
	set req.http.Fastly-Force-Shield = "1";
	# return the default document if this is a restarted request
	set req.url = "/new-shiny-react-app/index.html";
	}
	# don't pass end user authorization header to blob storage backend to avoid having a bad time
	unset req.http.authorization;
	}

	if(req.url ~ "^/another-new-shiny-react-app")
	{
	if (req.restarts > 0) {
	# after a restart, clustering is disabled. This re-enables it.
	set req.http.Fastly-Force-Shield = "1";
	# return the default document if this is a restarted request
	set req.url = "/another-new-shiny-react-app/index.html";
	}
	# don't pass end user authorization header to blob storage backend to avoid having a bad time
	unset req.http.authorization;
	}