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
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:
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