Production packaging

Packaging an app consists of multiple steps, like configuration, minification etc. In this chapter, we'll package our app with production configuration and create an optimized JS bundle, that can be deployed on any CDN.

Production packaging#

Pushing a frontend app to production consists of three significant steps:

  • setting up the production config

  • code splitting

  • minification of code and assets.

In this chapter, we'll apply the production config to our Tinycanva app and produce a deployable bundle. We'll focus on code splitting in the next chapter.

Add production config#

Tinycanva config lives in the app.config namespace. It has two environments: dev and prod, and a function to select config for a certain environment. The current configuration includes only Firebase, but a real-world app might have multiple API endpoints, analytics id, and other data.

For the sake of simplicity, we'll assume that our prod config is the same as for dev. Let's copy the dev config map to prod:

Loading prod config via environment variable#

The config is loaded in the app.core namespace. When we first set up the config, we hardcoded :dev as the default environment.

To switch this environment pragmatically, we'll use bash environment variables.

First up, we need to read the environment variable and make it available to the application. This can be done using a combination of #shadow/env and :closure-defines.

#shadow/env helps us read an environment variable, whereas :closure-defines sets a value to a variable in any namespace. Note the spelling closure. This is not a typo and we didn't mean clojure.

 

This page is a preview of Tinycanva: Clojure for React Developers

No discussions yet