metonym / svelte-intro

Learn core Svelte concepts by building a simple web app with Watson NLU and the Carbon Design System.

svelte-intro

Learn core Svelte concepts by building a simple web app with Watson Natural Language Understanding and the Carbon Design System.

Table of Contents

• Background
• Learning objectives
• Slides
• Running locally
  • Prerequisites
  • 1. Create a Watson NLU service
  • 2. Configure your environment
  • 3. Install project dependencies
    • Project structure
  • 4. Run the app
  • 5. Build the app
• Resources

Background

Svelte is a compiler used to build user interfaces and frontend web applications. Compared to libraries and frameworks like React, Vue and Angular, Svelte performs most optimizations at the build step, reducing the amount of JavaScript shipped to the user. In addition, what makes Svelte appealing is its concise language syntax and usage of the label operator ($:) to denote reactive assignments, declarations and statements.

Watson Natural Language Understanding (NLU) is an IBM Cloud advanced text analytics service. It provides a number of APIs to extract entities, keywords, concepts (and more) as well as sentiment analysis.

Learning objectives

In this workshop, we will learn core Svelte concepts by analyzing several articles from the IBM Corporate Social Responsibility blog using Watson NLU. We will use the Carbon Design System – IBM's open source digital product design system – to build out the UI.

Svelte concepts

• component props/state
• reactivity
• lifecycle methods
• two-way binding

What you'll build...

Slides

[TBD]

Running locally

Prerequisites

• IBM Cloud account (sign up: https://ibm.biz/BdqVLm)
• Watson NLU service
• Node.js
• yarn or npm

1. Create a Watson NLU service

After signing up for an IBM Cloud account, navigate to the Watson Natural Language Understanding service in the Cloud catalog.

Create a new service. You can customize the region and service name.

2. Configure your environment

After provisioning an NLU service, add the service credentials to your local environment.

Credentials needed:

• API Key
• Service endpoint URL

Locate the credentials on the service instance page.

Rename the sample environment file .env.sample to .env.

Note: .env is ignored by git and should not be checked into source control.

mv .env.sample .env

Copy the API key and URL values into .env:

#.env

- API_KEY=
+ API_KEY=<YOUR_API_KEY>

- URL=
+ URL=<YOUR_URL>

3. Install project dependencies

Use yarn or npm to install the local project dependencies.

yarn install
# OR
npm install

Project structure

The frontend is bundled with webpack.

The backend is an Express server that uses the IBM Watson Node.js SDK to interact with the NLU service.

│
└───.env // file containing service credentials
└───server.js // Express server
└───webpack.config.js // Webpack configuration
└───src
    └──App.svelte // Svelte sources
    └──index.html // HTML template
    └──index.js // entrypoint

4. Run the app

This command runs the app in development mode. The Express server spawns on port 3000 while webpack will serve the frontend (compiled from src) on port 8080.

Changes made to files in the src folder or server.js will trigger a reload.

yarn dev
# OR
npm run dev

Visit http://localhost:8080/.

5. Build the app

This command instructs webpack to build the frontend app for production. The minified, static assets are outputted to the build folder, which the Express server will serve.

yarn build
# OR
npm run build

Finally, run yarn start or npm run start to start the app.

---

Resources

Watson Natural Language Understanding API documentation (IBM Cloud)

IBM Developer

Introduction to Svelte and its core concepts (IBM Developer)