This application will provide all the necessary tools to build an enterprise ready native application. It uses redux for state management as well as leveraging redux-thunk as a middleware for asynchronous operations. React Native Router is used to manage the routing of the application. Network requests is handled by the axios Promise based HTTP client. For configuration we leverage react-native-dotenv so that a .env file can be used to hold configuration variables for the application. Expo is used to run the application for development and eslint is used to ensure a cohesive style throughout the project.
Resources:
Project structure took hints from many articles, open source react/redux applications and tutorials. The project took cues from everything "The Twelve-Factor App" guide to github issues. After careful research, this project structure aims to provide high cohesion and low coupling through separation of concerns and using a modular design.
Inspiration for Project Structure:
React + Redux: Architecture Overview
10 Tips for Better Redux Architecture
Three Rules For Structuring (Redux) Applications
How to Better Organize Your React Applications
How to Use Redux on Highly Scalable Javascript Applications?
Putting API calls in the correct place in Redux Apps
A Guide For Building A React Redux CRUD App
After you generate your project, these commands are available in package.json.
Run npm install to install the dependencies for the project.
Commands provided by create-react-native-app:
Runs your app in development mode with an interactive prompt. To run it without a prompt, use the --no-interactive flag.
Open it in the Expo app on your phone to view it. It will reload if you save edits to your files, and you will see build errors and logs in the terminal.
Runs the jest test runner on your tests.
Like npm start, but also attempts to open your app in the iOS Simulator if you're on a Mac and have it installed.
Like npm start, but also attempts to open your app on a connected Android device or emulator. Requires an installation of Android build tools (see React Native docs for detailed setup).
This will start the process of "ejecting" from Create React Native App's build scripts. You'll be asked a couple of questions about how you'd like to build your project.
Warning: Running eject is a permanent action. Please use a version control system, such as git, so you can revert back if necessary. An ejected app will require you to have an Xcode and/or Android Studio environment set up.
First, you will need to create an .env file that contains your configuration details. In the top level of the project you can run
$ touch .env; cat .env.example > .envIn the .env file, fill out the necessary fields. Note when developing locally you may not be able to use your loopback address (127.0.0.1 or localhost) as the BACKEND_IP. You will need to use your machines external IP address. Remember that the application is being run on either your phone or an emulator therefore there is no loopback address.
To run the application:
$ npm start
> [email protected] start /users/user/react-native-template
> cross-env NODE_ENV=development react-native-scripts start
08:18:96 PM: Starting packager...
Packager started!
First, change directories into the backend/ directory. Then run npm install. Once all the dependencies are installed run npm start.
$ npm install
$ npm start
> [email protected] start /users/user/react-native-template/backend
> node server.js
JSON Server is running