5. Deploying to IBM Cloud

A preview of what you’ll build (visually no different, but built for production):

This tutorial has an accompanying GitHub repository called carbon-tutorial-angular that we’ll use as a starting point for each step. If you haven’t forked and cloned that repository yet, and haven’t added the upstream remote, go ahead and do so by following the step 1 instructions.

With your repository all set up, let’s check out the branch for this tutorial step’s starting point.

Install the app’s dependencies (in case you’re starting fresh in your current directory and not continuing from the previous step):

Then, start the app:

You should see something similar to where the previous step left off.

Before we get started, create an IBM Cloud account if you don’t already have one, as we’ll be deploying there in a bit.

So far we’ve been developing in a, well, development environment where static asset optimization hasn’t been a priority. If you reference /src/styles.scss, you’ll see one @import that is pulling in Carbon’s full Sass build.

To give you an idea of what’s all included, open up node_modules/carbon-components/scss/globals/scss/styles.scss. You’ll see imports for components like accordion, slider, tooltip, etc. Since we aren’t using those components, let’s exclude them from our built stylesheets. Keeping the $feature-flags Sass map, and carbon-overrides.scss, replace the styles.scss import with:

Looking at the new styles.scss file, you may be asking what happened to importing _vars.scss, _colors.scss, _theme.scss, etc.? Many of those global Sass partials get imported through the components. For example, open node_modules/carbon-components/scss/components/button/_button.scss to see its dependencies. No harm in importing them as styles.scss does, but for simplicity here, we’ll let the components pull them in.

You can read more about optimizing Carbon’s Sass in the Carbon Design System publication on Medium.

Before we deploy our app, we need to create an optimized production build with this command. You may need to CTRL-C to stop the development environment first.

Looking at package.json, you’ll find ng build. This builds the app for production to the dist folder. It bundles Angular in production mode and optimizes the build for the best performance. It even goes so far to minify files and include hashes in filenames for caching.

As a lot of this may seem like magic since the build configuration came from Create React App, go ahead and check out their production build guidelines for a full description of what’s happening.

Now that we have a production build, let’s get it on the cloud. We’re going to use staticfile-buildpack to deploy our webapp. Since this is a Cloud Foundry buildpack, we’ll be using the cf command line interface (CLI). If running cf --help doesn’t work for you, chances are you need to install the CLI.

With the Cloud Foundry CLI installed, next, we need to create a manifest.yml file in the root of the project. To prevent multiple apps trying to use the carbon-tutorial-angular name, replace USERNAME with your GitHub username below to make sure our apps are uniquely named.

Create a new static file in the root of the project named Staticfile. This tells the app to deploy from the dist folder and not the root of the project.

After telling Cloud Foundry what to include, we can also specify what to ignore. Create a top-level .cfignore file. Cloud Foundry doesn’t let you push read-only files (specifically, files with permissions <400), so to prevent issues with the deploy, add:

You can speed up deploys by decreasing the files uploaded through cloud foundry. To accomplish this, ignore any folder not required by the production application on IBM Cloud. For example, in the case of serving static files, you can ignore node_modules/ and src/ because the only folder being served is build/.

Login to IBM Cloud with:

Deploy app using the cf push command. Since manifest.yml is in our root directory, we don’t need to specify it in the push command. But, if you have multiple manifest files that target different environments, it’s good practice to specify the file.

To make it easy on ourselves by not needing to remember that command, let’s add a script in package.json. We can combine the build and deploy steps to make sure we only deploy immediately after running the build. In the "scripts" object in package.json, add:

Next time you want to deploy, you can simply run npm run-script deploy.

That does it! We’re going to submit a pull request to verify completion of this tutorial step. In doing so, please include the mybluemix.net URL for your deployed app in your pull request description.

Before we can create a pull request, stage and commit all of your changes:

Then, push to your repository:

Finally, visit carbon-tutorial-angular to “Compare & pull request”. In doing so, make sure that you are comparing to angular-step-5 into base: angular-step-5.