Setup your monorepo

Setup Environment

Before the actual repo can be setup make sure that the environment you are using has NodeJS, Yarn and a global Angular installed. Otherwise, below is a small guide for you who is just starting out.

Installing NodeJS

NodeJS is your JavaScript runtime that allows you to execute and run application written using Angular and JavaScript/TypeScript. It must be install to follow this tutorial.

You can install NodeJS using the following commands on Linux (Ubuntu), but best practice is to follow the instructions provided by NodeJS on their website.

curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -

sudo apt-get install nodejs

Installing Yarn (Optional)

Yarn is a package manager you can choose to install, if you prefer though my experience it works a little better than NPM which is included with the NodeJS setup. However, both are acceptable.

You can install Yarn using the following commands on Linux (Ubuntu), but best practice is to follow the instructions provided by Yarn on their website.

curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -

echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list

sudo apt-get update && sudo apt-get install yarn

Installing Angular

Angular is the framework that provides a ton of features and helps you develop frontend applications. In this tutorial it will serve for the frontend for both a desktop and cloud solutions.

You can install Angular using the following commands on Linux (Ubuntu), but best practice is to follow the instructions provided by Angular on their website.

npm install -g @angular/cli

Setup repository

Now that the enviroment is configured, it is time to setup the monorepo. This includes a desktop application displaying an angular application using ElectronJS, but also a seperate angular application that can be provided on the web or cloud.

This guide include an express application that will become the backend of the cloud solution. as Nrwl allows reuse of components this becomes practical for the desktop applicaiton we are creating. The desktop version essentially can reuse the code developed for the backend of a cloud solution, and allow it to be executed on a offline machine such as desktop application.

Start by check your version of the installed tools, if any with the exception of yarn is missing remember to install them.

node --version

npm --version

yarn --version

ng --version

Now setup your monorepo using the following commands, please note that choices are marked with bold text, that marks where you have to decide on a name or a choice for your repo.

npm init nx-workspace myworkspace

What to create in the new workspace? Empty

CLI to power the Nx workspace? Angular Cli

cd myworkspace

ng add @nrwl/web

npm install --save-dev @nrwl/angular

ng add @nrwl/express

ng add @nrwl/node

Now it’s time to generate the first application, the first application I create in my video is the frontend for the desktop application. I simply choose to call this application desktop.

ng g @nrwl/angular:application desktop

Which stylesheet format would you like to use? SASS (.scss)

Would you like to configure routing for this application? No

Test your new application by running the following command, and go to localhost:4200 which is the default url for angular applications.

npm run start desktop

Setup ElectronJS and Xplat

As Xplat is build using the Nrwl Nx, it can be added to an existing repository using the following command. This allows new capabilities such as the creation of an ElectronJS application attached to an existing Angular application such as the desktop application.

ng add @nstudio/xplat

ng add @nstudio/web-angular

ng add @nstudio/electron

Would you like to generate xplat supporting architecture now? Electron

Do you prefer to use a frontend framework? Angular

ng g app

What name would you like for this app? ElectronApp

What type of app would like to create? Electron

Which frontend framework should it use? Angular

Use xplat supporting architecture? No

What’s the name of the web app in your workspace you’d like to use inside Electron? Desktop

In which directory should the app be generated? LEAVE EMPTY

Now your ElectronJS application is created attached to the desktop application, let’s start the application using the following command. Note that your name depends on the command below, if you are in doubt you can find all the commands in the package.json file found in your newly created monorepo.

npm run start.electron.electron-app

Adding Express and Cloud Frontend

Express

Execute the following command to create a express application, remember to pick a name for the application that suits your project.

ng g @nrwl/express:application express

In which directory should the node application be generated? LEAVE EMPTY

Angular

Execute the following command to create a new angular application, remember to pick a name for the application that suits your project.

ng g @nrwl/angular:application cloud

Which stylesheet format would you like to use? SASS(.scss)

In which directory should the node application be generated? LEAVE EMPTY

Run your applications

Each of the following commands will start the corresponding application.

ng serve express

ng serve cloud

ng serve desktop

npm run start.electron.electron-app