Helloooooooo! Hope you're doing great! This is SMY! 👋 Let's jump right in 🚀 Part 1: Our First MVP Part 2: Structure and API Part 3: Making Test Apps Part 4: Publishing to npm Part 5: CDN for Browsers This is Part 3 of our SDK development series where we will dive into creating test apps for react, browser, node, and legacy node. Contents: ⚡ Setting up tsup for different execution environments
⚡ Creating our apps Step 1: Setting Up tsup for Different Environments At the root of the project create tsup.config.ts file, and paste the following content: import { defineConfig } from "tsup";

export default defineConfig({
  clean: true,
  dts: true,
  entry: ["src/index.ts"],
  format: ["cjs", "esm", "iife"],
  minify: true,
}); clean - Clean the output directory before each build. dts - type definitions for TypeScript. entry - specifying the entry point. format - cjs for legacy, esm for newer node projects and iife for browsers. minify - minifies our code and reduces bundle size. No extra configuration is needed, as tsup will automatically look for this file and handle everything for us :) Now, exit and re-rerun the build command. npm run build You will see the following output in our dist folder. index.cjs - for CJS output index.js - for ESM index.global.js - for browsers Step 2: Create a Node App In example-apps/Node, create a index.js file. Paste the following content: import sdk from "../../dist/index.js";

console.log(await sdk.fetchUsers()); Now, run the file with a node in a separate terminal, and head over to the folder: node index.js You will see the output in the terminal. Step 3: Create a Legacy Node App In example-apps/Legacy-Node, create a index.cjs file, and paste the following content: const sdk = require("../../dist/index.cjs");

sdk.default.fetchUsers().then((users) => console.log(users)); Now, run the file with a node in a separate terminal, and head over to the folder: node index.cjs You will see the output in the terminal. Step 4: Create a Browser App In example-apps/Browser, create a index.html file, and paste the following content: <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../../dist/index.global.js"></script>
  </head>
  <body>
    This is a Test HTML

    <script>
      sdk.fetchUsers().then((users) => console.log(users));
    </script>
  </body>
</html> Open the file in the browser, you should see the following response in the inspect element's console tab: Step 5: Create a React App Create a Link to our SDK to behave as a library for projects without publishing. npm link In example-apps, create a react app, for example, with vite: npm create vite@latest After successfully creating a react app, run the following command in the React root folder to link our SDK. npm link ts-lib In place of ts-lib, it should be your SDK/Library name in the package.json. After creating the React app, open a component file like App.jsx, and integrate SDK like the following: import sdk from "ts-lib";

console.log(await sdk.fetchUsers()); Full view: import { useState } from "react";
import reactLogo from "./assets/react.svg";
import viteLogo from "/vite.svg";
import "./App.css";
import sdk from "ts-lib";

console.log(await sdk.fetchUsers());

function App() {
  const [count, setCount] = useState(0);

  return (
    <>
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.tsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  );
}

export default App; Run the react App, and head over to the console; it should look like the following: Wrapping Up: We just completed the steps to build and run our SDK in different environments. Head over to Part 4 to publish our SDK. ..... Now, you're equipped with the knowledge to build your own SDK. Happy coding! 🚀 That's it, folks! Hope it was a good read for you. Thank you! ✨ 👉 Follow me GitHub LinkedIn Helloooooooo! Helloooooooo! Hope you're doing great! This is SMY! 👋 Let's jump right in 🚀 Part 1: Our First MVP Part 1: Our First MVP Part 2: Structure and API Part 2: Structure and API Part 3: Making Test Apps Part 3: Making Test Apps Part 4: Publishing to npm Part 4: Publishing to npm Part 5: CDN for Browsers Part 5: CDN for Browsers This is Part 3 of our SDK development series where we will dive into creating test apps for react, browser, node, and legacy node. SDK development series Contents: ⚡ Setting up tsup for different execution environments ⚡ Creating our apps ⚡ Setting up tsup for different execution environments Setting up tsup for different execution environments ⚡ Creating our apps Creating our apps Step 1: Setting Up tsup for Different Environments tsup At the root of the project create tsup.config.ts file, and paste the following content: tsup.config.ts import { defineConfig } from "tsup";

export default defineConfig({
  clean: true,
  dts: true,
  entry: ["src/index.ts"],
  format: ["cjs", "esm", "iife"],
  minify: true,
}); import { defineConfig } from "tsup";

export default defineConfig({
  clean: true,
  dts: true,
  entry: ["src/index.ts"],
  format: ["cjs", "esm", "iife"],
  minify: true,
}); clean - Clean the output directory before each build. clean dts - type definitions for TypeScript. dts entry - specifying the entry point. entry format - cjs for legacy, esm for newer node projects and iife for browsers. format cjs esm iife minify - minifies our code and reduces bundle size. minify No extra configuration is needed, as tsup will automatically look for this file and handle everything for us :) tsup Now, exit and re-rerun the build command. build npm run build npm run build You will see the following output in our dist folder. dist index.cjs - for CJS output index.cjs index.js - for ESM index.js index.global.js - for browsers index.global.js Step 2: Create a Node App In example-apps/Node , create a index.js file. Paste the following content: example-apps/Node index.js import sdk from "../../dist/index.js";

console.log(await sdk.fetchUsers()); import sdk from "../../dist/index.js";

console.log(await sdk.fetchUsers()); Now, run the file with a node in a separate terminal, and head over to the folder: node index.js node index.js You will see the output in the terminal. Step 3: Create a Legacy Node App In example-apps/Legacy-Node , create a index.cjs file, and paste the following content: example-apps/Legacy-Node index.cjs const sdk = require("../../dist/index.cjs");

sdk.default.fetchUsers().then((users) => console.log(users)); const sdk = require("../../dist/index.cjs");

sdk.default.fetchUsers().then((users) => console.log(users)); Now, run the file with a node in a separate terminal, and head over to the folder: node index.cjs node index.cjs You will see the output in the terminal. Step 4: Create a Browser App In example-apps/Browser , create a index.html file, and paste the following content: example-apps/Browser index.html <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../../dist/index.global.js"></script>
  </head>
  <body>
    This is a Test HTML

    <script>
      sdk.fetchUsers().then((users) => console.log(users));
    </script>
  </body>
</html> <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../../dist/index.global.js"></script>
  </head>
  <body>
    This is a Test HTML

    <script>
      sdk.fetchUsers().then((users) => console.log(users));
    </script>
  </body>
</html> Open the file in the browser, you should see the following response in the inspect element's console tab: Step 5: Create a React App Create a Link to our SDK to behave as a library for projects without publishing. npm link npm link In example-apps , create a react app, for example, with vite: example-apps npm create vite@latest npm create vite@latest After successfully creating a react app, run the following command in the React root folder to link our SDK. npm link ts-lib npm link ts-lib In place of ts-lib , it should be your SDK/Library name in the package.json. ts-lib After creating the React app, open a component file like App.jsx , and integrate SDK like the following: App.jsx import sdk from "ts-lib";

console.log(await sdk.fetchUsers()); import sdk from "ts-lib";

console.log(await sdk.fetchUsers()); Full view: import { useState } from "react";
import reactLogo from "./assets/react.svg";
import viteLogo from "/vite.svg";
import "./App.css";
import sdk from "ts-lib";

console.log(await sdk.fetchUsers());

function App() {
  const [count, setCount] = useState(0);

  return (
    <>
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.tsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  );
}

export default App; import { useState } from "react";
import reactLogo from "./assets/react.svg";
import viteLogo from "/vite.svg";
import "./App.css";
import sdk from "ts-lib";

console.log(await sdk.fetchUsers());

function App() {
  const [count, setCount] = useState(0);

  return (
    <>
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.tsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  );
}

export default App; Run the react App, and head over to the console; it should look like the following: Wrapping Up: We just completed the steps to build and run our SDK in different environments. Head over to Part 4 to publish our SDK. Part 4 ..... Now, you're equipped with the knowledge to build your own SDK. Happy coding! 🚀 That's it, folks! Hope it was a good read for you. Thank you! ✨ 👉 Follow me GitHub GitHub LinkedIn LinkedIn

This story contains new, firsthand information uncovered by the writer.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

A 5-Year-Old Could Follow This TypeScript SDK Development Guide ~ Part 4: Publishing to NPM

A 5-Year-Old Could Follow This TypeScript SDK Development Guide ~ Part 3: Making Test Apps

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

4 Ways to Destructure Array in JavaScript & Make Your Code Look Clean

Why Being Likable At Work Matters

Windows Sticky Keys Exploit: The War Veteran That Never Dies

Is ‘bias for action’ making product managers lazier?

Zero People Charged With Online Pirating, Swedish Prosecutor's Office Reports

4 Ways to Destructure Array in JavaScript & Make Your Code Look Clean

Why Being Likable At Work Matters

Windows Sticky Keys Exploit: The War Veteran That Never Dies

Is ‘bias for action’ making product managers lazier?

Zero People Charged With Online Pirating, Swedish Prosecutor's Office Reports

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps