Setup a fully working fullstack express, react and react-native environment in 8 minutes. We will do it with Nx, express, react and react native.
Lately I’ve been part of the organizing team for the Vonage TLV hackathon. A member of the team thought it would be great to create short “how to” videos that will help teams to get up and running real quick. I created a video on how to setup a fullstack react and react-native project. Surprisingly, it was really quick!
If you want to watch the video, here it is:
Table of Contents
How to setup the fullstack web and mobile project?
The project is hosted here: https://github.com/YonatanKra/nx-fullstack-mobile
These are the steps taken in the video:
- Run
npx create-nx-workspace@latest
- Type a project name
- Select the right project for you. In our case, I’ll select React + Express, but you can mix and match everything later on
cd
into the project- The project created holds an api application with a single entry point in
apps/api
- Run it with
npm start api
- You can create a node library by running:
nx g @nrwl/node:library
- You will then be able to import it into your apps (see the
api
library in the project).
- Run it with
- It also holds a react application
- Run it with
npm start <my-app-name>
- You can create a component for the app like this:
nx g @nrwl/react:component --project=<my-project-name>
- Create shared libraries for react with this command:
nx g @nrwl/react:library
- Run it with
How to add react-native to an Nx monorepo?
- Let’s add
react-native
:- Install the
react-native
plugin:npm i @nrwl/react-native -D
- Create a
react-native
app:nx g @nrwl/react-native:application
- Install the
- We can also build components and libraries just like we did with node and react apps:
nx g @nrwl/react-native:component
nx g @nrwl/react-native:library
- Run the app using:
npm run nx run-android <app-name>
npm run nx run-ios <app-name>
- You can build apps by using the
npm run build <app-name>
- This will create a dist folder with your built app in it
- You can set environment variables for every app in its environment files and use them in the application. Check the
environments
folder in each app. Here’s an example. - There are many more commands and options and you can read more about them in the official Nx documentation.
Adding more tech stacks
You can easily add angular, vue, nest, python, go etc. by using nx plugins.
Head over to the nx website and browse the available plugins and community plugins.
You can also use the nx list
command to show available plugins:

Pro tip: You are sometimes better off searching for “nx” and the name of the plugin you are looking on google. If it is not listed in the official Nx plugins list, it might still exist. That’s how I found the Nx Python plugin.
Known issues:
Android/iOs apps fail during build right after a clean install
Make sure you have xCode and Android Studio installed.
Error: Failed to install the app. Please accept all necessary Android SDK licenses using Android SDK Manager
Go to android studio -> tools -> sdk manager -> sdk tools
Install the sdk cli tool
Summary
In this short tutorial we saw how we can build a fullstack mobile and web application in a few easy steps.
Nx is packed full of super useful generators that will help you kick-start your project and boost your work on it. However, Nx doesn’t end with generating code; It’s a very potent tool for managing monorepos in general. You can manage an army of microservices and apps of all kinds in one place.
I hope you enjoyed this one and that you are ready for your next “quick coding” challenge. If you want to know more about Nx, you can read them on the Nx official website. I’ve written a few articles about it – you can read them here.
Thanks a lot to Tal Weinfeld and Maor Elimelech for the kind and thorough review.