Create my first Typescript library and create also a demo page using Parcel and Netlify

I’m creating my first Typescript library that exports some functions.

The structure of the project is this:

myProject
  |_ assets/
    |_ logo.png
  |_ coverage
    |_ ...some stuff
  |_ demo
    |_ index.html
    |_ index.ts
    |_ style.css
  |_ dist
    |_ lib
      |_ ...some files
    |_ index.d.ts
    |_ index.js
    |_ index.js.map
  |_ node_modules
  |_ src
    |_ lib/
      |_ types.ts
      |_ myFunctions.ts
    |_ index.ts
  |_ test
    |_ myFunctions.test.ts
  |_ .gitignore
  |_ jestconfig.json
  |_ package.json

index.ts is:

export { printSomething } from './lib/myFunctions'

myFunctions.ts is:

export function printSomething(something: any): void {
  console.log(something)
}

(Obviously, this is only an easy example, the important thing is the structure).

I tested my functions using Jest and all works.
So I decided to create a demo page: I create the demo folder and inside it I created index.html, index.ts, style.css.

Then I decide to use Parcel as bundler. Keep in mind that I’m a junior developer and it’s not still clear to me what exactly does a bundler. What I understood is that to run those files, I need a bundler.

So my package.json is:

{
  "name": "my-project",
  "version": "1.0.0",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "repository": {
    "type": "git",
    "url": "https://github.com/username/my-project.git"
  },
  "license": "MIT",
  "private": true,
  "files": [
    "dist/**/*"
  ],
  "scripts": {
    "compile": "tsc",
    "compile-watch": "tsc --watch",
    "test": "jest --config jestconfig.json",
    "test-watch": "jest --watch --config jestconfig.json",
    "coverage-watch": "yarn test --watchAll --coverage",
    "coverage-interactive-watch": "npx live-server --port=9000 coverage",
    "format": "prettier --write \"src/**/*.ts\" \"src/**/*.js\"",
    "lint": "tslint -p tsconfig.json",
    "prepublish": "rm -rf dist/ && tsc",
    "sanitize": "yarn format && yarn lint",
    "start:demo": "parcel demo/index.html",
    "build": "parcel build demo/index.html"
  },
  "devDependencies": {
    "@types/jest": "^25.1.4",
    "@types/lodash": "^4.14.149",
    "jest": "^25.1.0",
    "parcel-bundler": "^1.12.4",
    "prettier": "^1.19.1",
    "tachyons": "^4.11.1",
    "tachyons-extra": "^1.1.3",
    "ts-jest": "^25.2.1",
    "tslint": "^6.1.0",
    "tslint-config-prettier": "^1.18.0",
    "typescript": "^3.8.3"
  },
  "dependencies": {
    "lodash": "^4.17.15",
    "style.css": "^1.0.0"
  }
}

If I run yarn start:demo, the demo page on http://localhost:1234/ it works. Cool :sunglasses:

Now, my problem is that I would like to create a public site with the content of the demo page. How can I do that?

I think I have to use for example Netlify, but how? I follow the guide page and I set up Netlify in this way:

enter image description here

Build works but the result is that in https://my-project…netlify.com/ I get:

Page not found error

Someone can help me?

In package.json there is the build script "build": "parcel build demo/index.html" that I copied from the Parcel official guide but I’m not sure that is correct and/or necessary.

Sometimes I saw that in the Netlify settings Publish directory is set to build/. What does it mean? I have to create a build folder inside my project but where? In the root folder or in the demo folder? I have to create a netlify.toml file?

Summary: what I would like is create a library that:

  • exports some functions
  • a web site (the demo page) with for example, some visual examples.

Thanks a lot, I’m stuck :frowning:

Hey there, you’re on the right track!

The first step would be to figure out that “Publish directory”- Netlify works by generating your site assets with the build command that you enter here:
https://app.netlify.com/sites/YOUR-SITE/settings/deploys#build-settings

That process outputs everything your site needs into a new folder. The name of that folder has to go in the “Publish directory” field- the default directory differs by framework but it’s usually named something like “build” or “dist” or “public”. I believe you’ll want to set yours to “dist” and I’m guessing that because at the top of your package.json, you see dist in a few places.

Basically, when you run the build command (yarn build) locally, you want to see the name of the directory it creates. And then enter that in our UI. At this point, you shouldn’t need a netlify.toml.

Let us know if this helps or if we can answer any other questions :slight_smile:

One more thing! The instructions above are for serving a static site, which is what Netlify does. More on our architecture and Jamstack in general here:

Once you generate your library, you’ll need to include it in an index.html file in order to see it functioning.

Thank you jen for the answers. I change the build folder in demo-build so now the build settings are:

Base directory: Not set
Build command: yarn build
Publish directory: /demo-build

but I get the error failed during stage 'building site': Deploy directory 'demo-build' does not exist. What’s the problem?

Hey @beth, when you run yarn build locally, what is the directory that’s created? The path to that directory should go in “publish”, assuming you start from the root. So if yarn build generates a directory called build-demo at the same level as your assets, node_modules, etc., then your publish directory should be build-demo with no / beforehand. If it’s a few levels in, like demo/build-demo, then that full path should be your publish directory.

Let us know how it goes!

My build command is this "build": "parcel build demo/index.html --out-dir demo-build" so yes, it creates the folder demo-build at the same level as assets, node_modules, etc.
I tried removing / so with these build settings:

Base directory: Not set
Build command: yarn build
Publish directory: demo-build

but I get the same error: failed during stage 'building site': Deploy directory 'demo-build' does not exist.
It’s a bit strange

hmm, that is a little odd.

Can you try to empty the cache and redeploy - also, could you post your full package.json and your deploy log here pls? thanks.

My package.json:

{
  "name": "something",
  "version": "1.0.3",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "repository": {
    "type": "git",
    "url": "something"
  },

  "license": "MIT",
  "private": false,
  "files": [
    "dist/**/*"
  ],
  "scripts": {
    "compile": "tsc",
    "test": "jest --config jestconfig.json",
    "test-watch": "jest --watch --config jestconfig.json",
    "format": "prettier --write \"src/**/*.ts\" \"src/**/*.js\"",
    "lint": "tslint -p tsconfig.json",
    "prepublish": "rm -rf dist/ && tsc",
    "sanitize": "yarn format && yarn lint",
    "start:demo": "parcel demo/index.html",
    "build": "parcel build demo/index.html --out-dir demo-build"
  },
  "devDependencies": {
    "@types/jest": "^25.1.4",
    "@types/lodash": "^4.14.149",
    "codecov": "^3.6.5",
    "jest": "^25.1.0",
    "parcel-bundler": "^1.12.4",
    "prettier": "^1.19.1",
    "tachyons": "^4.11.1",
    "tachyons-extra": "^1.1.3",
    "ts-jest": "^25.2.1",
    "tslint": "^6.1.0",
    "tslint-config-prettier": "^1.18.0",
    "typescript": "^3.8.3"
  },
  "dependencies": {
    "d3-array": "^2.4.0",
    "d3-axis": "^1.0.12",
    "d3-scale": "^3.2.1",
    "d3-selection": "^1.4.1",
    "date-fns": "^2.11.0",
    "lodash": "^4.17.15",
    "style.css": "^1.0.0"
  }
}

The deploy log:

6:22:11 PM: Build ready to start
6:22:22 PM: build-image version: 2dbd444fcdce00cf06325060a8238d5ae3e86774
6:22:22 PM: build-image tag: v3.3.7
6:22:22 PM: buildbot version: 7f867b365e4c3934ca5b72b9d51f0a4d1f96685d
6:22:23 PM: Fetching cached dependencies
6:22:23 PM: Starting to download cache of 254.9KB
6:22:23 PM: Finished downloading cache in 82.015543ms
6:22:23 PM: Starting to extract cache
6:22:23 PM: Failed to fetch cache, continuing with build
6:22:23 PM: Starting to prepare the repo for build
6:22:23 PM: No cached dependencies found. Cloning fresh repo
6:22:23 PM: git clone https://github.com/mygitrepository
6:22:25 PM: Preparing Git Reference refs/heads/master
6:22:25 PM: Starting build script
6:22:25 PM: Installing dependencies
6:22:26 PM: Downloading and installing node v10.20.0...
6:22:27 PM: Downloading https://nodejs.org/dist/v10.20.0/node-v10.20.0-linux-x64.tar.xz...
6:22:27 PM: 
###################
6:22:27 PM:                  27.0%
6:22:27 PM: 
##################
6:22:27 PM: ###################################################### 100.0%
6:22:27 PM: Computing checksum with sha256sum
6:22:27 PM: Checksums matched!
6:22:30 PM: Now using node v10.20.0 (npm v6.14.4)
6:22:30 PM: Attempting ruby version 2.6.2, read from environment
6:22:31 PM: Using ruby version 2.6.2
6:22:31 PM: Using PHP version 5.6
6:22:31 PM: Started restoring cached node modules
6:22:31 PM: Finished restoring cached node modules
6:22:31 PM: Started restoring cached yarn cache
6:22:31 PM: Finished restoring cached yarn cache
6:22:31 PM: Installing yarn at version 1.17.0
6:22:31 PM: Installing Yarn!
6:22:31 PM: > Downloading tarball...
6:22:31 PM: [1/2]: https://yarnpkg.com/downloads/1.17.0/
6:22:31 PM: yarn-v1.17.0.tar.gz --> /tmp/yarn.tar.gz.DmV48w8uMX
6:22:31 PM:   % Total    % Received % Xferd  Average Speed   Time    Time     Ti
6:22:31 PM: me  Current
6:22:31 PM:                                  Dload  Upload   Tot
6:22:31 PM: al   Spent    Left  Speed
6:22:31 PM: 
  0     0    0
6:22:31 PM:   0    0     0      0      0 --:--:-- -
6:22:31 PM: -:--:-- --:--:--
6:22:31 PM: 0
6:22:32 PM: 
  0     0    0
6:22:32 PM:   0    0     0      0      0 --:--:-- --:--:-- --:--:--     0
6:22:32 PM: 
100    80  100    80    0     0    256
6:22:32 PM:       0 --:--:-- --:--:-- --:--:--   256
6:22:32 PM: 
100    93  100    93    0     0    144      0 --:--:-- --:--:-- --:--:--   144
6:22:32 PM: 1
6:22:32 PM: 0
6:22:32 PM: 0   609  100   609    0     0    664      0 --:--:-- --:--:-- --:--:--   664
6:22:33 PM: 
  0 1213k    0     0    0     0      0      0 -
6:22:33 PM: -:--:--  0:00:01 --:--:--     0
6:22:33 PM: 
100 1213k  100 1213k    0     0   895k      0  0
6:22:33 PM: :00:01  0:00:01 --:--:-- 7013k
6:22:33 PM: [2/2]: h
6:22:33 PM: ttps://yarnpkg.com/downloads/1.17.0/yarn
6:22:33 PM: -v1.17.0.tar.g
6:22:33 PM: z.asc --> /tmp/yarn.tar.g
6:22:33 PM: z.DmV48w8uMX.asc
6:22:33 PM: 
100    84  100    84    0     0   2923
6:22:33 PM: 0 --:--:-- --:--:-- --:--:--  2923
6:22:33 PM: 
100    97  100
6:22:33 PM:     97    0     0   1734      0 --:--:-- --:--:-- --:--:--  1734
6:22:33 PM: 
100   613  100   613    0
6:22:33 PM:   0   6841      0 --:--:-- --:--:-- --:--:--  6841
6:22:33 PM: 
100   832  100   832    0
6:22:33 PM:     0   6557      0 --:--:-- --:--:-- --:--:--  6557
6:22:33 PM: > Verifying integrity...
6:22:33 PM: gpg: Signature made Fri 14 Jun 2019 06:55:58 PM UTC using RSA key ID 69475BAA
6:22:33 PM: gpg: Good signature from "Yarn Packaging <yarn@dan.cx>"
6:22:33 PM: gpg: WARNING: This key is not certified with a trusted signature!
6:22:33 PM: gpg:          There is no indication that the signature belongs to the owner.
6:22:33 PM: Primary key fingerprint: 72EC F46A 56B4 AD39 C907  BBB7 1646 B01B 86E5 0310
6:22:33 PM:      Subkey fingerprint: 6D98 490C 6F1A CDDD 448E  4595 4F77 6793 6947 5BAA
6:22:33 PM: > GPG signature looks good
6:22:33 PM: > Extracting to ~/.yarn...
6:22:33 PM: > Adding to $PATH...
6:22:34 PM: > Successfully installed Yarn 1.17.0! Please open another terminal where the `yarn` command will now be available.
6:22:34 PM: Installing NPM modules using Yarn version 1.17.0
6:22:35 PM: yarn install v1.17.0
6:22:35 PM: [1/4] Resolving packages...
6:22:36 PM: [2/4] Fetching packages...
6:22:49 PM: info fsevents@2.1.2: The platform "linux" is incompatible with this module.
6:22:49 PM: info "fsevents@2.1.2" is an optional dependency and failed compatibility check. Excluding it from installation.
6:22:49 PM: info fsevents@1.2.11: The platform "linux" is incompatible with this module.
6:22:49 PM: info "fsevents@1.2.11" is an optional dependency and failed compatibility check. Excluding it from installation.
6:22:49 PM: [3/4] Linking dependencies...
6:22:55 PM: [4/4] Building fresh packages...
6:22:55 PM: success Saved lockfile.
6:22:56 PM: $ rm -rf dist/ && tsc
6:23:03 PM: Done in 28.90s.
6:23:04 PM: NPM modules installed using Yarn
6:23:04 PM: Started restoring cached go cache
6:23:04 PM: Finished restoring cached go cache
6:23:04 PM: unset GOOS;
6:23:04 PM: unset GOARCH;
6:23:04 PM: export GOROOT='/opt/buildhome/.gimme/versions/go1.12.linux.amd64';
6:23:04 PM: export PATH="/opt/buildhome/.gimme/versions/go1.12.linux.amd64/bin:${PATH}";
6:23:04 PM: go version >&2;
6:23:04 PM: export GIMME_ENV='/opt/buildhome/.gimme/env/go1.12.linux.amd64.env';
6:23:04 PM: go version go1.12 linux/amd64
6:23:04 PM: Installing missing commands
6:23:04 PM: Verify run directory
6:23:04 PM: Executing user command: yarn build
6:23:04 PM: yarn run v1.17.0
6:23:04 PM: $ parcel build demo/index.html
6:23:36 PM: ✨  Built in 31.09s.
6:23:36 PM: dist/demo.3ecfee52.js.map      ⚠️  1.75 MB     230ms
6:23:36 PM: dist/demo.3ecfee52.js           475.38 KB    29.55s
6:23:36 PM: dist/demo.35e13efb.css.map      179.79 KB      12ms
6:23:36 PM: dist/demo.35e13efb.css           83.81 KB     9.66s
6:23:36 PM: dist/style.101f397a.css.map       1.04 KB      12ms
6:23:36 PM: dist/style.101f397a.css             574 B     3.65s
6:23:36 PM: dist/index.html                     218 B     1.29s
6:23:37 PM: Done in 32.49s.
6:23:37 PM: Skipping functions preparation step: no functions directory set
6:23:37 PM: Caching artifacts
6:23:37 PM: Started saving node modules
6:23:37 PM: Finished saving node modules
6:23:37 PM: Started saving yarn cache
6:23:37 PM: Finished saving yarn cache
6:23:37 PM: Started saving pip cache
6:23:37 PM: Finished saving pip cache
6:23:37 PM: Started saving emacs cask dependencies
6:23:37 PM: Finished saving emacs cask dependencies
6:23:37 PM: Started saving maven dependencies
6:23:37 PM: Finished saving maven dependencies
6:23:37 PM: Started saving boot dependencies
6:23:37 PM: Finished saving boot dependencies
6:23:37 PM: Started saving go dependencies
6:23:37 PM: Finished saving go dependencies
6:23:42 PM: Build script success
6:23:42 PM: Failing build: Failed to build site
6:23:42 PM: failed during stage 'building site': Deploy directory 'demo-build' does not exist
6:23:42 PM: Finished processing build request in 1m19.700776271s

The directory you have there is relative to the root of your repo directory. When you build locally is demo-build in the root of your repo? What’s the Netlify site that you’re having trouble with? Also if the repo is public, can you share a link to it? Thanks.

I missed to push the last changes to package.json. Sorry, and thanks you all

1 Like