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.
Pushing a frontend app to production consists of three significant steps:
setting up the production config
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:
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
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.
#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