best practice configuring SPA application using Bamboo

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?

1 answer

0 vote
Ian Buchanan Atlassian Team Aug 30, 2017

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.

Suggest an answer

Log in or Join to answer
Community showcase
Renan Battaglin
Published May 18, 2017 in Bamboo

FAQ: How to Upgrade Bamboo Server

Bamboo 5.9 will no longer be supported after June 12, 2017. What does this mean? As part of our End of Life policy, Atlassian supports major versions for two years after the first major iteratio...

1,096 views 0 5
Read article

Atlassian User Groups

Connect with like-minded Atlassian users at free events near you!

Find a group

Connect with like-minded Atlassian users at free events near you!

Find my local user group

Unfortunately there are no AUG chapters near you at the moment.

Start an AUG

You're one step closer to meeting fellow Atlassian users at your local meet up. Learn more about AUGs

Groups near you
Atlassian Team Tour

Join us on the Team Tour

We're bringing product updates and pro tips on teamwork to ten cities around the world.

Save your spot