5. Deploying to IBM Cloud
This step takes what we’ve built so far and optimizes the app for a production environment. We’ll be deploying the production build to IBM Cloud.
- Fork, clone and branch
- Create IBM Cloud account
- Optimize Sass
- Build for production
- Create manifest file
- Create static file
- Deploy app
- Submit pull request
A preview of what you’ll build (visually no different, but built for production):
This tutorial has an accompanying GitHub repository called carbon-tutorial-vue 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.
git fetch upstreamgit checkout -b vue-step-5 upstream/vue-step-5
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/_carbon.scss, you’ll see one
@import that is pulling in Carbon’s
full Sass build.
src/styles/_carbon.scss$feature-flags: (grid-columns-16: true,);@import 'carbon-components/scss/globals/scss/styles.scss';
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
$feature-flags Sass map, replace the
styles.scss import only with:
src/styles/_carbon.scss// Feature flags$css--font-face: true;$css--plex: true;// Global styles@import 'carbon-components/scss/globals/scss/css--font-face';@import 'carbon-components/scss/globals/grid/grid';// Carbon components
In comparing to the included
styles.scss, you may be asking what happened to
_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
package.json, you’ll find
yarn build to run
vue-cli-service build. This builds the app for production to the
folder. It bundles Vue in production mode and optimizes the build for the best
performance. It even goes so far to minify files and include hashes in filenames
As a lot of this may seem like magic since the build configuration came from the Vue CLI, 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
to deploy our webapp. We’ll be using the
cf command line interface (CLI). If
cf --help doesn’t work for you, chances are you need to
install the CLI.
With the IBM Cloud CLI installed, next, we need to create a
in the root of the project. To prevent multiple apps trying to use the
carbon-tutorial-vue name, replace
USERNAME with your GitHub username below
to make sure our apps are uniquely named.
manifest.yml---applications:- name: carbon-tutorial-vue-USERNAMEmemory: 64Mbuildpack: https://github.com/cloudfoundry/staticfile-buildpack.git
Create a new static file in the root of the project named
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 IBM Cloud. 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
src/ because the only folder being served is
Login to IBM Cloud with:
cf login -a https://api.us-south.cf.cloud.ibm.com --sso
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.
cf push -f manifest.yml
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
"deploy": "rm -rf ./dist && yarn build && cf push -f manifest.yml"
Next time you want to deploy, you can simply run
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.
Run the CI check to make sure we’re all set to submit a pull request.
Before we can create a pull request, stage and commit all of your changes:
git add --all && git commit -m "feat(tutorial): complete step 5"
Then, push to your repository:
git push origin vue-step-5
to “Compare & pull request”. In doing so, make sure that you are comparing to