Table of Contents

• Summary
• Requirements
• Create a Kitura application
• Install the IBM Carbon Design System
• Build Your Web Page
• Run
• License

Summary

This application provides a starting point for creating Swift applications running on Kitura and using IBM Carbon Design System.

These are the steps to create this sample:

1. Create a Kitura Swift application using a Yeoman generator
2. Install IBM Carbon Design System artifacts using npm install
3. Build out a web page and integrate the Carbon Design components of interest

This sample consists of a web page with a single card component:

Requirements

• Swift 3
• NodeJS
• IBM Carbon Design System

Create a Kitura application

Create a Kitura Swift application for the backend using the Swift Server generator.

This module is a Yeoman generator for creating REST webservices based on the Kitura web framework with the Swift language.

This generator and the Yeoman library run on Node.js and generate a Swift 3 application. This application serves as the backend of this sample project and statically serves an HTML page that contains a Cabon Design component.

Installation

To use this module, you will need Node.js and Swift 3 installed on your Linux or macOS system. You can get Node.js from https://nodejs.org and Swift 3 from https://swift.org/download.

You will also need the Yeoman command line utility yo installed in your global Node.js module directory.
To install yo, use: npm install -g yo

To install this generator, use: npm install -g git+https://github.com/IBM-Swift/generator-swiftserver

Quick start

To create a Swift Server project, use: yo swiftserver. Using the command line interface, select a project name and directory name. Then select the following options:

• Scaffold a starter
• Web
• Static web file serving (leave other options unselected)
• Leave all other options unselected for the most bare-bones Swift project or choose to add persistence services or other Bluemix deployment options.

Static web file serving

The resulting application includes a public directory in the root of the project. The contents of this directory will be served as static content using the built-in Kitura StaticFileServer module.

This content is hosted on /. For example, if you want to view public/myfile.html and the application is hosted at https://localhost:8080, go to https://localhost:8080/myfile.html.

Install the IBM Carbon Design System

The Carbon Component Library provides frontend developers & engineers a collection of reusable HTML and SCSS partials to build websites and user interfaces. Adopting the library enables developers to use consistent markup, styles, and behavior in prototype and production work.

  cd <directory of Swift project created above>
  $ npm install --save carbon-components

This will create a node_modules directory with the Carbon Design library, which contains all components available for your project.

Build your web page

Create your own markup that includes Carbon Design components or copy artifacts from this repository.

This sample uses gulp as a task manager to copy scss and image artifacts into the public directory, from where the Kitura server will statically serve them.

The client directory contains the HTML, image files and scss necessary to render the Carbon Design card component.

node_modules contains the Carbon Design components, along with scss and fonts, that are generated in the installation step above.

Copy the following artifacts into your sample:

1. client directory
2. package.json
3. gulpfile.js

Run

To build and run the application:

1. swift build
2. npm install
3. gulp
4. .build/debug/<application name>

Then access http://localhost:8080/ in your browser. This sample shows a card component from Carbon Design. The markup was copied directly from their documentation.

License

All generated content is available for use and modification under the permissive MIT License (see LICENSE file), with the exception of SwaggerUI which is licensed under an Apache-2.0 license (see NOTICES.txt file).