{"id":21650734,"url":"https://github.com/alexboia/lvd-fluentui-component-scaffolding","last_synced_at":"2026-04-14T04:03:53.231Z","repository":{"id":85937616,"uuid":"397365140","full_name":"alexboia/LVD-FluentUi-Component-Scaffolding","owner":"alexboia","description":"A tool to generate the basic structure of a React component built using the FluentUi library.","archived":false,"fork":false,"pushed_at":"2021-08-31T16:33:55.000Z","size":410,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-26T00:20:06.615Z","etag":null,"topics":["fluentui","javascript","javascript-applications","nodejs","nodejs-modules","react","reactjs","scaffolding"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alexboia.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-08-17T19:08:53.000Z","updated_at":"2021-08-31T16:11:49.000Z","dependencies_parsed_at":null,"dependency_job_id":"d17d0ab7-ccfc-4d1d-b3e3-723612058c42","html_url":"https://github.com/alexboia/LVD-FluentUi-Component-Scaffolding","commit_stats":{"total_commits":61,"total_committers":3,"mean_commits":"20.333333333333332","dds":"0.42622950819672134","last_synced_commit":"1c6711f1c398ef23360dfe307d33764625db90ff"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexboia%2FLVD-FluentUi-Component-Scaffolding","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexboia%2FLVD-FluentUi-Component-Scaffolding/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexboia%2FLVD-FluentUi-Component-Scaffolding/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexboia%2FLVD-FluentUi-Component-Scaffolding/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alexboia","download_url":"https://codeload.github.com/alexboia/LVD-FluentUi-Component-Scaffolding/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244544123,"owners_count":20469613,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["fluentui","javascript","javascript-applications","nodejs","nodejs-modules","react","reactjs","scaffolding"],"created_at":"2024-11-25T07:42:20.649Z","updated_at":"2026-04-14T04:03:53.195Z","avatar_url":"https://github.com/alexboia.png","language":"JavaScript","funding_links":["https://ko-fi.com/Q5Q01KGLM"],"categories":[],"sub_categories":[],"readme":"# FluentUI Component Scaffolding\n\n[![NPM](https://nodei.co/npm/lvd-fluentui-component-scaffolding.png?downloads=true\u0026downloadRank=true\u0026stars=true)](https://nodei.co/npm/lvd-fluentui-component-scaffolding/)\n\nThis is a nodejs application to generate the basic structure of a React component built using the [FluentUI](https://github.com/microsoft/fluentui) library, including the scripts and configuration requried for publishing it to the `npm` package repository.\nThis tool uses a built-in template directory, collects some additional data, such as package name, library name, package author and creates:\n\n- the basic directory structure;\n- build scripts, `package.json`, webpack configuration files, license file and a standard `.gitignore`;\n- empty component file;\n- empty stylesheet files;\n- basic structure of a demo application to feature the component.\n\nIt also runs `npm install` after the package structure has been created.\n\n## Installing\n\n`npm install --g lvd-fluentui-component-scaffolding`\n\n## Usage\n\nNavigate to the root directory where your component will be created and run:\n\n`npm exec create-fluentui-component`\n\nYou will then be prompted for additional information, which is further detailed below.\n\n## Demo\n\nBelow you can find a screen capture of running this tool with the following arguments:\n\n- `--create-root`\n- `--skip-deps`\n- `--git-clone-repo=\"[repo-url]\"`\n- `--git-push`\n\n![Sample run](https://raw.githubusercontent.com/alexboia/LVD-FluentUi-Component-Scaffolding/main/lvd-fluentui-scaffolding.gif)\n\n### Command line arguments\n\n| Argument | Type | Description |\n| --- | --- | --- |\n| `--version` | `boolean` | Show version number |\n| `--from-manifest`, `--fm` | `boolean` | Read package information from a manifest file named component-manifest.json in the base destination directory. Defaults to `false`. |\n| `--create-root`, `--cr` | `boolean` | Create root component directory. Defaults to `false`, that is use current working directory as root. |\n| `--skip-deps`, `--sd` | `boolean` | Do not run `npm install` afer the component package has been created. Defaults to `false`. |\n| `--skip-vscode`, `--svs` | `boolean` | Do not create the `.code-workspace` VS Code workspace file, even if it is included in the template. Defaults to `false`. |\n| `--git-clone-repo`, `--gcr` | `boolean` | Clone the specified directory before creating the component package. Will fail if directory is not empty. Defaults to `null`. |\n| `--git-commit`, `--gcm` | `boolean` | Perform a git commit after creating the component package. You will be prompted for an optional commit message. Defaults to `false`. |\n| `--git-push`, `--gcm` | `boolean` | Perform a git commit and push after creating the component package. If this flag is specified, the `git-commit` flag is not required. Defaults to `false`. |\n| `--git-name`, `--gnm` | `boolean` | Configure git operations to use this author name. Defaults to `null`. |\n| `--git-email`, `--gem` | `boolean` | Configure git operations to use this author email. Defaults to `null`. |\n| `--git-username`, `--gur` | `boolean` | Configure git operations to use this username when logging on. Defaults to `null`. |\n| `--git-token`, `--gtk` | `boolean` | Configure git operations to use this token as password when logging on. Defaults to `null`. |\n| `--log-directory`, `--ld` | `string` | Specify log directory name. Defaults to `package_builder_logs`. |\n| `--worskpace-directory`, `--wdir` | `string` | Specify workspace directory name. Defaults to `workspace`. |\n| `--additional-dirs`, `--adirs` | `string[]` | Specify additional directories to be created alongside the workspace directory. Defaults to `[]`. Example: `--additonal-dirs dira dirb dirb/dirb1 dirc`. |\n| `--help` | `boolean` | Show help |\n\n## Required user input\n\nThe following parameters are collected from user input:\n\n| Parameter | Description | Mandatory | Default | Valid values |\n| --- | --- | --- | --- | --- |\n| `Package name` | The name of the package. The name used in `package.json` is obtained from this value, converted to lower case  | `Y` | If `--create-root` is not specified, then the default package name is the name of the current directory, if considered valid. | letters, numbers and dashes |\n| `Package description` | The description of the package  | `N` | - | - |\n| `Package author` | The author of the package  | `N` | - | - |\n| `Libary name` | The name of the root component; also the name used for the library configuratin in the webpack config file. | `N` | The part of the package name following the last dash. | letters, numbers and underscores |\n| `Library name, dashed form` | The name of the root component in dashed form. | `N` | Derived from the library name. | letters, numbers and dashes |\n\n## Output structure\n\nThe following output structure is all relative to the workspace directory.\n\n### The directory structure\n\nThe following directory structure is generated within:\n\n| Directory | Description |\n| --- | --- |\n| `demo` | Demo application root directory |\n| `demo/build/app` | Demo application build output directory |\n| `dist` | Component library build output |\n| `docs` | Documentation files |\n| `src` | Root directory for all component library source files |\n| `src/assets` | Assets directory (eg. image files) |\n| `src/components` | Component javascript source code |\n| `src/css` | Root directory for all stylesheet files |\n| `src/css/components` | Component-related stylesheet files  |\n| `src/docs` | Documentation source files |\n\n### Support files\n\nThe following support files are generated (configuration files, build scripts, license):\n\n| File | Description |\n| --- | --- |\n| `LICENSE` | License file - BSD 3-clause by default |\n| `.gitignore` | The git-ignore file, which, by default, contains entries for `node_modules` directory and `*.tgz` files |\n| `package.json` | The `package.json` file, with [a bunch of stuff already added to it](https://github.com/alexboia/LVD-FluentUi-Component-Scaffolding/blob/main/template/package.json), including standard dependencies and dev-dependencies. |\n| `README.md` | The readme file file, with the package title and package description added to it. |\n| `webpack-app.config.js` | [webpack configuration file for building the demo application](https://github.com/alexboia/LVD-FluentUi-Component-Scaffolding/blob/main/template/webpack-app.config.js) |\n| `webpack-dist.config.js` | [webpack configuration file for building the library itself for distribution via npm packaging](https://github.com/alexboia/LVD-FluentUi-Component-Scaffolding/blob/main/template/webpack-dist.config.js) |\n| `build-all.ps1` | PowerShell script for building the demo app and the library itself in one sitting |\n| `build-app.ps1` | PowerShell script for building the demo app |\n| `build-dist.ps1` | PowerShell script for building the library itself |\n| `${PackageName}.code-workspace` | VS Code workspace file. The `${PackageName}` placeholder is replaced with the value collected (or derived) from user input. |\n\n### Component files\n\nThe following javascript files are generated for the library-related component:\n\n| File | Description |\n| --- | --- |\n| `src/components/${LibraryName}.jsx` | [The main component file](https://github.com/alexboia/LVD-FluentUi-Component-Scaffolding/blob/main/template/src/components/%24%7BLibraryName%7D.jsx), that contains an empty component class definition. The `${LbraryName}` placeholder is replaced with the value collected (or derived) from user input. |\n| `src/components/Index.js` | The root export file that will be used as an entry point when building the library itself. |\n\nThe following javascript files are generated for the demo application-related components:\n\n| File | Description |\n| --- | --- |\n| `src/App.jsx` | The actual demo [application main component](https://github.com/alexboia/LVD-FluentUi-Component-Scaffolding/blob/main/template/src/App.jsx) |\n| `src/Root.jsx` | Sets up the root component structure, including the stuff required for FluentUI apps |\n| `src/Index.jsx` | Sets up the who react application lifecycle |\n\n### Stylesheet files\n\nThe following stylesheet files are generated for the library-related component:\n\n| File | Description |\n| --- | --- |\n| `src/css/components/${LibraryNameDashed}.css` | The main component stylesheet file. The `${LibraryNameDashed}.css` placeholder is replaced with the value collected (or derived) from user input. |\n| `src/css/components/index.css` | The root file that will be used as a stylesheet entry point when building the library itself. |\n\nThe following stylesheet files are generated for the demo application:\n\n| File | Description |\n| --- | --- |\n| `src/css/style.css` | The maine demo app stylesheet file. Contains [some standard includes, as well as basic rules](https://github.com/alexboia/LVD-FluentUi-Component-Scaffolding/blob/main/template/src/css/style.css). |\n\n### Demo application\n\nThe following files are generated in order to run the built demo application:\n\n| File | Description |\n| --- | --- |\n| `demo/index.html` | The html entry point for the demo application. Either run it directly or deploy it somewhere. |\n\n## Supported placeholders\n\nThe following placeholders are supported for usage both in file names, as well as file contents:\n\n| Placeholder | Value |\n| --- | --- |\n| `${LibraryName}` | `Library name` |\n| `${LibraryNameDashed}` | `Library name, dashed form` |\n| `${PackageName}` | `Package name` |\n| `${PackageNameLower}` | `Package name`, converted to lower case |\n| `${PackageDescription}` | `Package description` |\n| `${PackageAuthor}` | `Package author` |\n| `${CurrentYear}` | `new Date().getFullYear()` |\n| `${LogDirectoryName}` | Log directory name as provided via command line arguments. Defaults to `_logs` |\n\n## Generated log files\n\nThe tool generates the following log files:\n\n- `[LOG_DIRECTORY_PATH]/error.log` - for error events: exceptions, errors coming from the git engine, erros from the `npm install` `stderr` output;\n- `[LOG_DIRECTORY_PATH]/activity.log` - for every other stuff that's being logged - debug messages, warning messages, info messages and so on.\n\nAs of version 0.0.5, the `[LOG_DIRECTORY_PATH]` is located at `[USER_HOME]/lvd-fluentui-component-scaffolding/[LOG_DIRECTORY_NAME]` where:\n- `[USER_HOME]` depends on the os;\n- `[LOG_DIRECTORY_NAME]` defaults as mentioned above, but may be overridden using the `--log-directory` flag.\n\n## Notes\n\n1. To avoid having `npm pack` strip the empty directories, a `.dummy` file is included in each template directory. This does not find its way in the final component package directory.\n2. To avoid having `npm pack` rename the `.gitignore` file in the template directory to `.npmignore`, the file is included using the `.ignore` name and renamed when when creating the final component package directory.\n\n## Changelog\n\n### Version 0.0.5\n\n- Default directory name is now `package_builder_logs`;\n- Changed logging directory location: logs are now saved globally in `[USER_HOME]/lvd-fluentui-component-scaffolding/[LOG_DIRECTORY_NAME]` where:\n\t- `[USER_HOME]` depends on the os;\n\t- `[LOG_DIRECTORY_NAME]` defaults as mentioned above, but may be overridden using the `--log-directory` flag.\n- Changed package structure to include a workspace directory used for the component package itself, to avoid issues when a git clone needs to be performed but, at the same time, the `--from-manifest` flag is used.\n- Added possibility to create additional directories alongside the package workspace, using the `--additional-dirs` flag.\n\n### Version 0.0.4\n\n- Fixed an issue with logging throwing `.trim()` is not a function in certain conditions.\n- Updated package description and home page in `package.json`.\n\n### Version 0.0.3\n\n- Can now read package information from a manifest file placed in the base target directory (see above). By default it reads from console user input, use `--from-manifest` to switch to package manifest mode;\n- Added option to skip installing dependencies by automatically running `npm install`. By default, dependencies are installed, use `--skip-deps` to skip installation;\n- Added `.code-workspace` template file in the package template and an option to skip creating it, if desired, by specifying the `--skip-vscode` flag;\n- Can now clone a git repository before creating component package, by using `--git-clone-repo=[repo-url]`;\n- Can now commit to the previously cloned git repository after component si created, by using the flag `--git-commit`;\n- Can now push to the previously cloned git repository after component si created, by using the flag `--git-push`;\n- Basic git configuration can be specified by using the flags: `--git-name`, `--git-email`, `--git-username` and `--git-token`;\n- Better error handling;\n- More detailed and better formatted output of executed steps;\n- Major refactoring and some bug fixes.\n\n### Version 0.0.2\n\n- Can now specify whether or not to create a root directory for the package. By default it does not, use `--create-root` flag to create it.\n\n### Version 0.0.1 \n\n- First tracked version\n\n## Donate\n\nI put some of my free time into developing and maintaining this plugin.\nIf helped you in your projects and you are happy with it, you can...\n\n[![ko-fi](https://www.ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/Q5Q01KGLM)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexboia%2Flvd-fluentui-component-scaffolding","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falexboia%2Flvd-fluentui-component-scaffolding","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexboia%2Flvd-fluentui-component-scaffolding/lists"}