Best practices for SPA?

1

Hi!
We’ve deploying our application on Aptible and i wonder what are the recommended ways to deploy single page application + back-end configuration?
Currently we are considering the following:

  1. Deploy front-end on AWS, proxy all requests to API using nginx. It is not clear though if it requires the dedicated instance.
    There’s an option to forward request directly from the browser to the backend but i have not figured out how to configure CORS in Aptible.
  2. Separate docker container for SPA. It seems that it will require nginx under Aptible’s nginx and then one more routing for the API request itself. Seems like an overhead.
    Thanks
2

Hi there,

We recommend deploying your SPA as a static asset on AWS S3 + CloudFront (i.e. using AWS for static website hosting). Most SPA frameworks should support this out of the box or via a plugin, and this should be pretty inexpensive (i.e. in the $0-$10 range). There’s also a lot of content on the internet you can find regarding this approach.

Your API should then be hosted on a separate domain. For example, you’ll serve your SPA at www.example.com, and run your API at api.example.com. You’ll indeed need to enable CORS to make this work. To do so, you need to configure your API to send a few headers to indicate it allows requests from your SPA. Most application frameworks have middleware that can be used to set up CORS, so I’d recommend googling for “whatever framework you’re using CORS”.

That being said, setting up CORS is really just about serving a few headers with your HTTP response. You’ll typically need at least those:

Access-Control-Allow-Credentials: true
Access-Control-Allow-Methods: OPTIONS, PATCH, GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Authorization, Content-Type
Access-Control-Allow-Origin: https://$YOUR_DOMAIN

CORS might seem like added complexity here, but in our experience this will turn out to be less work than configuring Nginx properly to act as a reverse proxy (not to mention the reduced operations overhead).

From a compliance perspective, your SPA does not handle PHI (more details here): it’s just a static website serving code for your app. The actual PHI is served by your API server. That being said, as indicated in the link, your SPA is still part of your security program (but that would be the case regardless of how you deploy this).

Finally, note that:

  • What I’m describing is exactly how Aptible itself is set up. dashboard.aptible.com is a SPA served by S3 + Cloudfront, that talks to e.g. api.aptible.com, auth.aptible.com.
  • You may not need a BAA with AWS if all you’re storing in S3 is your SPA. However, you might want to consider executing a BAA with AWS anyway to be able to use it for PHI. Note that you do not need to pay the dedicated instance fee to use S3 for PHI.

Disclaimer: this isn’t legal advice / I’m not a lawyer.

3

Hi Thomas,

thank you so much for the detailed answer! We also incline towards the first approach, the only thing that was not obvious was CORS. We usually set it up in nginx, but it’s not an issue to add headers inside the container.

4

Hey Max,
It’s worth noting that cross domain requests (using CORS) are not supported by IE9. We went the CORS route originally, but found that the workarounds for dealing with IE9 (which we have to support) were much more complicated than proxying API requests.

If you don’t need IE9 support, CORS is the way to go.

1 Like
5

We used to have our SPAs hosted on aptible via an nginx container, but just moved everything to Netlify

It’s free for our use case, they provide and maintain letsencrypt certs, serve our files over CDN, and even build our projects

1 Like
6

Netlify also lets you proxy requests, so that you don’t have to worry about CORS.

7

Thanks for the additional tips everyone :smile:

Be mindful that if you’re proxying API requests (e.g. using Netlify), you need to make sure that you either:

  • Do not transmit PHI to your API.
  • Have a BAA in place with whoever is proxying your API requests.

Cheers,