generator-website-starter/README.md

A website generator using semantic markup, SASS, Gulp, Imagemin and Browser-sync

# generator-website-starter

This project is about learning how to build an npm package file using website starter files created in my [previous repo](https://github.com/francesjgonzales/website-starter) and generate it using [yeoman](https://yeoman.io/) 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](https://github.com/francesjgonzales/website-starter)

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

```bash
   .
   ├── 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](https://www.npmjs.com/signup) 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](https://www.youtube.com/watch?v=NgaV7503dTk&t=420s)
- [How to NPM Link to a local version of your dependency](https://medium.com/@AidThompsin/how-to-npm-link-to-a-local-version-of-your-dependency-84e82126667a)