OmniStack-Week-9: A JavaScript repository from mymatsubara

RocketSeat's OmniStack Week 9 app (front-end, back-end and mobile app)

About the project

In this week, a back-to-back app for dev spaces booking will be made and deployed using Node.js, React and React Navite.

Setting up the basic environment (Windows)

List of steps required to set up the developmnet envioroment (it will be updated as the project goes on)

Installing node

First you'll need to install Chocalatey using PowerShell (run as admin):

Set-ExecutionPolicy Bypass -Scope Process -Force; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

Then you'll need to instal node itself:

cinst nodejs.install

If you want to check how to install node in more details check here.

Installing Yarn

Just run this simple code on your console:

cinst yarn

Setting up the Back-end

It is recommended to create a separeted folder named backend, in which you'll install some dependencies running the following codes:

yarn add express    #to run the backend
yarn add nodemon -d #to restart the server as soon as a change is applied in dev mode

In sequence, you'll need to create a folder named src to store all the source code which will be:

server.js: Main server code.
routes.js: Where all your backend app routes will be defined.

Don't forget to create an account on MongoAtlas and to create a cluster to host your app. After that it's recommended that you do the following:

Set a new Database Access user.
Set the Network Access (you can set it to connect from anywhere).
Go back to your cluster tab, and click to connect to you cluster.
Set to connect via app, and set the driver as node.js.
Copy the connection string (you'll use it on your express app, and don't forget to substitute the and for your registered Database Access user password and username).

Installing moongose via yarn/npm:

yarn add mongoose

Export mongoose to your main app (server.js) and connect to the created cluster using the code recently acquired in the MongoAtlas page. After that, create two new folders models and controllers to apply the MVC pattern - note: we don't create a view folder because we're developing a backend app without any view modification.

In the models folder, create a User.js file in order to set up the user info to be stored in the database. Following this, you'll need to create a new file SessionController.js in the controllers folder, which will receive the request, deal with it and return a response for a session. Following the same pattern, setup the Spot model and Spot controller.

In order to register a Spot, which has a thumbnail, it's needed to install another lib to read and img file since express can't really nativelly understand img files. Thus, you'll need to install multer:

yarn add multer

In order to set some multer configurations, we create a folder called config and then a file called upload.js.

To make life easier

In order to test multiple request to the server and have a more controlled development environment, you can download Insomnia. To add a base URL to your project, just press Ctrl + E and then put the following JSON to the config:

{
  "base_url": "Your base url"
}

To refence it, type base_url in your Insomnia url bar.

Setting up the Front-end

First you'll need to setup your basic front-end environment by typing:

yarn create react-app frontend

After this react will deal with your basic front-end environment creation, and a new folder called frontend will be created. To start the app, go to your new folder and type:

yarn start

After that, multiple folder will be created. Go to public folder leave and index.html and delete everything else to clean up your environment. In sequence, go to src folder and clean up the every file with exception of App.js, App.css and index.js.

You'll need to edit App.js to add your components and App.css to stylize them.

In order to make AJAX calls, it's recommended to install axios (you can use fecth from native JS if you prefer):

yarn add axios

Now you'll create an services folder, and inside of it create the api.js file where some standard config for the api will be setup.

To allow the access for your front-end application to your back-end, it's required to install a depency called cors on your back-end folder:

yarn add cors

Set it up on your server.js file and add some config to restrict the access if you want (in our case, we didn't really restricted anything - it was just to illustrate). Now you can make post requests to your back-end without getting CORS error. In sequence, you'll need to add into your App.js a function to handle the request for the user registration and then store the current session into the user's browser local storage.

Routing multiple pages

It's recommended to install another dependency to help us in the routing process. You'll need to run the following code in the terminal:

yarn add react-router-dom

Then, create a routes.js into your src folder, where the routes handling will be defined. Create a pages folder into your src with a folder for each page to be created, where a index.js file will be placed to set up the component.

PS: Don't forget to turn on your back-end server in the background to use while you're developing the front-end.

Setting up the mobile

You'll need to install expo-cli via terminal:

npm i -g expo-cli

Following this, you'll want to set up you mobile folder environmnent by typing:

expo init mobile  #"mobile" is the name of the folder in which the project will be developed 
yarn start        #a window to handle your test environment will be opened

There 2 main options to emulate an android or ios:

Xcode (ios)
Genymotion for fun (android)
NOX (android)
BlueStacks (android)

Now you're ready to test your app in realtime by changing the App.js content. In sequence, create a folder called src and another one inside of it called pages, which will store the components for each application page. In order to handle the routing between pages, you'll need to create a file routes.js into src and install react-navigation:

yarn add react-navigation
expo install react-native-gesture-handler react-native-reanimated #after react-navigation is installed

For further reference on how to setup some types of navigation routing available check the official documentation.

Then you'll setup each window with its own layout and ajax call using axios (or fetch, from JS).

mymatsubara/OmniStack-Week-9