Product Listing Creator: First Steps

In a previous blog post, I wrote about an issue for e-commerce businesses. It is basically the issue related to multichannel selling. When a business is selling on multiple channels like Amazon, eBay, own website, etc., one the issue is related to managing product listings on all these channels. When the number of products runs into hundreds, managing these listings become a very cumbersome process.

To solve this issue, I thought about an idea for an application called Product Listing Creator, which is detailed in the blog post I mentioned previously. Finally, I started building the application. In this blog post, I am writing about my first steps as I started to build the application.

The first step when I start developing an application is “build and deploy”. Then I setup up continuous integration. From that time onwards, I start adding features. Developing the application this way makes it possible to release the application at any time, which whatever features have been built so far. I have taken this approach in my last application. The build and deploy process on that application took 1.5 days. However, this time I saw a big improvement. I could complete the whole build and deploy step as well as setup continuous integration, in just a couple of hours. This is because I was following the same architecture and so most of the things were already known to me.

However, from my last project, I learned one thing. In that application, although I followed the “build and deploy” as the first step, it was accompanied by developing the UI of the application. Once the UI for some basic features was complete, I started making the application work with data. However, this was a mistake. Instead of focussing on UI and then doing the server part, I decided to take a different approach in my current application. I will be focussing on a feature as a whole. That includes the UI, server and database integration for that feature. The benefit of using this approach is that it lets me focus on the most important feature of my application. Let’s see how I started developing the application.

The first step was setting up the application i.e., build and deploy and continous integration. The front-end of my application is going to be a react application. The backend will be in ExpressJS and I will use MongoDB for database. So, first let’s setup the react application. Go to the projects folder and use this command to create a react app:
create-react-app product-listing-creator

For this command to run successfully, create-react-app npm package should be installed globally:
npm install -g create-react-app

It creates a folder called create-react-app. Go to the folder start the application:
npm start

Now, initiate a git repository in the folder:
git init

Also, create a package.json file, with this command:
npm init

Now, let’s create a Heroku app for this app.
heroku create productlistingcreator

It creates a remote “heroku” and we can commit and push our code to this remote:
git commit . -m "create react app"
git push heroku master

The app can be run locally with:
heroku local

To run it on production:
heroku open

After the app is setup on production, let us setup continuous integration using GitHub. Create a repository on GitHub called productlistingcreator and copy its URL.

Then, add a remote on local that maps to this repository:
git remote add productlistingcreator URL

Now push code to this reposistory:
git push productlistingcreator master

Now on Heroku app, setup integration with this repository and also setup automatic deploys from this branch.

This sets up up front end part of the app.

Similarly, we can setup the backend of the app. We will create an app for APIs that will be consumed by the front-end.

Create a new folder called plc-api and create package.json in it. Then, create a file called server.js and write this code to setup ExpressJS server:

var express = require('express');

var app = express();

app.get('/', function(req, res) {
  res.send("This is product listing creator API");
});

app.listen(process.env.PORT, function() {
  console.log("Listening on port " + process.env.PORT);
});

Now initialize a git repository:
git init

For this app I am setting a local environment variable PORT:
export PORT=4000
Then create a Heroku app and setup continuous integration using the same steps as above. Start the app with:
heroku local

Now, let’s make a call to this API from our front end app. For this install whatwg-fetch on the front end application:
npm install --save whatwg-fetch

Now, use fetch to make a call to this API.

fetch('http://localhost:4000')
  .then(function() {

  })
  .catch(function() {

  });

On executing this code we will get a Cross Request Origin issue. To fix the issue, let’s install an NPM package called ‘cors’:
npm install --save cors

Then in server.js:

var cors = require('cors');

var corsOptions = {
  origin: process.env.ALLOW_ORI,
  optionsSuccessStatus: 200
}

app.use(cors(corsOptions));

ALLOW_ORI is the environment variable we need to setup on both local and production. For local, set it with:
export ALLOW_ORI=http://localhost:5000

For production, use this command:
heroku config:set ALLOW_ORI=https://productlistingcreator.herokuapp.com

Now, the cross origin issue is fixed. Let’s setup database on the server. For this install MongoDB on local and use mongodb NPM package to connect to it.
npm install --save mongodb

Then in code:

var MongoClient = require('mongodb');
var ObjectID = MongoClient.ObjectID;

var db;
MongoClient.connect(process.env.MONGODB_URI, function(err, database) {
  if (err) {
    console.log(err);
    process.exit(1);
  }

  db = database;
  console.log("Connected to mongodb");
}

Now the MONGODB_URI is the connection string which is different for local and production environments. For production, create a new database in mLab and copy the connection string. Then set it as the environment variable on production:
heroku config:set MONGODB_URI=Connection string

For local, use the local installation connection string. For example:
export MONGODB_URI=mongodb://localhost:27017/plc

This sets up up the database.

This completes the build and deploy of the application. In next post, I will start creating my first feature.