FluentUI Component Scaffolding
This is a nodejs application to generate the basic structure of a React component built using the FluentUI library, including the scripts and configuration requried for publishing it to the npm
package repository.
This tool uses a built-in template directory, collects some additional data, such as package name, library name, package author and creates:
- the basic directory structure;
- build scripts,
package.json
, webpack configuration files, license file and a standard.gitignore
; - empty component file;
- empty stylesheet files;
- basic structure of a demo application to feature the component.
It also runs npm install
after the package structure has been created.
Installing
npm install --g lvd-fluentui-component-scaffolding
Usage
Navigate to the root directory where your component will be created and run:
npm exec create-fluentui-component
You will then be prompted for additional information, which is further detailed below.
Demo
Below you can find a screen capture of running this tool with the following arguments:
--create-root
--skip-deps
--git-clone-repo="[repo-url]"
--git-push
Command line arguments
Argument | Type | Description |
---|---|---|
--version |
boolean |
Show version number |
--from-manifest , --fm
|
boolean |
Read package information from a manifest file named component-manifest.json in the base destination directory. Defaults to false . |
--create-root , --cr
|
boolean |
Create root component directory. Defaults to false , that is use current working directory as root. |
--skip-deps , --sd
|
boolean |
Do not run npm install afer the component package has been created. Defaults to false . |
--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 . |
--git-clone-repo , --gcr
|
boolean |
Clone the specified directory before creating the component package. Will fail if directory is not empty. Defaults to null . |
--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 . |
--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 . |
--git-name , --gnm
|
boolean |
Configure git operations to use this author name. Defaults to null . |
--git-email , --gem
|
boolean |
Configure git operations to use this author email. Defaults to null . |
--git-username , --gur
|
boolean |
Configure git operations to use this username when logging on. Defaults to null . |
--git-token , --gtk
|
boolean |
Configure git operations to use this token as password when logging on. Defaults to null . |
--log-directory , --ld
|
string |
Specify log directory name. Defaults to package_builder_logs . |
--worskpace-directory , --ld
|
string |
Specify workspace directory name. Defaults to workspace . |
--additional-dirs , --ld
|
string[] |
Specify additional directories to be created alongside the workspace directory. Defaults to [] . Example: --additonal-dirs dira dirb dirb/dirb1 dirc . |
--help |
boolean |
Show help |
Required user input
The following parameters are collected from user input:
Parameter | Description | Mandatory | Default | Valid values |
---|---|---|---|---|
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 |
Package description |
The description of the package | N |
- | - |
Package author |
The author of the package | 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 |
Library name, dashed form |
The name of the root component in dashed form. | N |
Derived from the library name. | letters, numbers and dashes |
Output structure
The following output structure is all relative to the workspace directory.
The directory structure
The following directory structure is generated within:
Directory | Description |
---|---|
demo |
Demo application root directory |
demo/build/app |
Demo application build output directory |
dist |
Component library build output |
docs |
Documentation files |
src |
Root directory for all component library source files |
src/assets |
Assets directory (eg. image files) |
src/components |
Component javascript source code |
src/css |
Root directory for all stylesheet files |
src/css/components |
Component-related stylesheet files |
src/docs |
Documentation source files |
Support files
The following support files are generated (configuration files, build scripts, license):
File | Description |
---|---|
LICENSE |
License file - BSD 3-clause by default |
.gitignore |
The git-ignore file, which, by default, contains entries for node_modules directory and *.tgz files |
package.json |
The package.json file, with a bunch of stuff already added to it, including standard dependencies and dev-dependencies. |
README.md |
The readme file file, with the package title and package description added to it. |
webpack-app.config.js |
webpack configuration file for building the demo application |
webpack-dist.config.js |
webpack configuration file for building the library itself for distribution via npm packaging |
build-all.ps1 |
PowerShell script for building the demo app and the library itself in one sitting |
build-app.ps1 |
PowerShell script for building the demo app |
build-dist.ps1 |
PowerShell script for building the library itself |
${PackageName}.code-workspace |
VS Code workspace file. The ${PackageName} placeholder is replaced with the value collected (or derived) from user input. |
Component files
The following javascript files are generated for the library-related component:
File | Description |
---|---|
src/components/${LibraryName}.jsx |
The main component file, that contains an empty component class definition. The ${LbraryName} placeholder is replaced with the value collected (or derived) from user input. |
src/components/Index.js |
The root export file that will be used as an entry point when building the library itself. |
The following javascript files are generated for the demo application-related components:
File | Description |
---|---|
src/App.jsx |
The actual demo application main component |
src/Root.jsx |
Sets up the root component structure, including the stuff required for FluentUI apps |
src/Index.jsx |
Sets up the who react application lifecycle |
Stylesheet files
The following stylesheet files are generated for the library-related component:
File | Description |
---|---|
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. |
src/css/components/index.css |
The root file that will be used as a stylesheet entry point when building the library itself. |
The following stylesheet files are generated for the demo application:
File | Description |
---|---|
src/css/style.css |
The maine demo app stylesheet file. Contains some standard includes, as well as basic rules. |
Demo application
The following files are generated in order to run the built demo application:
File | Description |
---|---|
demo/index.html |
The html entry point for the demo application. Either run it directly or deploy it somewhere. |
Supported placeholders
The following placeholders are supported for usage both in file names, as well as file contents:
Placeholder | Value |
---|---|
${LibraryName} |
Library name |
${LibraryNameDashed} |
Library name, dashed form |
${PackageName} |
Package name |
${PackageNameLower} |
Package name , converted to lower case |
${PackageDescription} |
Package description |
${PackageAuthor} |
Package author |
${CurrentYear} |
new Date().getFullYear() |
${LogDirectoryName} |
Log directory name as provided via command line arguments. Defaults to _logs
|
Generated log files
The tool generates the following log files:
-
[LOG_DIRECTORY_PATH]/error.log
- for error events: exceptions, errors coming from the git engine, erros from thenpm install
stderr
output; -
[LOG_DIRECTORY_PATH]/activity.log
- for every other stuff that's being logged - debug messages, warning messages, info messages and so on.
As of version 0.0.5, the [LOG_DIRECTORY_PATH]
is located at [USER_HOME]/lvd-fluentui-component-scaffolding/[LOG_DIRECTORY_NAME]
where:
-
[USER_HOME]
depends on the os; -
[LOG_DIRECTORY_NAME]
defaults as mentioned above, but may be overridden using the--log-directory
flag.
Notes
- 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. - 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.
Changelog
Version 0.0.5
- Default directory name is now
package_builder_logs
; - Changed logging directory location: logs are now saved globally in
[USER_HOME]/lvd-fluentui-component-scaffolding/[LOG_DIRECTORY_NAME]
where:-
[USER_HOME]
depends on the os; -
[LOG_DIRECTORY_NAME]
defaults as mentioned above, but may be overridden using the--log-directory
flag.
-
- 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. - Added possibility to create additional directories alongside the package workspace, using the
--additional-dirs
flag.
Version 0.0.4
- Fixed an issue with logging throwing
.trim()
is not a function in certain conditions. - Updated package description and home page in
package.json
.
Version 0.0.3
- 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; - Added option to skip installing dependencies by automatically running
npm install
. By default, dependencies are installed, use--skip-deps
to skip installation; - Added
.code-workspace
template file in the package template and an option to skip creating it, if desired, by specifying the--skip-vscode
flag; - Can now clone a git repository before creating component package, by using
--git-clone-repo=[repo-url]
; - Can now commit to the previously cloned git repository after component si created, by using the flag
--git-commit
; - Can now push to the previously cloned git repository after component si created, by using the flag
--git-push
; - Basic git configuration can be specified by using the flags:
--git-name
,--git-email
,--git-username
and--git-token
; - Better error handling;
- More detailed and better formatted output of executed steps;
- Major refactoring and some bug fixes.
Version 0.0.2
- 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.
Version 0.0.1
- First tracked version
Donate
I put some of my free time into developing and maintaining this plugin. If helped you in your projects and you are happy with it, you can...