@nuskin/profile-components

NPM Vue Components Template

This template is for creating a Vue components library with Storybook, published to npm

What this template does for you

• Includes Vue and eslint
• Lints and formats project on commit
• Provides Storybook to display and build your components
• Provides a .gitlab-ci.yml to manage the CI/CD pipeline
• Runs your Unit Tests with every push to the remote repository
• Analyzes your code with:
  • linting rules
  • run a SAST check
  • Pushes your code coverage analysis to SonarQube
• Ensures your code passes the SonarQube Quality Gate
• Utilizes Semantic Release, which means the pipeline will handle versioning
• Publishes your module to npmjs

Follow these steps to create a new project using this template:

1. Clone this project to your local machine and remove the git control file

Note: We use 'my-project' as the name of your new project

git clone [e-mail]:ns-am/templates/vue-components-template.git <my-project>
cd <my-project>
rm -rf .git

3. Connect your local project to the gitlab remote project

You can copy and paste the section in the gitlab command line instructions of your new project into the command line of your local project. It will look like the following but will have your project specific details.

Note: You must be at least a 'Maintainer' of the project to do this step.

cd <your project folder if you are not already there>
git init
git remote add origin <your gitlab project url>
git add .
git commit -m "Chore: Initial commit"
git push -u origin master

4. Add rules to your new project repository

• Under Settings Select Repository
  • Select Push Rules (See Sample)
    • Check Do not allow users to remove git tags with git push
  • Click on Expand in the Protected Branches section (See Sample)
    • master should already be set as your default branch. For master do the following:
      • Set Allowed to merge to Developers + Maintainers
      • Set Allowed to push to Maintainers
      • Set Code owner approval to Off

5. Update your new project with your project specific settings and information

• Update sonar-project.properties file. Replace <project> with your project's name in 2 places.
• Update the README.md at src/README.md with a proper readme that will be displayed on npmjs (See Sample)
• Replace this README.md with a proper readme for your fellow developers. (See README-sample)
• Update these settings in your package.json:

• Note: All module names should be created in the @nuskin namespace.

{
  "name": "@nuskin/<project>-components",
  "description": "The description that will amaze and astound your audience when they read it",
  "repository": {
    "type": "git",
    "url": "[e-mail]:ns-am/ux/<project>-components.git"
  },
  "author": "Your Name <[e-mail]>",
  "homepage": "https://code.tls.nuskin.io/ns-am/ux/<project>-components/blob/master/README.md"
}

6. Turning on your CI/CD pipeline

Once you are ready for your project to start running the CI/CD pipeline, you should rename the gitlab-ci.yml to .gitlab-ci.yml.

git mv gitlab-ci.yml .gitlab-ci.yml
git commit -am "Chore: renaming gitlab-ci.yml to .gitlab-ci.yml so my pipeline runs"
git push

TODO: Write documentation about Semantic Release (don't forget prereleases)

How to use Semantic Release in your pipeline

Link to another page or write up instructions on how Semantic Release works with the pipeline

eslint commit-analyzer rules.