How to Set Up a MEAN Stack with Nx in Less than 20 Minutes

How to Set Up a MEAN Stack with Nx in Less than 20 Minutes

How to Set Up a MEAN Stack with Nx in Less than 20 Minutes. 20 minutes, 3 steps, 1 running JavaScript full-stack TODO app! Let’s do this! I’ve decided to build and share with you the “groundwork” for a MEAN stack app, using Nx. Nx is a tool meant to build, architect, and test a monorepo (several apps in one single codebase).

20 minutes, 3 steps, 1 running JavaScript full-stack TODO app! Let’s do this! 😎

When starting a new project, there is always a bunch of annoying, time-consuming tasks required to set up your app, install the tools, go through the doc, remember the shell commands… 😩.

I’ve personally started dozens of apps and every time, it’s the same thing all over again. The worst part is that I never remember the process by heart and feel like wasting my time because it’s literally identical.

So, for this article (and my mental health ✌️), I’ve decided to build and share with you the “groundwork” for a MEAN stack app, using Nx. Just as a quick reminder, MEAN — means (sorry I had to… 😂) — stands for  MongoDB,  Express,  Angular &  Node.js.

Nx is a tool meant to build, architect, and test a monorepo (several apps in one single codebase). After the setup, we will implement a simple end-to-end TODO app.

Prerequisites

There are two prerequisites, being the installation of NodeJS and MongoDB. We’ll focus on the app more than the installation. You can download NodeJS here and MongoDB  here.

My setup

node -v
//  v12.20.0

npm -v
// v6.14.8
mongo --version
// MongoDB shell version v4.2.3

Ready, get set…

nodejs angular javascript programming

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Install Angular - Angular Environment Setup Process

Install Angular in easy step by step process. Firstly Install Node.js & npm, then Install Angular CLI, Create workspace and Deploy your App.

Basics of Angular: Part-1

What is Angular? What it does? How we implement it in a project? So, here are some basics of angular to let you learn more about angular. Angular is a Typesc

Updating From Angular 10 to Angular 11

Updating from Angular 10 to Angular 11. In 2020, Angular received three stable update (Version 9, 10, and 11,) each introducing a few significant changes. We’ll focus on the last two, Angular 10 and Angular 11, the rule is currently facing issues, especially for packages like update @angular/core.

What is ECMAScript and How is it Different From JavaScript?

Many times developers use JavaScript and ECMAScript synonymously for each other. Though they are very closely linked to each other, it does not mean they are the same thing.here is a complete story on the history of JavaScript and how it came into existence. To cut the long story short, ECMA in ECMAScript refers to Europen Computer Manufacturers Association to which JavaScript 1.1 was submitted for standardization back in the year 1997.

Learn Angular Basics by Building a Simple App Using Angular Material

I currently work as an Angular developer, building tools the employees at my company use to get their jobs done and hopefully enjoy doing them. I only started developing in Angular at the beginning of May this year, but I love front-end work and am so pumped to get the chance to learn this new skill professionally.