Appearance

Hubtel Frontend CLI Tool ​

The Hubtel Frontend CLI Tool is designed to streamline the creation of Nuxt and Next projects by setting up the necessary project structure and essential utilities for frontend development, to enhance engineers productivity.

Before Installation ​

Copy the following snippet to your .npmrc file located in your home directory. If the .npmrc file does not already exist, create it and paste in the snippet below.

  • On Linux/Mac: The home directory in Linux and macOS is located at /home/username (Linux) and /Users/username (macOS).

  • On Windows: In Windows, the home directory is usually located at C:\Users\username

markdown
shamefully-hoist=true
@hubtel:registry=https://pkgs.dev.azure.com/hubtel/_packaging/hubtel/npm/registry/
always-auth=false
//pkgs.dev.azure.com/hubtel/_packaging/hubtel/npm/registry/:username=hubtel
//pkgs.dev.azure.com/hubtel/_packaging/hubtel/npm/registry/:_password="eHA3aTJlZ2N3YXgya2RpaXBzZm9yMnlzNTc3YXNoZzQyZXg0YnJ3bHljbGd0MnU1Zm5mYQ=="
//pkgs.dev.azure.com/hubtel/_packaging/hubtel/npm/:username=hubtel
//pkgs.dev.azure.com/hubtel/_packaging/hubtel/npm/:_password="eHA3aTJlZ2N3YXgya2RpaXBzZm9yMnlzNTc3YXNoZzQyZXg0YnJ3bHljbGd0MnU1Zm5mYQ=="
//pkgs.dev.azure.com/hubtel/_packaging/hubtel/npm/:[email protected]
[email protected]
registry=https://registry.npmjs.org/

NB: The .npmrc file is used to configure npm settings, specify package registries, and manage authentication credentials for accessing private registries or performing authenticated actions with npm.

Installation ​

Open your terminal and run the following command to install the package globally:

bash
npm install -g @hubtel/frontend-cli

Usage ​

Non-interactive Mode ​

Creating a New Project ​

To create a new project with the CLI tool, use the following command:

bash
hfcli --framework --template=<template> [projectname]

Arguments:

  • projectname: Specify the name for your new project.

Options:

  • --next: Use the Next.js framework for the project.
  • --nuxt: Use the Nuxt.js framework for the project.
  • --template <template>: Specify a template for the project. Available choices are "default" and "auth".

Example:
Creating a new project named my-app using the Next.js framework and the default template:

bash
hfcli --next --template=default my-app

Project Name Conventions:

  • Using ./ as the project name initializes the project in the current directory.
    bash
    hfcli --next --template=default ./
    This command initializes the project in the current directory.
  • Specifying a project name like "my-app" initializes the project in a folder named my-app
    bash
    hfcli --next --template=default my-app
    This command initializes the project in a folder named my-app.

Adding Configuration to Existing Projects ​

You can also use the CLI tool to add configurations to existing projects. Use the following command format:

bash
hfcli --framework --config=<configType>

NB: For adding configurations, the command must be run inside the src folder located in the project directory.
Options:

  • --next: Use the Next.js framework for the project.
  • --nuxt: Use the Nuxt.js framework for the project.
  • --config <configType>: Specify the type of configuration to add. Available choices include "test-env-setup".

Example:
Adding a testing environment setup to an existing project using the Nuxt.js framework:

bash
hfcli --nuxt --config=test-env-setup

Interactive Mode ​

  1. Run hfcli to initialise the CLI tool

  2. Select a framework of your choice (Next or Nuxt) choose framework

  3. Select an option for how you would like to use the tool: enter project name

    • Add configuration to existing project
      This option allows you to add certain configurations to existing projects, such as:

      • Setting up a testing environment

      NB: For this option, the command must be run inside the src folder located in the project directory.

    • Setup new project:
      For creating a new project, use this option. You'll be required to provide a project name: enter project name

      • To initialize the project in a different directory/folder with a specific project name, type in a project name of your choice.

        Example: A project name called super-app will create the project files in a folder named "super-app."

      • However, to initialize the project in the current directory/folder, specify the project name as ./.

        Example: Running hfcli command in a directory/folder called "my-new-app" the project files will be created in this folder. A typical use case for this would be if you wanted to initialise the project files in an empty folder.

    After, you'll be asked to select a project template type:
    select project template

  4. Once you've made your selections, the CLI will generate the project structure or setup configurations based on your choices.

  5. Follow any additional instructions or prompts provided by the CLI to set up your project as needed.