generator-website-starter v1.0.9

generator-website-starter

This project is about learning how to build an npm package file using website starter files created in my previous repo and generate it using yeoman tool.

How to use this package

If you want to use this generator, below are the steps.

1. Install yeoman globally if you haven't installed it before npm install -g yo

2. Install your created generator globally if you haven't installed it before npm install -g generator-website-starter

3. Install the package file using Yeoman. You can repeat this process if you want to reuse in a new VS Workspsace yo website-starter

4. Run gulp in your project directory terminal

   If error occur its possible that gulp is not installed in your global yet. Below are steps to install

   • Run gulp command utility npm install --global gulp-cli
   • Install Gulp in your project directory npm install --save-dev gulp

   For more details on how the generated files are created, please read this repository

Steps in creating a yeoman generator

If you want to learn how I created this generator, below are the steps

1. Create a new repository in github

2. Open a blank VS Code Workspace

3. File structure of yeoman generator

   .
   ├── generator-`generator-name` # File folder has to start with `generator` followed by a dash then your generator name
   │ │ ├── generators
   │ │ │ │ ├── app # Index.js and package files are stored that Yeoman uses to generate
   │ │ │ │ │ │ ├── templates # Package files saved in this folder are generated by Yeoman. Copy files in this folder, alternatively, use `git submodule add 'link of repository'` to load another git repository as a sub folder in the main repository. > Note: If there was a change in original repository, the files in this folder needs to be updated manually
   │ │ ├── index.js #

How to update a git submodule: Go back to root generator folder and run this git submodule foreach git pull

4. Install Yeoman in your project folder npm install --save yeoman-generator

5. In index.js, import yeoman generator and write script files where you need to copy files that are shown in the supposedly generated package file from templates folder. Credits to Coder Coder's for the script.

6. Test the package locally by running this npm link and expect a confirmation message that a package is added.

   Note: Best to test it in a new blank VS Code Workspace by running an npm init then npm install and lastly npm link "name-of-your-generator-folder" and expect to see the package installed.

7. Login to your npm account. Sign up here if you don't have one yet.

   Note: email address used in sign up is public knowledge.

Error encountered

npm notice Account creation via legacy auth is unavailable. Please set your auth-type to "web" or visit https://www.npmjs.com/signup to create an account.
npm ERR! code E403
npm ERR! 403 403 Forbidden - PUT https://registry.npmjs.org/-/user/org.couchdb.user:NAME
npm ERR! 403 In most cases, you or one of your dependencies are requesting
npm ERR! 403 a package version that is forbidden by your security policy, or
npm ERR! 403 on a server you do not have access to.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/NAME/.npm/_logs/2023-04-29T12_54_51_911Z-debug-0.log

It somehow resolved by doing the following:

• Added 2FA in my npm account
• Linked my github account in my npm account
• I typed the wrong username

Update package files

1. Push and commit files to github repository

2. Update yeoman version number in package.json npm version 1.1.1

3. Update npm package files npm publish

4. Check udpated files in your npm account

Credits

• I learned the tutorial from Coder Coder
• How to NPM Link to a local version of your dependency