Setup your monorepo

Discover the world of IT

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
  • Leave a Reply

    Your email address will not be published. Required fields are marked *