Consuming Your Library via NPM

placeholder

This is a premium lesson.

Subscribe to get access to the entire course.

Sign up now

Now that you’ve published your library to NPM, finish off this section by installing your package.

Instead of giving you a repo to clone, let’s build the repo from scratch.

Open up your terminal and navigate to your coding directory, where you keep all your projects. Run the following code:

# These are UNIX compatible scripts

mkdir odyssey-consuming-library
cd odyssey-consuming-library
npm init -y
npm i <component-library-name>
npm i -D @web/dev-server
touch index.html

Open up index.html in VS Code and add the following boilerplate:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<link rel="stylesheet" href="./node_modules/<component-library-name>/src/styles/style.css" />
		<title>Component Odyssey Test</title>
	</head>
	<body>
		<odyssey-checkbox></odyssey-checkbox>
		<button data-color="purple" class="odyssey-button"></button>

		<script type="module">
			// replace```