Code Monkey home page Code Monkey logo

create-library's Introduction

maintenance-status npm (scoped)

NPM Library Initializer

An opinionated npm package initializer. Scaffolds an npm library tree with fully configured CI automation, using a predefined template.

Use this to easily scaffold an NPM package for use within TELUS.

Why and when should I use this?

This starter kit is opinionated, and it is meant to encourage a good set of practices, but it is also flexible from a configuration point of view. We encourage teams to use the tools we have included in the template for setting up a solid and reliable pipeline that will allow for a good developer workflow and collaboration process. You are free to remove and/or add additional jobs or steps in your pipeline if that makes sense for your project and team.

Here are some of the principles and concepts we have based this on:

  • We use Git feature branches, which allow us to isolate the development work and instantly get feedback as to how the changes impact the unit tests and lint checks (using Github actions and integrated status checks).
  • We believe in the power of automation, which is why we have opted for automated semantic versioning and releasing using semantic-release. The template pipeline is configured to only run the release step on the master branch, which is why it is vital that only good code gets pushed to it.
  • Given this, we encourage implementing branch protection for the master branch and merging changes into it following a pull request process, with at least one approval required. Having the unit tests and lint checks run in the CI pipeline automatically allows the PR reviewers to focus on the actual code changes, without having to always pull the respective branch locally to confirm no issues are introduced.
  • Automation of the package release workflow is made possible by following formalized git commit conventions, more specifically conventional-commit-conventions. This removes the immediate connection between human emotions and version numbers, strictly following the Semantic Versioning specs. Please refer to our [semantic-release][guides-semantic-release] guide for more details about how this works.
  • We are fans of configuration as code, which is why we are taking advantage of Github's Probot framework to store the repository settings as code. Please review these and configure as needed. We encourage the practice of squashing commits and keeping a clean commit history (without standard merge commits cluttering the history). If squashing commits is a practice your team chooses to use, you will have the responsibility to ensure that the squashed commit message follows the Angular commit conventions and captures all included changes correctly.
  • We believe there is a lot of value in having consistent code style across all of our projects, which is why we have centralized the configuration of our code quality and style checking tools in external libraries, such as @telus/telus-standard, @telus/remark-config, etc. We encourage teams to use our centralized config packages and not override particular rules; our configuration is open to suggestions to contributions (feel free to add issues and/or open PRs in the repositories of the above mentioned packages).
  • We believe in automation and in leveraging automated code formatters such as prettier. The scaffolded library will be configured out of the box to automatically format all the staged files when the user commits. For that, we are using husky to configure the pre-commit hook and restrict the formatting to the staged files that are part of the commit.

Requirements

  • npm >= 8.x
  • node >= 16.*

What's included?

This NPM library initializer is a CLI tool that makes the process of creating and publishing a new NPM package significantly easier and faster. Here's what you get out of the box:

  • Scaffolded NPM library, with automatically generated package.json and Github settings based on user input
  • Github Actions for a standard workflow, including installing dependencies, testing, linting, and automated releases
  • Automated version management and NPM package publishing using semantic-release, that uses formalized commit message convention to document changes in the codebase
  • Basic setup for unit tests with tap
  • Security auditing using npm audit
  • .editorconfig linting using editorconfig-checker
  • Javascript linting using telus-standard, and a command to automatically fix most small issues
  • Automated dependency updates using Dependabot
  • Github repository settings as code living in the repository of your library (see [probot/settings][probot-settings] for more details)

Some of the tools mentioned above rely on centralized configuration files, that allow us to achieve consistency across all of the applications built by our team, and remove duplicated configs across all of our repositories. You are welcome to open a PR in either of these if you would like to suggest any changes:

Usage

mkdir my-new-project
cd my-new-project
npm init @telus/library
git init
npm install

or (automatically creates directory)

npm init @telus/library my-new-project
cd my-new-project
git init
npm install

When you run npm init @telus/library, you will be prompted with a few questions. Here's what you need to know to be ready:

  • if your project will be open source (Y/N)
  • project title
  • project description
  • repository name
  • license type (read more about license types)
  • keywords
  • maintainers (Github team slug)

What's this npm init magic?

The npm init command was solely used to create a new package.json file. As of npm v6.1.0, npm init can be used as an initializer by passing the name of the package you want initialized after npm init; npm will prepend create- to the name of the initializer you provide and use npx to temporarily install and execute that project. You can read more about this here.

As a result, this is what happens after you run npm init @telus/library:

  • The command npm init @telus/library gets transformed and run as npx @telus/create-library, which will install and execute the current package.
  • Executing this package means running index.js, which starts the CLI and collects all of your answers.
  • As soon as all answers are collected and minimally processed, they are used to populate placeholders (see template.js) in the files located inside the template folder.
  • The entire contents of the template folder (with the placeholders filled with your info) gets copied in the location where the command was run.
  • Now you can start working on your library!

Frequently Asked Questions

1. How do I migrate existing libraries?

If you are thinking of bringing these updates into an existing NPM library, and don't know where to start, here are a few tips on how you could approach this:

  • Create a new branch in your project.
  • While on your newly created branch, inside the main folder of your application, run npm init @telus/library.
  • You'll probably notice that this will create a few new files, and also modify some existing ones.
  • Use your IDE or any diffing tool to walk through the changes and remove any unnecessary files.
  • Pay special attention to package.json and your README files, as these will be completely replaced; however, you'll want to merge what you had in there before with what gets generated.
  • If you run into any issues, reach out to the Architecture Support Team.

2. How do I keep up with the updates?

Just run npm init @telus/library inside your root folder just like you did it the first time, and then review the diff to see what has changed and reconcile the changes with your existing code.

3. What if I have source and distribution files?

Configure babel and your build script(s) as needed. Then consider the following for a good setup:

  • Review the package.json files section and specify what files you would like included when your package is installed as a dependency. You can publish both your src and lib (or dist) if you would like your package consumers to be able to access the source code, or you can opt to only publish the distribution files (transpiled code). Feel free to add an .npmignore file if needed.
  • Consider adding a prepare or prepublishOnly script to automate building & updating the distribution files. You can read more about these if you run npm help scripts.
  • Consider adding your lib/dist folder to the .gitignore, especially if you automate the creation of these assets. It makes sense for only source files to be committed in the repository, especially as transpiled code is often hard to read (there have been incidents where malicious code has been included on purpose within the transpiled code and made it into published packages).

4. Why does my pipeline keep failing?

Probably because the lint job fails! There are a few kinds of linting we have included with this template, and you should expect some of these to occasionally fail even if you didn't make any changes to the code. Here's why:

  • We are linting for security vulnerabilities using npm audit. The dependencies you use might be ok today, but not tomorrow if a security issue is discovered!

5. Why doesn't the version inside package.json get updated?

Long gone are the days when you had to do semantic versioning manually! With semantic-release, the type of release required gets determined automatically based on your git commits, and with that you also get git tags and releases created automatically in your repository. semantic-release will take control of your package.json version field, which will get updated before publishing to the NPM registry, however the update won't be also pushed to Github.

We recommend leaving the version as is at initialization: "version": "0.0.0-development". Your NPM library consumers are encouraged to refer to the Github releases tab inside your repository or to the NPM registry page for info about published versions.

Additional guides

Before you start using this initializer and the tools inside it, please make sure you familiarize yourself with Github Actions and semantic-release. For more information about how these work and how they were configured, please refer to the documentation below:


Github: @telus • Twitter: @telusdigital

create-library's People

Contributors

abdutas avatar afzal-telus avatar akhileshti avatar alfredctchoi avatar amelcharai avatar ankushchourasia avatar anoopsinha97 avatar billxinli avatar dependabot[bot] avatar foxted avatar joeberardo avatar karlasamantha avatar kehkansha avatar kspaans avatar laynegeck avatar leo-li-b avatar mattcan avatar matthew-telus avatar nateaxcell avatar naveen-gupta1 avatar nitin-telus avatar renovate[bot] avatar rgupta1729 avatar ruxandrafed avatar semantic-release-bot avatar shubhamtyagi02 avatar stepmr avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

create-library's Issues

Library naming conventions missing

Add a note in the readme to make consumers aware of the fact that they should name the library wisely (consider scope, consider overlap with other existing/future libraries, etc.)

Action Required: Fix Renovate Configuration

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: undefined. Note: this is a nested preset so please contact the preset author if you are unable to fix it yourself.

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Detected dependencies

github-actions
.github/workflows/build.yaml
  • actions/checkout v2
  • actions/setup-node v2
.github/workflows/main.yaml
  • actions/checkout v2
  • actions/setup-node v2
  • actions/setup-python v2
  • google-github-actions/setup-gcloud v0.2.1
  • actions/checkout v2
.github/workflows/publish.yaml
  • actions/checkout v2
  • actions/setup-node v2
npm
package.json
  • fast-glob ^3.2.12
  • inquirer ^8.2.3
  • mkdirp ^1.0.4
  • spdx-license-list ^6.6.0
  • validate-npm-package-name ^3.0.0
  • yargs ^17.6.2
  • @commitlint/cli ^17.3.0
  • @commitlint/config-angular ^17.3.0
  • @telus/prettier-config ^3.2.4
  • @telus/remark-config ^2.2.5
  • @telus/semantic-release-config ^2.2.5
  • editorconfig-checker ^4.0.2
  • husky ^4.3.8
  • npm-run-all ^4.1.5
  • node >=14

  • Check this box to trigger a request for Renovate to run again on this repository

Remove `isnodesafe`

It's only doing offline check at the moment (not live results). Until it will be updated/fixed, it can be removed.

@telus/create-library package published on npmjs is broken due to missing dependency

I'm not able to leverage this initializer as the docs describe:

$ npm init @telus/library my-new-project
npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/@telus%2fcore - Not found
npm ERR! 404
npm ERR! 404  '@telus/core@^0.0.3' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404 It was specified as a dependency of '@telus/create-library'
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/phildufault/.npm/_logs/2019-12-30T18_59_33_802Z-debug.log
Install for @telus/create-library@latest failed with code 1

I'm following https://github.com/telus/create-library#-usage

The npm package published seems stale, as in the Git repo @telus/core is not referenced.

This might be a quick win, to publish a new release of this package to npmjs.org

I was able to clone this package's repo and use it locally to initialize a new npm library repo, so I believe just a new release to npmjs.org is needed.

Cheers! ❤️

Cannot find module '@telus/eslint-config' and remark

Checking out the latest master branch, we are seeing the following issues:

Cannot find module '@telus/eslint-config'
and
command not found: remark

Bills-MacBook-Pro:create-library billli$ npm run lint

> @telus/[email protected] lint /Users/billli/Code/telus/create-library
> npx npm-run-all -p -c -l lint:*

npx: installed 58 in 3.558s
[lint:deps ]
[lint:deps ] > @telus/[email protected] lint:deps /Users/billli/Code/telus/create-library
[lint:deps ] > npx updated
[lint:deps ]
[lint:audit]
[lint:audit] > @telus/[email protected] lint:audit /Users/billli/Code/telus/create-library
[lint:audit] > npm audit
[lint:audit]
[lint:js   ]
[lint:js   ] > @telus/[email protected] lint:js /Users/billli/Code/telus/create-library
[lint:js   ] > npx eslint .
[lint:js   ]
[lint:md   ]
[lint:md   ] > @telus/[email protected] lint:md /Users/billli/Code/telus/create-library
[lint:md   ] > npx remark --quiet --frail .
[lint:md   ]
[lint:ec   ]
[lint:ec   ] > @telus/[email protected] lint:ec /Users/billli/Code/telus/create-library
[lint:ec   ] > npx editorconfig-checker .
[lint:ec   ]
[lint:js   ] Cannot find module '@telus/eslint-config'
[lint:js   ] Referenced from: /Users/billli/Code/telus/create-library/.eslintrc
[lint:js   ] npm ERR! code ELIFECYCLE
[lint:js   ] npm ERR! errno 1
[lint:js   ] npm ERR! @telus/[email protected] lint:js: `npx eslint .`
[lint:js   ] npm ERR! Exit status 1
[lint:js   ] npm ERR!
[lint:js   ] npm ERR! Failed at the @telus/[email protected] lint:js script.
[lint:js   ] npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
[lint:js   ] npm WARN Local package.json exists, but node_modules missing, did you mean to install?
[lint:js   ]
[lint:js   ] npm ERR! A complete log of this run can be found in:
[lint:js   ] npm ERR!     /Users/billli/.npm/_logs/2019-01-08T02_26_17_683Z-debug.log
[lint:audit] === npm audit security report ===
[lint:audit]
[lint:audit] found 0 vulnerabilities
[lint:audit]  in 1014 scanned packages
[lint:deps ] npx: installed 1 in 1.81s
[lint:deps ] OUTDATED  	 ^2.2.4 → 2.2.6 	 fast-glob @ ^2.2.4
[lint:deps ] npm ERR! code ELIFECYCLE
[lint:deps ] npm ERR! errno 1
[lint:deps ] npm ERR! @telus/[email protected] lint:deps: `npx updated`
[lint:deps ] npm ERR! Exit status 1
[lint:deps ] npm ERR!
[lint:deps ] npm ERR! Failed at the @telus/[email protected] lint:deps script.
[lint:deps ] npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
[lint:deps ] npm WARN Local package.json exists, but node_modules missing, did you mean to install?
[lint:deps ]
[lint:deps ] npm ERR! A complete log of this run can be found in:
[lint:deps ] npm ERR!     /Users/billli/.npm/_logs/2019-01-08T02_26_19_836Z-debug.log
[lint:md   ] npx: installed 49 in 3.253s
[lint:md   ] command not found: remark
[lint:md   ] npm ERR! code ELIFECYCLE
[lint:md   ] npm ERR! errno 1
[lint:md   ] npm ERR! @telus/[email protected] lint:md: `npx remark --quiet --frail .`
[lint:md   ] npm ERR! Exit status 1
[lint:md   ] npm ERR!
[lint:md   ] npm ERR! Failed at the @telus/[email protected] lint:md script.
[lint:md   ] npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
[lint:md   ] npm WARN Local package.json exists, but node_modules missing, did you mean to install?
[lint:md   ]
[lint:md   ] npm ERR! A complete log of this run can be found in:
[lint:md   ] npm ERR!     /Users/billli/.npm/_logs/2019-01-08T02_26_20_425Z-debug.log
[lint:ec   ] npx: installed 127 in 5.447s
[lint:ec   ] sucessfully checked 34 files :)
ERROR: "lint:md" exited with 1.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @telus/[email protected] lint: `npx npm-run-all -p -c -l lint:*`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @telus/[email protected] lint script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/billli/.npm/_logs/2019-01-08T02_26_22_947Z-debug.log
Bills-MacBook-Pro:create-library billli$

Running with:

Bills-MacBook-Pro:create-library billli$ node -v
v8.12.0
Bills-MacBook-Pro:create-library billli$ npm -v
6.4.1

Pre-release version of a package

Issue
We have the following environments setup in Home Solutions:

  • Test
  • Staging
  • Production

We typically use the test environment as an integration environment so that we can test changes from multiple teams. In those cases when we want to test a component change, we do not want to publish it as a proper version, but instead do a pre-release.

Solution
The semantic-release team has a pre-release feature in beta right now. We should start using it once it's out of beta.

NPM token for local development

Should the template include a script (like our init.sh scripts in the older SKs) that gets the NPM token from somewhere (vault?). It's not uncommon for our private libraries to have other private libraries as dependencies ..

It's easy for me to just copy that very same script and put it in there, but I'm not sure that's the approach we want to take. Maybe we should just add something to the README to tell people what to expect, but handle it differently? Are we gonna get npm enterprise and then ensure we have a solid onboarding process?

Thoughts, @ahmadnassri & @kspaans?

npm init for create-library not working due to dependency module format

L600799:Code t967649$ mkdir test1
L600799:Code t967649$ cd test1
L600799:test1 t967649$ npm init @telus/library
Need to install the following packages:
  @telus/[email protected]
Ok to proceed? (y) y
/Users/t967649/.npm/_npx/730020322dede8e1/node_modules/@telus/create-library/lib/questions.js:1
const inquirer = require('inquirer')
                 ^

Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/t967649/.npm/_npx/730020322dede8e1/node_modules/inquirer/lib/inquirer.js from /Users/t967649/.npm/_npx/730020322dede8e1/node_modules/@telus/create-library/lib/questions.js not supported.
Instead change the require of inquirer.js in /Users/t967649/.npm/_npx/730020322dede8e1/node_modules/@telus/create-library/lib/questions.js to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (/Users/t967649/.npm/_npx/730020322dede8e1/node_modules/@telus/create-library/lib/questions.js:1:18)
    at Object.<anonymous> (/Users/t967649/.npm/_npx/730020322dede8e1/node_modules/@telus/create-library/lib/template.js:7:19)
    at Object.<anonymous> (/Users/t967649/.npm/_npx/730020322dede8e1/node_modules/@telus/create-library/index.js:7:18) {
  code: 'ERR_REQUIRE_ESM'
}

Node.js v18.16.0
npm ERR! code 1
npm ERR! path /Users/t967649/Code/test1
npm ERR! command failed
npm ERR! command sh -c create-library

npm ERR! A complete log of this run can be found in: /Users/t967649/.npm/_logs/2023-07-04T21_31_52_586Z-debug-0.log
L600799:test1 t967649$ 
  • it appears when the dependencies were last updated, the module format for inquirer was changed between v8 and v9
  • it appears to work if we roll this dep back:
L600799:create-library t967649$ git diff package.json | grep inquire
-    "inquirer": "^9.2.6",
+    "inquirer": "^8.2.3",
L600799:create-library t967649$ cd -
/Users/t967649/Code/test1
L600799:test1 t967649$ npm init @telus/[email protected]
npx: installed 82 in 8.696s
? is this an open source project? No
? project title blah

The automated release is failing 🚨

🚨 The automated release from the main branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you can benefit from your bug fixes and new features again.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can fix this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the main branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here are some links that can help you:

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.


Invalid npm token.

The npm token configured in the NPM_TOKEN environment variable must be a valid token allowing to publish to the registry https://registry.npmjs.org/.

If you are using Two Factor Authentication for your account, set its level to "Authorization only" in your account settings. semantic-release cannot publish with the default "
Authorization and writes" level.

Please make sure to set the NPM_TOKEN environment variable in your CI with the exact value of the npm token.


Good luck with your project ✨

Your semantic-release bot 📦🚀

Have lint checks run on every commit

Using husky or something equivalent, have the lint scripts be run before each commit, so that developers receive instant feedback from eslint.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.