best practice configuring SPA application using Bamboo

siriousje

What is the best practice to continuously build and deploy a static javascript/css/html application (SPA)?

Coming from a backend development world, normally we build once and then deploy to various targets where the configuration sits in the environment. So for a basic Java web app, we'd just setup one build in Bamboo, but link it to various deployments.

However, we're moving towards more SPA type applications and these all run in the client browser. So, there is no environment to get configuration from. In this case I'm using a React/Redux app that is bundled/wrapper using Webpack and it's build using npm/node.

The only way I have found to be able to configure this correctly is by having the environment/configuration injected during the npm build phase. Because, basically, after that, you're left with a folder of minified and uglified and hashed javascript files so it's virtually impossible to do post-build variable updates.

So, now I have one project that has as many builds as that it has deployment targets and then for each I have to create one single deployment task.

Given that I'm surely not the only one building SPA type applications, I was wondering what the best practice for this is?

Are you perhaps doing the npm build during the deployment task? And instead of having the build folder as artifact, use the entire source tree?

devpartisan

To restate your problem, Bamboo's deployment model depends upon the notion of a fixed "artifact" (like a Java jar), while Webpack's build model is about binding configuration into the web files (like URLs). The "difference of opinion" is confusing.

One thing that I would recommend is taking more of a continuous deployment approach. Namely, don't worry about deploying into multiple environments, just deploy straight to production. That doesn't necessarily mean that every deployment is immediately visible to your users. Rather, use Webpack's understanding of the whole dependency tree to create "versions" of your SPA. Then use your web server/load balancer to point to the version that you want to reveal.

Use Bamboo's deployment projects to manage the "pointer". For example, users access "app.example.com" but it points to "app.example.com/1/". Testers access "test.app.example.com" but it points to "app.example.com/2/". When you want to "deploy", Bamboo changes the configuration of the web server, rather than moving any real artifacts.

It feels like this approach would avoid too much conflict between the tools. That said, there are many ways to solve this one.