DEV Community

loading...
Cover image for NX MERN Starter with auth and deploy

NX MERN Starter with auth and deploy

codsworth
I'm a Stockholm, Sweden based javascript developer. Currently I'm trying to learn in public, and get better at creating content for dev teams to improve their dev experience and productivity.
Updated on ・2 min read

NX Workspaces is a powerful tool for scaffolding enterprise level starting points for node.js monorepos with both backend and frontend code in the same repo. This is a starter for developing MERN (MongoDB, Express, React, Node) apps with NX workspaces, jwt and cookies.

Structure

Each app in the monorepo lives in it's own folder with the apps folder.

apps
├── frontend
└── backend
Enter fullscreen mode Exit fullscreen mode

The root of the project also includes a libs folder which provides a library with typescript types that can be consumed by both the frontend and backend.

libs
├── types
Enter fullscreen mode Exit fullscreen mode

Clone the app

Run the following command in your terminal.

git clone git@github.com:codsworth9/nx-mern.git
Enter fullscreen mode Exit fullscreen mode

Rename the .env.example file to .env

In the .env file update the strings for NX_CONNECTION_STRING and NX_JWT_SECRET. You can leave the rest as it is.

NX_CONNECTION_STRING=YOUR-MONGO-DB-CONNECTION-STRING
NX_JWT_SECRET=YOUR-SECRET
Enter fullscreen mode Exit fullscreen mode

Run the app locally

Install the dependencies for the monorepo.

yarn
Enter fullscreen mode Exit fullscreen mode

Then run the development command

yarn dev
Enter fullscreen mode Exit fullscreen mode

Bump all your dependencies

Update all dependencies at once with the command below

yarn update
Enter fullscreen mode Exit fullscreen mode

If all changes look ok run

yarn
Enter fullscreen mode Exit fullscreen mode

Deploy app to Heroku

Sign up for a free account at Heroku here. Install the Heroku CLI by running the command below in the terminal.

brew tap heroku/brew && brew install heroku
Enter fullscreen mode Exit fullscreen mode

Run the heroku login command

heroku login
Enter fullscreen mode Exit fullscreen mode

Heroku will ask you to authenticate yourself in the browser.
Heroku login
Once it's complete you can return to the terminal. You're now logged in.

Create a Heroku deploy target

Run the CLI command for creating a new deploy target in your Heroku account.

heroku create
Enter fullscreen mode Exit fullscreen mode

Once it's finished it will look like this. Heroku deploy target

Set environment variables in heroku

Post your environments variables to heroku from the terminal.

heroku config:set NX_CONNECTION_STRING=YOUR-MONGO-DB-CONNECTION-STRING
NX_JWT_SECRET=YOUR-JWT-SECRET
NX_SITE_URL=YOUR-HEROKU-APP-URL
Enter fullscreen mode Exit fullscreen mode

Procfile in the root of your project

Create a Procfile in the root of your project and add the following

web: yarn start
Enter fullscreen mode Exit fullscreen mode

Deploy code to Heroku

Make sure all your changes in the repo are commited. Then run

git push heroku master
Enter fullscreen mode Exit fullscreen mode

Visit your deployed fullstack app

Use the CLI command below to open up your deployed app in your default browser.

heroku open
Enter fullscreen mode Exit fullscreen mode

Demo

Your NX Mern app is now deployed and running on Heroku.

Credit

This repo uses some ideas from the excellent Devistry MERN repo.

Discussion (0)