7

How to easily setup a fullstack react and react-native project in 8 minutes?

 3 years ago
source link: https://yonatankra.com/fullstack-react-native-project-in-8-minutes/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

How to easily setup a fullstack react and react-native project in 8 minutes?

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:

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:

  1. Run npx create-nx-workspace@latest
  2. Type a project name
  3. Select the right project for you. In our case, I’ll select React + Express, but you can mix and match everything later on
  4. cd into the project
  5. The project created holds an api application with a single entry point in apps/api
    1. Run it with npm start api
    2. You can create a node library by running: nx g @nrwl/node:library
    3. You will then be able to import it into your apps (see the api library in the project).
  6. It also holds a react application
    1. Run it with npm start <my-app-name>
    2. You can create a component for the app like this:
      nx g @nrwl/react:component --project=<my-project-name>
    3. Create shared libraries for react with this command:
      nx g @nrwl/react:library

How to add react-native to an Nx monorepo?

  1. Let’s add react-native :
    1. Install the react-native plugin: npm i @nrwl/react-native -D
    2. Create a react-native app: nx g @nrwl/react-native:application
  2. We can also build components and libraries just like we did with node and react apps:
    1. nx g @nrwl/react-native:component
    2. nx g @nrwl/react-native:library
  3. Run the app using:
    1. npm run nx run-android <app-name>
    2. npm run nx run-ios <app-name>
  4. You can build apps by using the npm run build <app-name>
    1. This will create a dist folder with your built app in it
  5. 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.
  6. 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:

Nx plugins list for fullstack developmentAn insane list of 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.


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK