Lab 10: Release my tool on NPM
Tags: opensource, typescript, javascript, programming
Published: 2021-12-04 05:15:12

My tôl have finally released on [npm](https://www.npmjs.com/package/ts_ssg) and let's me tell you it has been struggled for me due to my set up

## Read the doc properly 

I was rushing to finish this lab but that what actually slow me down like a lot. First I come in to my project changing my `package,json` to build the project 

```json
"build": "tsc -p ."
```

Then after that, I add `bin` to indicate the entry point of my tool or I can say ask the computer to run that exact file when running my tool. 

```json
"bin": {
    "ts_ssg": "./lib/index.js"
  }
```

## Here come the trouble 
So I run the build and then use `npm link ts_ssg` to test out my tools, it run fine inside the tool repo but when I come outside and try to run it but then an error come up

```bash
Error: ENOENT: no such file or directory, copyfile 'src/styles/index.css' -> 'dist/index.css'
    at Object.copyFileSync (fs.js:2061:3)
    at Object.<anonymous> (C:\Users\Administrator\Desktop\repo\TS-SSG\lib\index.js:35:4)
    at Module._compile (internal/modules/cjs/loader.js:1085:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)   
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:76:12)
    at internal/main/run_main_module.js:17:47 {
  errno: -4058,
  syscall: 'copyfile',
  code: 'ENOENT',
  path: 'src/styles/index.css',
  dest: 'dist/index.css'
}
```

It basically say that the `src/styles/index.css` path could not resolve because I'm using a relative path and that path did not exist in the parent level so I have to chance it to an absolute path so I made the change in my `index.ts` 

```ts
fs.copyFileSync(path.resolve(__dirname, '../styles/index.css'), `${outputDir}/index.css`);
```
I also decide to move the `styles/index.css` to the equal level with the `src` folder and the `lib` folder (the build version) so the path to the `index.css` is identical for both of the version.

Then after that problem solved I got 2 other things coming up when trying to publish my tools to `npm`. First thing would be having an unique name for my package so I came in the `package.json` and change it 

```json
"name": "ts_ssg"
```  

Then the second thing would be confirmed my newly created `npm` account. But first I upload the test version first by pumping the `minor` version using `npm version minor` and then push my commit to Github using `git push --follow-tags`. I thought that would be it but my CI failed and after looking at the log I regconized that my build come out with `test` folder being emptied out so I made the final change to not include the `__test__` folder when running  build by adding these in `tsconfig.json`

```json
"include": ["src/*.ts"],
"exclude": ["src/__tests__"]
```

Then after I was happy about it I publish a couples more `minor` version then decide to pump the `major` version to `npm version major` .You can test my tool out [here](https://www.npmjs.com/package/ts_ssg)