This project was created using angular-cli it means you can use ng
with all the commands and params.
- Install node and npm
- Install angular-cli:
npm i @angular/cli
npm install
Watch and compile your files in development mode and copy it into dotAdmin
folder in your tomcat
folder.
npm run build:dev -- --output-path your/path/to/dotadmin
(ex. ~/dev/dotcms/tomcat8/webapps/ROOT/dotAdmin)- Open http://localhost:8080/dotAdmin
To test dotcms-ui
(main app):
ng test dotcms-ui --browsers=Chrome
To run tests for any internal library:
ng test {library-name} --browsers=Chrome
You need the credentials for dotcms npm account
$ npm run publish:dev
This will build a production ready app, update the package.json
version using a timestamp (ex: 5.0.1-1537889821825) and publish that as latest version to npm.
$ npm run build:prod
This will build a production ready app inside dist
folder, then:
$ cd dist
Edit the package.json
to update manually the version of the module and finally run:
$ npm publish
“Storybook is a powerful frontend workshop environment tool that allows teams to design, build, and organize UI components (and even full screens!) without getting tripped up over business logic and plumbing.” Brad Frost
We use StorybookJS to showcase our internal design system and tests our components in isolation: https://dotcms.github.io/core-web/design/
A collection of Angular Services to connect our FE with the DotCMS APIs. Full docs
A collection of DotCMS interfaces and types to be reused in all our libraries and main app. Full docs
A StencilJS Web Elements library of DotCMS form fields.
For our page Layout Editor, allow us to create rows and columns on a page layout.
Our DotCMS Rules portlet.
dotcms-js (deprecated)
This in a inherit collection of Angular Services.
Normally is a big funcionality, probably a portlet, typically will contain: components, services and maybe even other modules, but regarthelss, make sure that everything that is contain in the folder of the module is used by the module and only by this module, if a service or component or anything is used by thismodule but also by other module in the app the files for those should not live inside this current module but in the global of the app.
They should live in the module if they are shared by more than one component or directive.
module-name/
├── components/
│ ├── index.ts
│ ├── component-one
│ │ ├── components/
│ │ ├── services/
│ │ ├── models/
│ │ ├── utils/
│ │ ├── component.one.component.html
│ │ ├── component.one.component.scss
│ │ ├── component.one.component.ts
│ │ ├── component.one.component.spec.ts
│ ├── component-two
│ │ └── ...
├── services/
│ ├── index.ts
│ ├── service.one.service.ts
│ ├── service.one.service.spec.ts
│ ├── service.two.service.ts
│ └── service.two.service.spec.ts
├── models/
│ ├── index.ts
│ ├── model-one.ts
│ ├── model-two.ts
│ └── model-xxx.ts
├── utils/
│ ├── index.ts
│ ├── util-one.ts
│ ├── util-two.ts
│ └── util-xxx.ts
├── component-name.component.ts
├── component-name.component.scss
├── component-name.component.html
├── component-name.component.spec.ts
├── component-name.module..ts
└── component-name-routing.module..ts
Services, models and utils are JUST for this component and should be only use it for this component, if any of this needs to be shared between components in the module, it should live at module level
They live in the component if they are use ONLY by this component and/or directive, if they are use in other components/directive they should live in the module level.
component-name/
├── components/
│ ├── index.ts
│ ├── components-one
│ │ ├── components.one.service.ts
│ │ └── components.one.service.spec.ts
│ ├── components-two
│ │ └── ...
├── services/
│ ├── index.ts
│ ├── service.one.service.ts
│ ├── service.one.service.spec.ts
│ ├── service.two.service.ts
│ └── service.two.service.spec.ts
├── models/
│ ├── index.ts
│ ├── model-one.ts
│ ├── model-two.ts
│ └── model-xxx.ts
├── utils/
│ ├── index.ts
│ ├── util-one.ts
│ ├── util-two.ts
│ └── util-xxx.ts
├── component-name.component.ts
├── component-name.component.scss
├── component-name.component.html
└── component-name.component.spec.ts