Get Started

Start a new Otter application.

Required environment

• Git and/or the GitHub app (for Mac or Windows)

  • GitHub's Guide to Installing Git is a good source of information.

• Node.js, (version >=18.0.0)

  • This is used to run tests and generate distributable files. We strongly encourage to use an up-to-date LTS version of Node.js to ensure the support of all the Otter packages. Each package comes with a minimum Node.js version range defined in the engine property of its package.json file.

Creating a new Otter project

npm create @o3r my-project
# Or a project using the yarn package manager
npm create @o3r my-project -- --yarn

[!WARNING] On Windows OS, Git Bash terminal is not fully supported by different CLI used behind Otter project and can lead to execution error. We recommend to minimize its usage.

Generate a new application, library or SDK in the project

Once created, you can generate a new application, library or SDK in the project using the following commands:

# Application
npm run ng generate application my-webapp
# Library
npm run ng generate library my-library
# SDK
npm run ng generate sdk my-sdk

The application will contain the minimum setup to follow the otter recommendations and to activate the features requested during the installation of the @o3r/core.

For instance, if you activated the store, your app.module.ts shall integrate the ngrx Store implementation:

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    //...
    EffectsModule.forRoot([]),
    StoreModule.forRoot(rootReducers, {metaReducers, runtimeChecks}),
    StoreRouterConnectingModule.forRoot()
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

You will also find recommendations for your application such accessibility configuration like the Application Reduced Motion

It will also update your angular.json with the feature enabled for your project. This will configure the different generators to create components and services consistent with your project.

{
  "schematics": {
    "@o3r/core:component": {
      "useOtterTheming": true,
      "useOtterAnalytics": true
    }
  }
}

Adding Material design theming

# Add material design
npx ng add @angular/material
# ? Choose a prebuilt theme name, or "custom" for a custom theme: Indigo/Pink
# ? Set up HammerJS for gesture recognition? Yes
# ? Set up browser animations for Angular Material? Yes

Then uncomment the following lines in the src/styles.scss file to apply the Otter theming to Material Design components :

@include mat.core();
@include mat.all-component-typographies($typography);
@include mat.all-component-themes($mat-theme);