Build a MERN stack using Parse

Build a MERN stack using Parse

MERN is a free and open-source JavaScript software stack for building dynamic web sites and web applications.
MERN stands for the technologies involved: MongoDB, Express, React and NodeJS.

MongoDB is a document-based open source database

Express is a web framework for Node.js

React is a JavaScript front-end library for building user interfaces

Node.js is a JavaScript runtime built on Chrome’s V8 JavaScript engine

Because all components of the MERN stack support programs that are written in JavaScript, MERN applications can be written in one language for both server-side and client-side execution environments.

It is pretty much the stack we use in Back4app behind Parse, so there are a few advantages of using Parse to build your MERN applications instead of building and handling the stack yourself:

  • No infrastructure hassles
  • Fully scalable, secure and failure-tolerant environment
  • Access to Parse features
  • Full GraphQL support
  • Technical support
  • FREE as in free beer

Building my own stack

If you decide to build and run your own stack, you should start by choosing where to run it. There are a few places such as Amazon AWS, Microsoft Azure, Alibaba Cloud, Google Cloud Services.

Most offer free plans to host small applications and distinct features, which you should evaluate before choosing where your application will live.

Though these services offer free hosting, you will still probably have to pay attention to a few key aspects:

  • Operating System versioning
  • Software versioning
  • If something breaks, how will the system respond?
    • I.e.: if MongoDB crashes, how will the Application respond?
  • How often backup is being made
    • Backup is being made, but will it restore?
  • Reliability of the whole system
  • How does it scale when hit hard?
  • Is it safe from an Application perspective?
    • Is your user’s data protected?
    • Does it conform to GDPR and other standards?

Once you get that figured out, you can start installing and configuring your stack and only then start developing.

The Parse way

Back4app in its standard configuration got you covered running Parse with most of the MERN stack: we use MongoDB as our default database, NodeJS as our main programming language for Cloud Code and Jobs and Express in the stack.

The only part missing is React, which is not present by default but is supported by the stack, so let’s write a quick Parse project that has the whole MERN stack in it and it is scalable, secure, failure tolerant, has full GraphQL support and has a very strict backup policy.

NPMs used

We will be using the following NPM modules with our example:

  • parse
  • react
  • react-dom
  • react-scripts

The Package.json

Our Package.json file will look like this:

{
  "name": "react-quickstart-example",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "parse": "^1.11.1",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-scripts": "1.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

The React part

Remember you can always download a template here and get everything you need to run the React code in Back4app.

Let’s start by importing the libraries we will be using:

import React, {Component} from 'react';
import Parse from 'parse';

And then extending our Home class from Component.
In here we will define the constructor, variables, methods and the render method which will, well, render our output:

class Home extends Component {
  constructor(props) {
    super(props);

    this.state = {
      result: ''
    };

    let install = new Parse.Installation();
    install.set("deviceType", navigator.userAgent);

    install.save().then((resp) => {
      console.log('Created install object', resp);

      this.setState({
        result: 'New object created with objectId: ' + resp.id
      })
    }, err => {
      console.log('Error creating install object', err);

      this.setState({
        result: 'Failed to create new object, with error code: ' + err.message
      })
    })
  }

  render() {
    return (
      <h1>{this.state.result}</h1>
    )
  }
}

Last but not least, let’s export our code:

export default Home;

The App.js file

The App.js file will hold the code for invoking our Home.js.

Let’s start by importing our libraries:

import React, { Component } from 'react';
import Parse from 'parse';
import Home from "./components/home";
import './App.css';

And then, creating our App class, extending Component, inside which we will instantiate Parse and set the page title:

class App extends Component {
  constructor(props) {
    super(props);

    // TODO don't forget to add your app and js ids
    Parse.initialize("N56AD0IVukoLn4T3KFp0ajelxzEyDHE0lLGXddLl", "k3AwgnkbELhBA6EBUHMivr2uUuDwIVLeHo1w9KiU");
    Parse.serverURL = 'https://parseapi.back4app.com/';
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <h1 className="App-title">Back4App Tutorial</h1>
        </header>
        <Home/>
      </div>
    );
  }
}

Once again, we must export everything:

export default App;

And we are good to go.

The index.js file

It is time to create our index.js file and import all our code in there:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

And finally get it running:

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

Building

If everything went well, you should be able to build the project by typing:

npm run build

which will result in a “build” folder in your system.
You should upload the whole “build” folder into your “public” folder in Back4app.

Mine ended up like this:

The easiest way to upload everything at once is using the Back4app Cli, which will upload files and folders in the correct structure.

Enabling Web Hosting

In order to host your React app in Back4app, you must enable Web Hosting, which will set up a URL from where you can access your website.

Mine was configured like this:

Testing

Now with everything up and running, it is time for some testing.

Access your App’s URL, the one you entered in Web Hosting, and you should see an Application page:

To check the created object, go to your Database Browser and look for the newly created records:

Conclusion and Key Points

You just created a MERN app using Parse in Back4app.

Your App is now not only working, but scalable, secure, failure-redundant and has backups automatically done for you.

You don’t have to worry about operating system upgrades, patches, and regular maintenance. We got you covered with everything.

At the end of the day, you can focus on what is really important: producing code that adds value to your App and business.

We will take care of everything else.


Leave a reply

Your email address will not be published.