This is a step by step guide to install the angular starter, free and open-source.

Resources:

Prerequisites:

Run git clone https://github.com/binarystarter/binarystarter-angular.git <project_name>

Change the directory to the newly created folder <project_name > ( cd <project_name> )

Run pnpm install and open the project in your favorite IDE.

Duplicate the apps/express/.env.local.example file and rename it to apps/express/.env.local.

Fill the environment variables with the desired configuration for your environment.

This is the environment variable used by the docker-compose.yml and the expressjs application.

Please pay careful attention to the keys marked with SECRET KEY. These are the keys that should always be kept secret and not committed or shared with anyone else.

development environment: can be

HTTP://localhost:8080

production environment: needs to be the full domain pointing to the api node app - e.g.

https://binarystarter.com/ai

The URL pointing to the API app

The port where the expressjs should be served on.

You can limit the allowed headers if you don’t need all to be available on services such as S3, API etc.

The allowed headers used for S3 buckets and potentially other places. The headers should be split by , . e.g. GET,POST,PUT.

The authentication system used.

Valid value: passportjs

Currently, we only support passportjs. This is set so that we can add more auth options in the future, such as firebase authentication.

The name of the application. This is used internally for identifying resources in AWS, database naming or other usages.

The stage, stack or environment - we refer to them interchangeably. The stage should match dev or prod

The email user.

The email is configured using Gmail initially. You can update the apps/express/src/main.ts and set your nodemailer transport.

You require 2FA to be activated and create a new app password.

FYI: In all our templates, the email is automatically setup using AWS SES. All you need to do is set SES and put the arn in the configuration file

The email address from which all system emails are sent from.

The email password

The email is configured using gmail initially. You can update the apps/express/src/main.ts and set your own nodemailer transport.

The port used by docker-compose to run mongodb.

The name you want to give to the mongo database.

The mongo database user password

The mongo user username

The mongo connection string.

Locally, the connection string should look like this: mongodb://<mongo:username>:<mongo:password>@localhost:27017/<mongo:db>?authSource=admin

On production you can use multiple methods of hosting the mongo database: - Managed Cloud: MongoDB atlas, digitalocean MongoDB - in which case you get the connection string from them (e.g. mongodb+srv….) - Self hosted MongoDB - in which case you have to test using mongosh command on the mongo db server that you set up to double-check the connection.

Create a random string, maybe over 16 characters of all kinds. Treat this as a sensitive password that gives access to your whole CMS. This is used to encrypt a lot of things on the backend side. It’s called payload:secret because the open-source CMS used is called payload CMS.

The collection storing users is called the users slug. Default value is users.

Duplicate the file at libs/shared-constants/src/lib/web-url.ts.example and rename it to web-url.ts. Set the web_url from above .env.local config as a value.

💡 I know, it’s not that pretty. We need this to share the URL with the payload react components. This cannot be done using dotenv because, in the browser, dotenv does not exist.

Search in the entire project for binarystarter-angular and replace with your app name.

This is optional initially. You can update later.

Development environment file: libs/default-theme/src/lib/environments/environment.development.ts

Production environment file: libs/default-theme/src/lib/environments/environment.production.ts

Fill them accordingly. There is no problem committing to git because we do not keep sensitive information in these files.

The environment.ts file is getting overwritten automatically using the fileReplacement settings under web/project.json configuration for each environment.

💡 Feel free to add as many environment files and configurations as you wish. Make sure to update the project.json files accordingly.

This is needed in order for you to be able to create an administrator account the first time running the project.

Open the apps/express/src/payloadcms/UsersCollection.ts file, go to the roles field definition, and comment this line create: fieldAccessAdminOnly and hidden:true under admin key (see below).

💡 By default, users are not allowed to select any roles. This operation is done ONLY when creating your first administrator user.

Read more about the CLI commands available at apps/web/project.json

Run in the terminal at the root level nx serve web

💡 Make sure to have docker app opened

Run in the terminal at the root level

Run in the terminal at the root level nx serve express

💡 Read more about the CLI commands available at apps/express/project.json

Wait for express and payload to run.

Folder structure explained

Nx.dev

You may be wondering why is this needed, and while there’s multiple reasons, a simple one that I love is the automatic tsconfig configurations for each library and application.

No other manual updates of tsconfigs for other apps or libraries.

According to nx best practices, 80% of the code should live inside libs and 20% of the code in the apps.

Now that we explained a bit about the reasoning, we have the following folder structure:

The initial reasoning was consistency between angular login, payload dashboard login, and a flutter application, everything configured from one configuration file (see pro version).

However, we all know that storing jwt in local storage is not the best option, so we are considering updating it to cookie-based, leaving it to your responsibility to have the server and frontend on the same domain.