Learn core Svelte concepts by building a simple web app with Watson Natural Language Understanding and the Carbon Design System.
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.
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
What you'll build...
[TBD]
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.
After provisioning an NLU service, add the service credentials to your local environment.
Credentials needed:
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>
Use yarn or npm to install the local project dependencies.
yarn install
# OR
npm install
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
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/.
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.
Watson Natural Language Understanding API documentation (IBM Cloud)
Introduction to Svelte and its core concepts (IBM Developer)