Skip to main content

VanillaJS

This package is a GenesisX-themed TypeScript application template generator that offers developers complete freedom to utilize any JavaScript and CSS library/framework of their choice and personalize the application to their specific requirements.

Usage​

To create VanillaJS microApps, you can follow the steps outlined below:

Pre-requisites​

  • Make sure you are on correct version of Nodejs 18.x and Nx Version 16.6 
    node --version
    nx --version
  • To start with, create a new GenesisX workspace in an empty directory, run below command, of if you already have the workspace ready , please skip this step. 
    npx @genesisx/create-workspace
    • Provide the requested parameters
    • Provide name to your workspace like test-workspace
    • Move to the created workspace - cd test-workspace
    • Install the packages
      yarn install
  • Install VanillaJS package
    yarn add @genesisx/vanilla-js
  • Now follow either of the two modes(mentioned below) to use this generator - either the Nx Console or CLI

Via Nx Console​

  • Select Nx Console > Generate > Search for @genesisx/vanilla-js
    • Provide the requested parameters:
    • appName: name of the application
    • port: port on which application needs to be run
    • docs: docs (url) of the application
    • style: file extension to be used for style files
  • Click on Run

Testing​

  • To serve the generated app -
    • Select serve from the Nx Console > Choose the app to be served > Select the appropriate options > Run
  • To build the generated app -
    • Select build from the Nx Console > Choose the app to be built > Select the appropriate options > Run
  • To run lint on the generated app -
    • Select lint from the Nx Console > Choose the app to execute linting > Select the appropriate options > Run
  • To run unit tests on the generated app -
    • Select test from the Nx Console > Choose the app to be tested > Select the appropriate options > Run

Via Command line​

  • If Nx Console doesn't work, alternatively use this command:

    nx generate @genesisx/vanilla-js:templated <appName> --no-interactive

Testing​

  • To serve the generated app - 

    nx serve vanilla-js

Running build and lints​

  • To build the generated app, run - 

    nx build vanilla-js

  • To run lint on the generated app, run - 

    nx lint vanilla-js

  • To run unit tests on the generated app via Jest, run - 

    nx test vanilla-js

More details & Troubleshooting​

Visit the troubleshooting guide for common issues or refer to the readme.md file located within the package folder <workspace-folder>/node_modules/@genesisx/vanilla-js/README.md