Child pages
  • 1 Getting Started
Skip to end of metadata
Go to start of metadata

Scripts

Now that you have installed everything, you can find out a lot about a project from the package.json file. it is your single source of truth, typically it contains, scripts, dependencies and metadata for the folder it resides in, this is known as a package. AM contains 3 projects / packages, of those 3, Admin and user have identical script. Outlined bellow is the scripts you can run in the command line using `yarn <taskname>`, where <taskname> is the keyname of the script bellow. You may only run this if your CWD is at or inside (at any depth) of the package.

package.json snippet - user
"scripts": {
    "build:production": "grunt build:prod",
    "start": "grunt"
  },
package.json snippet - user and admin
"scripts": {
    "clean:jsdoc": "rimraf jsdoc",
    "prejsdoc": "npm run clean:jsdoc -s",
    "jsdoc": "jsdoc --configure config/jsdoc/configuration.json",
    "prestart": "node config/scripts/prestart",
    "start": "webpack-dev-server --config config/webpack/configurations/development.js --progress",
    "build": "webpack --config config/webpack/configurations/production.js",
    "profile": "webpack --config config/webpack/configurations/profile.js",
    "test": "mocha-webpack --opts config/mocha-webpack/configuration.opts"
},


To remove the complexity, Visual Studio Code users may to refer to 3 Visual Studio Code - Integration Tips - Working with Yarn scripts, this could be potentially emulated in other editors.

Glossary

  • build production - build the API and optimise or remove unsafe values that customers should not see.
  • start - start the intent of the project
  • clean:jsdoc - remove the jsdoc folder, js doc is generated from a special comment format, in cases where clean is required, there may be a potential bug and workaround
  • jsdoc - take the jsdoc comments and generated a pretty html documentation page, it is highly recomended that jsdoc comments are used where appropriate
  • prestart - a script that runs as a lifecycle hook before start.
  • build - build the project without starting a dev server.
  • profile - dependency profiling, not to be confused with perf, which this does not do.
  • test - run mocha unit tests, testing to be discussed later on.

Start

By node convention, start is the script we will use to run the main task or purpose of this package, in this case, build the UI. When starting, you will be greeted with a CLI prompt to configure and proxy your Frontend build against the running Tomcat server for the first time.

  

Follow the four steps.

  1. Enter the hostname of the target AM instance - default to - (http://am.example.com)
  2. Enter the port of the target AM instance - default to 8080
  3. Enter the path of the target AM instance - default to /openam
  4. Save environment variables to ".env" file? - writes a .env file which will not be committed, this contains the above settings

Observations

  • You will find that the proxy development server has now started on port `8081` this will always be true for everyone.
  • You will still be able to login
  • You will still be able to use the API
  • Everything will behave exactly as if you where viewing the prod like local AM
  • If you modify any file in the project, you will see Webpack output to the terminal and recompile the project and refresh the result.
  • css and JavaScript are both compiled, (lots of transformations are performed on the output code to enable a wide range of support and development features)
  • Unlike the prod like AM on your set port, 8081 will contain source maps, this means that the JS in DevTools or the less maps directly, uncompressed and mangled, this makes it far easier to debug code.



  • No labels