React.JS on Oracle MBaaS
As announced recently, Oracle MBaaS (Mobile Backend as a Service) allows developers to build and deploy mobile applications using Parse mobile APIs, and provision a backend as a service with the Oracle Database and other infrastructure components that operate on multiple clouds. To try this new service, you could refer to the official documentation or to the quick overview in this post of my colleague Doug Drechsel. In the official documentation you’ll find also example apps.
In this post my intention it’s to show step-by-step how to implement a ReactJS simple app leveraging Oracle MBaaS. I’ll show you how to solve issues related to latest create-react-app version >= 5 whereby you may run into problems building. Assuming you have followed the instructions to deploy the service from OCI Market Place, let’s start client side to develop the application.
- First let’s upload a document collections related to Travel destinations, changing APPLICATION_ID and mbaasserver with your references:
# curl -X POST
-H "X-Parse-Application-Id: APPLICATION_ID" \
-H "Content-Type: application/json" \
-d '{
"requests": [
{
"method": "POST",
"path": "/parse/classes/Travel",
"body": {"photo":"https://live.staticflickr.com/2797/4449977851_67a1f18710.jpg","destination": "Bahamas","price":2200,"ratings":10}
},
{
"method": "POST",
"path": "/parse/classes/Travel",
"body": {"photo":"https://live.staticflickr.com/2148/2035145806_511eb3f217.jpg","destination":"Greece","price":900,"ratings":32}
},
{
"method": "POST",
"path": "/parse/classes/Travel",
"body": {"photo":"https://live.staticflickr.com/2848/12192681145_dffabe5dcd.jpg","destination": "Thailand","price":1800,"ratings":22}
},
{
"method": "POST",
"path": "/parse/classes/Travel",
"body": {"photo":"https://live.staticflickr.com/2821/12193324826_3ec6247ff0.jpg","destination":"Singapore","price":2000,"ratings":14}
},
{
"method": "POST",
"path": "/parse/classes/Travel",
"body": {"photo":"https://live.staticflickr.com/3167/2674362091_56fe9af2b5.jpg","destination": "Hawaii","price":3000,"ratings":5}
},
{
"method": "POST",
"path": "/parse/classes/Travel",
"body": {"photo":"https://live.staticflickr.com/2337/1765669439_a0b6e6104b.jpg","destination": "Polinesia","price":4200,"ratings":4}
},
{
"method": "POST",
"path": "/parse/classes/Travel",
"body":
{"photo":"https://live.staticflickr.com/2210/2189073691_1a071fefcb.jpg","destination": "Portugal","price":700,"ratings":9}
},
{
"method": "POST",
"path": "/parse/classes/Travel",
"body":{"photo":"https://live.staticflickr.com/2372/2041130429_acdb0c1e23.jpg","destination": "Spain","price":600,"ratings":6}
},
{
"method": "POST",
"path": "/parse/classes/Travel",
"body": {"photo":"https://live.staticflickr.com/3106/2469237064_e724e2f6bd.jpg","destination": "California","price":2100,"ratings":3}
}
]
}' \
http://mbaasserver/parse/batchAt the end you should have a response like the following, confirming successful insert:
[{"success":{"objectId":"uVcLSKEOuu","createdAt":"2022-12-22T17:07:52.447Z"}},
{"success":{"objectId":"DTmTtiQXoy","createdAt":"2022-12-22T17:07:52.447Z"}},
{"success":{"objectId":"uwafzDOzwu","createdAt":"2022-12-22T17:07:52.447Z"}},
{"success":{"objectId":"E8kAwA8nME","createdAt":"2022-12-22T17:07:52.447Z"}},
{"success":{"objectId":"ZLRvqMQqer","createdAt":"2022-12-22T17:07:52.447Z"}},
{"success":{"objectId":"8YPXtmtszA","createdAt":"2022-12-22T17:07:52.447Z"}},
{"success":{"objectId":"XH7ESfOwjT","createdAt":"2022-12-22T17:07:52.447Z"}},
{"success":{"objectId":"dHwdTZlI0V","createdAt":"2022-12-22T17:07:52.447Z"}},
{"success":{"objectId":"oE94Ug2cEc","createdAt":"2022-12-22T17:07:52.447Z"}}]%- Let’s check on the Oracle MBaaS Dashboard too, simply opening in a browser the url of mbaasserver:
- Let’s start to create the React project opening a shell:
$ npx create-react-app mbaas-react
$ cd mbaas-react
$ npm install parse- To solve the issues related to Polyfill node core modules in webpack 5, coming from the latest create-react-app module, there are many ways, the worst is this:
$ npm uninstall react-scripts
$ npm install react-scripts@4.0.3- the best practice I’ve experimented, following several documents like this, starts from installing additional npm packages:
$ npm install --save-dev https-browserify stream-http browserify-zlib stream-browserify crypto-browserify url assert buffer util process @craco/craco- in project root directory “mbaas-react” created at the first step, create a new file craco.config.js, and add to it the following content as suggested also here:
const webpack = require("webpack");
module.exports = {
webpack: {
configure: {
resolve: {
fallback: {
process: require.resolve("process/browser"),
zlib: require.resolve("browserify-zlib"),
stream: require.resolve("stream-browserify"),
util: require.resolve("util"),
buffer: require.resolve("buffer"),
asset: require.resolve("assert"),
https: require.resolve("https-browserify"),
http: require.resolve("stream-http"),
crypto: require.resolve("crypto-browserify"),
url: require.resolve("url/"),
assert: require.resolve("assert/"),
buffer: require.resolve("buffer"),
util: require.resolve("util/"),
net: false,
child_process:false,
tls:false,
fs:false,
bufferutil:false,
"utf-8-validate":false
},
},
plugins: [
new webpack.ProvidePlugin({
Buffer: ["buffer", "Buffer"],
process: "process/browser",
}),
],
},
},
};this solve all the dependencies and manages the additional setup that you should do in webpack.config.js of the react-scripts module.
- in the project root dir, modify package.json, in particular change in the scripts node the original react-scripts, routing to craco utility:
..
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "craco eject"
},
..- Let’s set the references to MBaaS server and APPLICATION_ID adding them in App.js:
import logo from './logo.svg';
import './App.css';
...
const Parse = require('parse/node');
Parse.initialize('APPLICATION_ID');
Parse.serverURL = "http://mbaasserver/parse";
...- in index.js delete everything, except:
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';and add the following code:
const Parse = require('parse/node');
const root = ReactDOM.createRoot(
document.getElementById('root')
);
function render(res) {
return <div>
<center>
<h1>Travel Agency </h1>
<h2>Top {res.length} destinations</h2>
<h3><i>for {res[6].get('destination')} special price !!</i>. </h3>
{
res && (
<div>
{ res.map(r => (
<div>
<div align="center">
<img src={r.get('photo')} onClick={(b) => {
console.log({r});
alert(JSON.stringify({r}));
}} alt="">
</img>
</div>
<div>
<h3>{r.get('destination')}</h3>
</div>
</div>
)
)
}
</div>
)}
</center>
</div>;
};
function QueryTravel() {
const Travels = Parse.Object.extend("Travel");
const q = new Parse.Query(Travels);
const results = q.find();
results.then((res)=>{
console.log("Got travel destination");
const element=render(res);
root.render(element);
});
};
//If auto-refresh needed
//setInterval(QueryTravel, 3000);
QueryTravel();In this code we are using JSX Javascript extension to render the results of MBaaS Rest call to get the list of travel destinations previously inserted.
- It’s time to start and test the application:
$ npm start- In the browser, from http://localhost:3000 URL you should see:
- clicking, for example, on Hawaii, an alert pop-up with the JSON document coming from MBaaS will be shown:
This concludes the post that introduces how to use the Parse Javascript SDK on Oracle MBaaS with a simple ReactJS example. Looking forward to others posts related to MBaaS, I hope in the meantime you will have the pleasure of flying to these Travel destinations!!
Disclaimer
The views expressed in this paper are my own and do not necessarily reflect the views of Oracle.
