DEV Community: Muhammad Talha Akbar

What would you do differently to build this simple form? Give your feedback!

Muhammad Talha Akbar — Tue, 29 Aug 2023 12:32:03 +0000

It's been a while since I worked on a project from scratch. To check how things have since changed, I created a simple form project with React: https://main--vocal-moxie-c759df.netlify.app/

Check out the repo: https://github.com/dev-talha-akbar/react-recipe-form

What I have learned so far:

Vite is fast and hassle-free. I have not had to change a single config.
Bootstrap is still a great help. I could actually do way more with its well-documented and well-maintained components.
It's hard to maintain state in React. It becomes frustrating to do simple operations especially on arrays.
Since vanilla React easily becomes repetitive and frustrating, having React Query is a great addition to handle server logic.
i18next is great but setting it up is a tricky endeavor with automatic file scans.

If you had the chance to look at the source code or the demo, what would you have done differently? What would you do next?

Declarative Feedback on Vuex Actions through Vuex

Muhammad Talha Akbar — Sun, 31 Jan 2021 16:59:08 +0000

As a frontend developer, we come across many a times the scenario where we dispatch actions and in our components, have status "flags" that track whether that action is being processed aka. loading, succeeded or failed. And, then show an appropriate feedback to the user based on these flags. Take this Vue component with Vuex store as an example:

<template>
  <div>
    <message v-if="error">Could not do something.</message>
    <message v-if="success">Did something successfully.</message>
    <button @click="doSomething()" :disabled="loading">
      <spinner v-if="loading"></spinner> Do Something
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      error: false,
      success: false,
      loading: false
    }
  },
  methods: {
    async doSomething() {
      this.loading = true;

      try {
        await this.$store.dispatch('someAction');
        this.success = true;
      } catch(e) {
        this.error = true;
      }
    }
  }
}
</script>

Above, you can see, we have a simple, effective feedback state. However, it's repetitive and only available inside the component itself. What if we could make this tracking of action's state declarative, available globally and with almost no boilerplate? What if it was something like this:

<template>
  <action-status :actionName="someAction">
    <div slot-scope="{ status }">
      <message v-if="status.error">Could not do something.</message>
      <message v-if="status.success">Did something successfully.</message>
      <button @click="doSomething()" :disabled="status.loading">
        <spinner v-if="status.loading"></spinner> Do Something
      </button>
    </div>
  </action-status>
</template>

<script>
export default {
  methods: {
    async doSomething() {
      await this.$store.dispatch('someAction');
    }
  }
}
</script>

Do you like the new way: a single neat component that takes the name of the Vuex action you want to observe and provides you with its status? If yes, here's how you can develop the action-status component:

The first step is to hook into our Vuex store and get updated about every action that is ever dispatched. To do that, you have store.subscribeAction method available. It takes an object with 3 callbacks i.e. before, after and error. So, register all 3 callbacks with something like:

store.subscribeAction({
  before(action) { },
  after(action) { },
  error(action) { }
});

The second step is develop a store module named actionStatus which will store the status of every action that is being dispatched. Here's how actionStatus module will look like:

export default {
  namespaced: true,
  state: {
    actions: [],
    statusAction: {}
  },
  getters: {
    status: state => actionName => {
      return state.statusAction[actionName] || {
        error: false,
        success: false,
        loading: false
      }
    }
  },
  mutations: {
    NEW: (state, action) => {
      if(!state.statusAction[action.type]) {
        state.actions = [...state.actions, action.type];
      }
      state.statusAction = {
        ...state.statusAction,
        [action.type]: {
          loading: true,
          error: false,
          success: false
        }
      }
    },
    SUCCESS: (state, action) => {
      state.statusAction = {
        ...state.statusAction,
        [action.type]: {
          loading: false,
          error: false,
          success: true
        }
      }
    },
    ERROR: (state, action) => {
      state.statusAction = {
        ...state.statusAction,
        [action.type]: {
          loading: false,
          error: true,
          success: false
        }
      }
    },
  },
  actions: {
    trackNew: ({ commit }, action) => {
      commit('NEW', action);
    },
    trackSuccess: ({ commit }, action) => {
      commit('SUCCESS', action);
    },
    trackError: ({ commit }, action) => {
      commit('ERROR', action);
    }
  },
}

The third step will be to dispatch actionStatus actions inside our store.subscribeAction hook:

function isActionStatusAction(action) {
  return action.type.indexOf('actionStatus) > -1;
}
store.subscribeAction({
  before(action) {
    if(!isActionStatusAction(action)) {
      store.dispatch('actionStatus/trackNew', action);
    }
  },
  after(action) {
    if(!isActionStatusAction(action)) {
      store.dispatch('actionStatus/trackSuccess', action);
    }
  },
  error(action, status, error) {
    // `error` is available too
    if(!isActionStatusAction(action)) {
      store.dispatch('actionStatus/trackError', action);
    }
  }
});

The fourth step is create the action-status component that gets the status data about Vuex actions from the actionStatus module and makes it available to be used in any Vue component:

export default {
  props: {
    actionName: {
      type: String,
      required: true
    }
  },
  render() {
    return this.$scopedSlots.default({
      status: this.$store.getters['actionStatus/status'](this.actionName)
    });
  }
}

And, with these 4 steps, we can now say goodbye status flags inside of our components and track any Vuex action from any Vue component. You can modify the above code to make the actual error object available in the slot-scope, or modify it to accept multiple action names and report the status of each Vuex action inside your component. The possibilities are there.

Finally, do you think it's something you will end up using in your project? Look forward to hear your feedback about this.

LDAP Directory & SQL Database - Syncing the Unsyncable?

Muhammad Talha Akbar — Mon, 30 Sep 2019 19:45:02 +0000

While I would like to start this article by greeting you all and writing all that good stuff people put at the top but, let's just start by noting that we live in a world where nothing is perfect or at least the stuff humans come up with. One thing works great for one specific problem but, not so good for others. Like the IT guys would tell you how Directory Services are so good at managing users, computers, their access and security so, they would always like to keep that thing up and running. But, you, the developer, know how easy it is to query, sort, filter and associate data in Databases. So, how can we have the best of both? Of course, you could make something along the lines of DirectoryBase (something I totally made up just now) and for that I already wish you good luck. Or, we, the humble ones can continue along with syncing common data between the two services i.e. Directory Service and Database Service.

You can think of syncing as keeping up with the changes i.e. when one thing changes, the other must too OR vice versa. Let's just discuss a case where you are developing an application that manages feedback about employees in your company. Your company already has every employee registered in their Directory Service and want to keep feedback items for each of their employees and the employee who gave that feedback. One way to architecture this simple application would be get access to the Directory Service and save feedback items as that employee's attributes but, this would not give you freedom of querying, sorting and filtering like you would have in a database. So, a better alternative would be to somehow bring the basic data about employees in a database table and create another table of feedbacks that keeps the feedback items.

But, we're so humbly saying that we will fetch employee records from Directory Service and put them into our Database. What if some existing employee leaves, a new employee comes in or worst, some employee got his name or email changed? That's where we need to sync data b/w Directory Service and Database. Notice, we're considering Directory as source while Database as our destination. In some other scenario, you might want to have Database as source and Directory as destination. In very extreme cases, both Directory can act as source and destination. But, let's be humble and tackle our employee-feedback application with Directory as source and Database as destination.

Where to start, you ask? I would suggest asking your very best internet friend Google. Just type your problem and let Google bring you solutions from the world of internet which is unless you want to reinvent several broken wheels yourself. However, since, I am writing this, I have already googled "syncing ldap and sql". The most popular result was this open source LDAP Synchronization Connector thingy aka. LSC.

Now, before I go very specific about how LSC can help you avoid reinventing the wheel, I just want to clear a few things. Directory Service is a general concept and there are a lot of implementations of this concept on different platforms. For Windows, we have Active Directory Directory Services (yes, it's that long); for Linux, we have OpenLDAP. But, what unites all these implementations is this Lightweight Directory Access Protocol aka. LDAP. You can grab a LDAP implementation and talk to any platform-specific directory service. Hurray! And, that's what LSC builds upon. It syncs to any directory service using this LDAP protocol we just discussed. Ain't this world a beautiful place all of a sudden? Also, I would like to point out that specific implementations of these Directory Services might already give you tools to sync changes with some other application like Active Directory on Windows does. Active Directory allows you to poll for changes or subscribe to changes, implementation of which must be done by you, the developer. Active Directory recommends polling for changes is insanity: Checking again and again and expecting a lot of shit to change.

LSC boasts itself to have already fixed some very strange bugs you would run into if you decide to implement your own DirectorySync Ninja - Ultimate Version (perhaps, something more catchy whatever). So, that's one reason to stick to LSC and the second reason would be that I have already gotten my hands dirty while fiddling around with it and would totally recommend it (mainly because it gets the job done).

Before we can carry out this exciting experiment, you would need to setup following things:

LSC
Java
Directory Service
SQL Database
LSC Config

Notes about LSC

To install LSC on Ubuntu or Debian based Linux distro, you can do by following this guide on LSC website. If you're using some other Operating System, you can check out the Download page on LSC website.

Notes about Java - LSC dependency

Since, LSC depends on Java, do setup Java on your machine. LSC documentation wants you to grab Java 6 but, I tried it with Java 8 and everything almost works. Java 9 or above will not probably work as the code is bit old, I believe. It definitely didn't work on Java 11. Continuing your Java setup, make sure JAVA_HOME is in your PATH variable and if it's not, please do add it.

Notes about Directory Service

For directory service, you can use any implementation of it. However, if you don't have something up and running, you can always use this online LDAP server. If you don't have a shiny LDAP client, you can always use the one here.

Notes about Database Service

For database, you can use any SQL implementation. I used MySQL. You can install and set it up honestly using any guide on the internet. If you're reading this, you probably already have it installed. Note: Whatever implementation you choose, you must also install a JDBC Driver. For MySQL, you can find out how to install it here.

LSC Config

Now, you're all done with installing stuff. LSC works by requiring you to edit a config file that is located at /etc/lsc/lsc.xml if you're on Linux. This config file would tell LSC what services to connect to, what services to use as Source and Destination and the rules that may specify how the syncing process is carried out.

Here's a sample config file that will work just fine to start out for our employee feedback application:

<?xml version="1.0" ?>
<lsc xmlns="http://lsc-project.org/XSD/lsc-core-2.1.xsd" revision="1">
  <connections>
    <ldapConnection>
      <name>ldap-src-conn</name>
      <url>ldap://www.zflexldap.com:389/dc=zflexsoftware,dc=com</url>
      <username>cn=ro_admin,ou=sysadmins,dc=zflexsoftware,dc=com</username>
      <password>zflexpass</password>
      <authentication>SIMPLE</authentication>
      <referral>IGNORE</referral>
      <derefAliases>NEVER</derefAliases>
      <version>VERSION_3</version>
      <pageSize>-1</pageSize>
      <factory>com.sun.jndi.ldap.LdapCtxFactory</factory>
      <tlsActivated>false</tlsActivated>
    </ldapConnection>
    <databaseConnection>
      <name>jdbc-dst-conn</name>
      <url>jdbc:mysql://127.0.0.1:3306/lsc</url>
      <username>root</username>
      <password></password>
      <driver>java.sql.DriverManager</driver>
    </databaseConnection>
  </connections>
  <tasks>
    <task>
      <name>Employees</name>
      <bean>org.lsc.beans.SimpleBean</bean>
      <ldapSourceService>
        <name>openldap-source-service-employee</name>
        <connection reference="ldap-src-conn" />
        <baseDn>ou=users,ou=developers,dc=zflexsoftware,dc=com</baseDn>
        <pivotAttributes>
          <string>uid</string>
        </pivotAttributes>
        <fetchedAttributes>
          <string>cn</string>
          <string>uid</string>
        </fetchedAttributes>
        <getAllFilter>(&amp;(objectClass=person)(uid=*))</getAllFilter>
        <getOneFilter>(&amp;(objectClass=person)(uid={uid}))</getOneFilter>
        <cleanFilter>(&amp;(objectClass=person)(uid={uid}))</cleanFilter>
      </ldapSourceService>
      <databaseDestinationService>
        <name>mysql-src-service-client</name>
        <connection reference="jdbc-dst-conn" />
        <requestNameForList>getEmployeeList</requestNameForList>
        <requestNameForObject>getEmployee</requestNameForObject>
        <requestsNameForInsert><string>insertEmployee</string></requestsNameForInsert>
        <requestsNameForUpdate><string>updateEmployee</string></requestsNameForUpdate>
        <requestsNameForDelete><string>deleteEmployee</string></requestsNameForDelete>
      </databaseDestinationService>
      <propertiesBasedSyncOptions>
        <mainIdentifier>srcBean.getMainIdentifier()</mainIdentifier>
        <defaultDelimiter>;</defaultDelimiter>
        <defaultPolicy>FORCE</defaultPolicy>
        <conditions>
            <create>true</create>
            <update>true</update>
            <delete>true</delete>
            <changeId>false</changeId>
        </conditions>
      </propertiesBasedSyncOptions>
    </task>
  </tasks>
</lsc>

If you've reached this far and are clueless, don't be. I will soon be updating this article. Just that my brain has now just jammed for the day plus, I just want to see whether people are actually interested in more of this.

Now, in the config file, you will see the following lines:

    <ldapConnection>
      <name>ldap-src-conn</name>
      <url>ldap://www.zflexldap.com:389/dc=zflexsoftware,dc=com</url>
      <username>cn=ro_admin,ou=sysadmins,dc=zflexsoftware,dc=com</username>
      <password>zflexpass</password>
      <authentication>SIMPLE</authentication>
      <referral>IGNORE</referral>
      <derefAliases>NEVER</derefAliases>
      <version>VERSION_3</version>
      <pageSize>-1</pageSize>
      <factory>com.sun.jndi.ldap.LdapCtxFactory</factory>
      <tlsActivated>false</tlsActivated>
    </ldapConnection>

With that piece of code, we're telling LSC how to connect to our LDAP server. For now, I've put in credentials of an online LDAP server which you can use, too. But, you can always put in your own LDAP server's credentials.

Similarly, we define another connection but, this time, it's a database connection using the following lines:

    <databaseConnection>
      <name>jdbc-dst-conn</name>
      <url>jdbc:mysql://127.0.0.1:3306/lsc</url>
      <username>root</username>
      <password></password>
      <driver>java.sql.DriverManager</driver>
    </databaseConnection>

I've put in default MySQL configuration. If you know your credentials specifically, do edit as you please.

Now, that we have let LSC know how to connect to our services, it's time to define what data should LSC take from LDAP and make it available to be put into the Database, we do so by defining a task of syncing employees from the LDAP server to our Database as follows:

   <task>
      <name>Employees</name>
      <bean>org.lsc.beans.SimpleBean</bean>
      <ldapSourceService>
        <name>openldap-source-service-employee</name>
        <connection reference="ldap-src-conn" />
        <baseDn>ou=users,ou=developers,dc=zflexsoftware,dc=com</baseDn>
        <pivotAttributes>
          <string>uid</string>
        </pivotAttributes>
        <fetchedAttributes>
          <string>cn</string>
          <string>uid</string>
        </fetchedAttributes>
        <getAllFilter>(&amp;(objectClass=person)(uid=*))</getAllFilter>
        <getOneFilter>(&amp;(objectClass=person)(uid={uid}))</getOneFilter>
        <cleanFilter>(&amp;(objectClass=person)(uid={uid}))</cleanFilter>
      </ldapSourceService>
      <databaseDestinationService>
        <name>mysql-src-service-client</name>
        <connection reference="jdbc-dst-conn" />
        <requestNameForList>getEmployeeList</requestNameForList>
        <requestNameForObject>getEmployee</requestNameForObject>
        <requestsNameForInsert><string>insertEmployee</string></requestsNameForInsert>
        <requestsNameForUpdate><string>updateEmployee</string></requestsNameForUpdate>
        <requestsNameForDelete><string>deleteEmployee</string></requestsNameForDelete>
      </databaseDestinationService>
      <propertiesBasedSyncOptions>
        <mainIdentifier>srcBean.getMainIdentifier()</mainIdentifier>
        <defaultDelimiter>;</defaultDelimiter>
        <defaultPolicy>FORCE</defaultPolicy>
        <conditions>
            <create>true</create>
            <update>true</update>
            <delete>true</delete>
            <changeId>false</changeId>
        </conditions>
      </propertiesBasedSyncOptions>
    </task>

Here are some important parts from our Employees task:

baseDN
pivotAttributes
fetchedAttributes
getAllFilter
getOneFilter
cleanFilter
requestNameFor*

baseDN

baseDN defines from where should LSC start looking for LDAP objects. Since, I've used the online zflex LDAP server, I found the users OU in developers OU perfect for our use case. However, you can bind to any OU or DN of your choice. When we will specify our filters, LSC will search objects right under baseDN value. If we were strictly following our employee feedback example, we would have employees OU somewhere in our LDAP which we could bind to.

pivotAttributes

pivotAttributes defines the unique attribute(s) that will identify objects from LDAP. If LDAP has some object with these attributes present but, it's not in our database, that object will be enqueued for insertion. However, If LDAP does not have any object with these attributes but, such object is present in your database, it will be enqueued for deletion.

fetchedAttributes

fetchedAttributes includes pivotAttributes and defines the attribute(s) which will be considered for syncing b/w your LDAP server and database. If any of these attributes get changed in any LDAP object, that object will be enqueued for updation.

getAllFilter

getAllFilter defines how to search for all candidate objects in LDAP under your baseDN. Any object in LDAP that matches our getAllFilter will be available for us to save it in our database.

getOneFilter

getOneFilter defines how to search for a specific candidate object in LDAP under your baseDN. This option is just there to give you flexibility in filtering for a specific object.

cleanFilter

cleanFilter defines how to search for a specific in LDAP under your baseDN which is a candidate for DELETION. Again, its value can just be your getOneFilter but, is there for flexibility.

requestsNameFor*

All requestsNameFor* tags refer to our queries that we will define and look at in a moment. LSC itself does not do the magic of syncing from LDAP to your database but, it only provides mechanism to do it. Whatever it finds in LDAP, either some object yet to inserted, deleted or updated in Database is forwarded to these requests as arguments and then these requests actually specify SQL queries that are ran to sync the LDAP objects to the database. But, I never mentioned how and where these requests should be placed.

Defining Actual SQL Requests

LSC uses iBatis ORM to make everything as easy possible for you. To configure iBatis LSC wants to write another file at /etc/lsc/sql-map-config.xml which LSC will configure iBatis for basic connection details and reference to separate request definition files. Let's take a look at a sample sql-map-config.xml below:

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE sqlMapConfig
    PUBLIC "-//ibatis.apache.org//DTD SQL Map Config 2.0//EN"
    "http://ibatis.apache.org/dtd/sql-map-config-2.dtd">

<!--
    LDAP Synchronization Connector (LSC) - http://lsc-project.org

    This file configure iBatis to read sqlMap files.
    Settings should be generated here automatically.
    The only section you need to check is the sqlMap entries at the bottom.
-->

<sqlMapConfig>

  <!-- The settings element has a number of configuration switches and properties
       that configure the SQL Maps engine. Most are performance tweaks or resource
       management.  They are pretty self explanatory. The defaults are shown here.
       There can be only one settins element.  -->

  <settings
    lazyLoadingEnabled="true"
    cacheModelsEnabled="true"
    enhancementEnabled="true"
    maxRequests="512"
    maxSessions="128"
    maxTransactions="32" 
    useStatementNamespaces="false"
    />

  <transactionManager type="JDBC">
    <dataSource type="SIMPLE">
      <property value="${driver}" name="JDBC.Driver" />
      <property value="${url}" name="JDBC.ConnectionURL" />
      <property value="${username}" name="JDBC.Username"/>
      <property value="${password}" name="JDBC.Password"/>
      <property value="15" name="Pool.MaximumActiveConnections"/>
      <property value="15" name="Pool.MaximumIdleConnections"/>
      <property value="1000" name="Pool.MaximumWait"/>
    </dataSource>
  </transactionManager>

  <!-- Finally, the SQL Maps themselves must be registred with the configuration file.
       Below are some examples of some SQL Map reference elements.  Notice that an
       SQL Map can  be located in the classpath (resource) or at a URL (e.g. file://
       or http://).  There can be any number of sqlMap elements. -->

  <sqlMap url="file://${lsc.config}/sql-map-config.d/Employees.xml"/>

</sqlMapConfig>

Notice the <sqlMap url="file://${lsc.config}/sql-map-config.d/Employees.xml"/> line in the file. We're referring to the file Employees.xml in sql-map-config.d directory. You can go ahead and create sql-map-config.d directory and Employees.xml with the following contents in it:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE sqlMap PUBLIC "-//iBATIS.com//DTD SQL Map 2.0//EN" "http://www.ibatis.com/dtd/sql-map-2.dtd">

<sqlMap namespace="Employees">

    <select id="getEmployee" resultClass="java.util.HashMap" parameterClass="java.util.Map">
        SELECT
            uid,
            name AS cn,
            email AS mail
        FROM Employee
        WHERE uid = #uid#
    </select>

    <insert id="insertEmployee" parameterClass="java.util.Map">
        INSERT INTO Employee
            (uid, name, email)
        VALUES
            (#uid#, IFNULL(#cn#, ''), IFNULL(#mail#, ''))
    </insert>

    <update id="updateEmployee" parameterClass="java.util.Map">
        UPDATE Employee
        SET name = #cn#
        WHERE uid = #uid#
    </update>

    <delete id="deleteEmployee" parameterClass="java.util.Map">
        DELETE FROM Employee
        WHERE uid = #uid#
    </delete>

    <select id="getEmployeeList" resultClass="java.util.HashMap">
        SELECT uid
        FROM Employee
    </select>

</sqlMap>

Once you've done that and modified Employees.xml accordingly. You will be all setup to execute LSC with the task of syncing your company's employees. Just run in the command prompt:

sudo lsc -s Employees

The -s flag tells LSC to run in Synchronization mode and run Employees task. If you've done everything correctly, you will start seeing logs from LSC what objects it found and what it is doing with them. By the end of it all, you'll have all your company Employees from LDAP synced to Database.

BUT ALL IS NOT OVER YET.

You need to register LSC as a CRON job to keep syncing Employees from LDAP to your Database. You can set appropriate time according to the requirements of the application. 5 minutes would do just fine for employee feedback application.

In the next part, I would explain in more detail and would present a more difficult task of syncing groups of users. Stay tuned for that! Don't hesitate to put your thoughts in the comments. Did this article help you in any way? Or do you think it served no purpose? Perhaps, you have a better solution. I'm all ears.

P.S. I did call LDAP-SQL duo unsyncable. They're definitely syncable. But, you would come across a very specific scenario of syncing groups of users which seemingly is unsyncable. Nevertheless, it was nice to have your attention with such title.

Running a small static e-commerce store with less than 5$ budget per month

Muhammad Talha Akbar — Sun, 04 Feb 2018 13:33:51 +0000

Before you start, you can either read the short answer below, read the story or jump to conclusion at the end.

Short Answer

Amazon Lambda
Stripe
serverless framework
Some code magic on your side

Story

Recently, I was assigned a project on Upwork to build a single page store with Stripe. It was not made clear to me what technologies needed to be used for the project so, I quickly suggested the ones with which I was most comfortable with. But, soon, it was revealed to me that I needed to update an existing website and can't start from scratch. Whatever, that's not an issue, right?

Turns out that the existing website that the client was referring to was an Amazon S3 bucket with static hosting enabled. I was being asked to make a fully-functioning store without any backend. I knew there must be a reason that the client wanted it to work that way and was not being totally irrational so, I asked. I was told that the current setup was great and costed around 2$ a month. At this point, I was a bit hesitant and the client felt it so, he asked how much would it cost to migrate it to some other hosting and not compromise the great setup he had. I replied that I understood that he didn't want to change anything and I will try to keep it that way but, will need some time to think...

So began my search. I had heard of a term "server-less architecture". Just that. So, I quickly googled it. Somehow, I came across Amazon Lambda which allowed you to create simple isolated functions which could be invoked through a variety of events. And, not only that but, also 1 million such invocations in a month costed you nothing. I acted swiftly and shared this with the client who was amazed to hear about it and approved of it.

But, all was not over yet. Although, Lambda was a key to completing this project but, I also had to deal with Stripe. I had done a few projects with Stripe before but, not a complete e-commerce solution backed by it. I revised Stripe concepts and was confident that I could make payments and create subscriptions. I just needed to send Stripe generated token to Lambda functions to process.

Here's a quick tip: don't try to reinvent the wheel. I googled Lambda with Stripe and voila! A developer name Yos Riady not only had a github repository but, also had a tutorial for it.

So far, I had discovered Amazon Lambda and tutorial by Yos Riady. Yos Riady suggested the use of server-less framework available on npm to interact with Lambda and save headaches of creating Lambda packages. He was right. It saved tons of working hours.

After following the tutorial and inspecting his repository code thoroughly, I was ready to start the project.

My initial idea was to store the products in a JSON file and fetch() them. After fetching, I will list the products and let the user add them to a cart. Once the user will finalize his/her cart, using Stripe elements, we will get their payment details. Once the details will be given, the Stripe generated token will be sent to Lambda function to process which will create a Stripe payment after validating the request. To tell which items the user ordered, my naive solution was to put those details in the description of the payment. Genius! Wasn't it?

With the initial approach, there were two problems:

The client will need to edit the JSON file each time he needs changes in the products.
The order items in description of the payment!

I had these problems in my mind but, continued anyway. Just about when I was going to write logic for putting the order items in the description of the payment, I realized not only it's stupid but, also useless. I needed some other way. Search mode on!

Believe me, out of nowhere, I came across Stripe Orders API. I could create Stripe Orders and pay for that order using the Stripe generated token. My initial guess was the order object would just let me add a bunch of items and store it. It was not the case! After carefully going through process of creation of Order through Stripe API, I discovered that I had to first register the store's catalog with Stripe then use the IDs generated for each one of them in the order create request. This lead to another discovery of the Products System in Stripe Dashboard. Stripe already gives you functionality of storing products and variations of those products in the form of SKUs. Guess what?! This also solved the problem #1.

Solving the problem #1 was not obvious. I still needed to do a bit of thinking. As the store at that stage was relying on a JSON file that I had created.

Regardless, I went to Stripe dashboard and added a few products along with SKUs. Stripe API lets you list these products. Considering it was a static website and we can't ask Stripe to list the products whenever the store was loaded, I created a node script that fetched the list of products from Stripe API and put it in the JSON file the application was relying on. I had to make some logic and code adjustments as the Stripe's object for list of products had a different structure than the JSON file I had created initially. It worked! I was more closer to signing off the project.

However, there was still a bit of issue. It was great that the client could now see orders made in a delightful way through Stripe dashboard and also, could manage the inventory from there. But, whenever, there will be a change to products, the client will need to run the node script to update JSON file from his environment. But, this turned out not be a big problem for the client as he was already running commands to manage his website's setup.

Still, I would like to propose a solution to the above mentioned problem. Stripe allows you to register Webhooks. The events occuring on your Stripe account can be captured and dealt with. So, utilizing this functionality, we could create a Lambda function that listened to any Product change event on Stripe and update the JSON file in the S3 bucket. I haven't done this myself yet but, I encourage you to do this an exercise if you're just starting out with Amazon S3, Stripe and Amazon Lambda.

Conclusion

So, to conclude:

Use Stripe Products section in dashboard to manage your inventory.
Sync the stripe products with a JSON file using a script and Stripe API.
Fetch the JSON file on load of your Store and render all of the products.
Allow users to add those products to a cart. From programming point of view, you'll need to store the IDs of the products / SKUs that the user selected in the cart.
Use Stripe Elements to collect user payment information and generate a Stripe token.
Import serverless framework from npm and setup using Yos Riady's Tutorial as a guide. This will include creating Amazon Lambda function in the language of your choice and also, importing any Stripe API's implementation of that language. I used JavaScript both for the static site and the Lambda function.
In your Lambda function, create Stripe order object and specify the items that the customer ordered. Then, you'll need to pay for the order you just created. The total price will be calculated by Stripe.
You may also want to turn on Customer Emails from Stripe dashboard to send receipts of purchases.

Using these 8 points as a guide, you can start your own ecommerce store. If I didn't mention who my client was in this project, let me do that now. It's an entertainment company in USA named ArrowTagOC. I thank Thomas Magsaysay supposedly, the owner of ArrowTagOC, for believing in me and helping make this challenging task possible. If you are around: Arrow Tag OC 3400 W. Warner Suite K Santa Ana, CA 92704, and want to do some fake archery, do visit them.

Now, cost calculations:
According to Amazon, static website on S3 costs as quoted below:
Typically, it will cost $1-3/month if you are outside the AWS Free Tier limits. If you qualify for AWS Free Tier and are within the limits, hosting your static website will cost around $0.50/month.

Amazon Lambda, for a small business, will cost nothing if you write your Lambda functions correctly. I believe as much as number of invocations matter so does the time taken during the execution of your code. Keep it under 100ms, as the minimum Billing time is 100ms. My node implementation did run under 100ms so, I guess yours can too.

We used serverless framework to setup Lambda package which utilizes some additional Amazon services like Amazon Cloudwatch, Amazon CloudFormation, Amazon S3 and Amazon CloudFront e.t.c. So, keep an eye over pricing of these services as I am not sure. So far, I don't see any billing of these services. And, considering you're about to run a small store, I don't think you'll hit billing limits.

So, in most cases, you'll only pay S3 static hosting costs to keep running your small static e-commerce store. In worst case, you pay more but, not more than 5$ if you stay smart.

Apart from above costs, Stripe will also take its cut which you can view at Stripe Pricing Page. But, it's totally worth it considering the number of problems that could be solved by their services.

If you read this far, don't forget to share. I would encourage you to suggest improvements and share your opinions. Thanks.

ReactJS and Laravel - Running through a basic setup - Part 2

Muhammad Talha Akbar — Fri, 27 Oct 2017 11:04:57 +0000

In this big article, we will use Laravel and ReactJS to setup authentication system. We'll use Auth scaffolding that comes with Laravel 5.5. Anyways, before we start running through the code, it'll be a good idea to divide our goal, the authentication system, into smaller parts:

Landing Page
Sign In Page
Create Account Page
Dashboard Page

With the idea above, we can be sure that we'll have four components: SignInPage, CreateAccountPage, LandingPage, DashboardPage. And let's say these components will be shown on /signin, /account/create, / and /dashboard URLs respectively. Considering this, we can quickly predict how our router components will look like:

<BrowserRouter>
    <div>
        <Route exact path="/" component={LandingPage} />
        <Route path="/signin" component={SignInPage} />
        <Route path="/account/create" component={CreateAccountPage} />
        <Route path="/dashboard" component={DashboardPage} />
    </div>
</BrowserRouter>

Before you ask, the <div> becomes necessary because <BrowserRouter> accepts only one child. Continuing, let's make the components:

const LandingPage = (props) => {
    return <div>Landing Page</div>;
};
const SignInPage = (props) => {
    return <div>Sign In Page</div>;
};
const CreateAccountPage = (props) => {
    return <div>Create Account Page</div>;
};
const DashboardPage = (props) => {
    return <div>Dashboard Page</div>;
};

We've kept them simple; so far. Also, notice all of the four components are stateless. It's my little thing that I always start off with stateless components and then if needed make them stateful. Unless, ofcourse, you know already that your component will have state. Anyways, we move on.

If you haven't guessed it so far, all of the code above will go into our /resources/assets/js/components/App.js file with a few adjustments, ofcourse. Let's see how App.js should look like so far:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import {
    BrowserRouter,
    Route
} from 'react-router-dom';

let LandingPage = (props) => {
    return <h1 className="mt-5">Landing Page</h1>;
};
let SignInPage = (props) => {
    return <h1 className="mt-5">Sign In Page</h1>;
};
let CreateAccountPage = (props) => {
    return <h1 className="mt-5">Create Account Page</h1>;
};
let DashboardPage = (props) => {
    return <h1 className="mt-5">Dashboard Page</h1>;
};

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

    render() {
        return (
        <BrowserRouter>
            <div>
                <Route exact path="/" component={LandingPage} />
                <Route path="/signin" component={SignInPage} />
                <Route path="/account/create" component={CreateAccountPage} />
                <Route path="/dashboard" component={DashboardPage} />
            </div>
        </BrowserRouter>
        );
    }
};

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

And yes, by principle, LandingPage, SignInPage, CreateAccountPage, DashboardPage should be in their own file and should be imported into App.js but, for simplicity, we keep it as is. Next, we can make a Header component that contains Link components. So, let's import Link from react-router-dom and declare Header as follows:

let Header = (props) => {
    return (
        <nav className="navbar navbar-expand-lg navbar-light bg-light">
            <div className="container px-2 px-sm-3">
                <Link className="navbar-brand" to="/">DEV.TO</Link>
                <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span className="navbar-toggler-icon"></span>
                </button>

                <div className="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul className="navbar-nav ml-auto">
                        <li className="nav-item">
                            <Link className="nav-link" to="/signin">Sign In</Link>
                        </li>
                        <li className="nav-item">
                            <Link className="btn btn-primary ml-lg-2 ml-sm-0 mt-2 mt-lg-0" to="/account/create">Create Account</Link>
                        </li>
                    </ul>
                    <ul className="navbar-nav ml-auto">
                        <li className="nav-item">
                            <Link className="btn btn-primary ml-lg-2 ml-sm-0 mt-2 mt-lg-0" to="/dashboard">Dashboard</Link>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    );
};

I have kept the Dashboard link in a separate <ul> because soon we will introduce a conditional if/else in the form of ternary operator in our Header. But, let's keep running!

I desperately want to skip to SignInPage component but, let's look at the App.js file so far:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import {
    BrowserRouter,
    Link,
    Route
} from 'react-router-dom';

let LandingPage = (props) => {
    return <h1 className="mt-5">Landing Page</h1>;
};
let SignInPage = (props) => {
    return <h1 className="mt-5">Sign In Page</h1>;
};
let CreateAccountPage = (props) => {
    return <h1 className="mt-5">Create Account Page</h1>;
};
let DashboardPage = (props) => {
    return <h1 className="mt-5">Dashboard Page</h1>;
};
let Header = (props) => {
    return (
        <nav className="navbar navbar-expand-lg navbar-light bg-light">
            <div className="container px-2 px-sm-3">
                <Link className="navbar-brand" to="/">DEV.TO</Link>
                <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span className="navbar-toggler-icon"></span>
                </button>

                <div className="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul className="navbar-nav ml-auto">
                        <li className="nav-item">
                            <Link className="nav-link" to="/signin">Sign In</Link>
                        </li>
                        <li className="nav-item">
                            <Link className="btn btn-primary ml-lg-2 ml-sm-0 mt-2 mt-lg-0" to="/account/create">Create Account</Link>
                        </li>
                    </ul>
                    <ul className="navbar-nav ml-auto">
                        <li className="nav-item">
                            <Link className="btn btn-primary ml-lg-2 ml-sm-0 mt-2 mt-lg-0" to="/dashboard">Dashboard</Link>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    );
};

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

    render() {
        return (
        <BrowserRouter>
            <div>
                <Header />
                <Route exact path="/" component={LandingPage} />
                <Route path="/signin" component={SignInPage} />
                <Route path="/account/create" component={CreateAccountPage} />
                <Route path="/dashboard" component={DashboardPage} />
            </div>
        </BrowserRouter>
        );
    }
};

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

Now, SignInPage is going to contain a form mainly. And, for the form management, we have included redux-form which depends on redux. Let's quickly setup both:

...

import { createStore, combineReducers } from 'redux'
import { reducer as formReducer } from 'redux-form'

...

const rootReducer = combineReducers({
  form: formReducer,
  // my other reducers come here
});


const store = createStore(rootReducer);

Now, we have a Redux store but to actually use this store with React components, we'll need to use Provider component that comes with react-redux package. It's quite simple (we just need to wrap our BrowserRouter with Provider and pass the store as a prop) so, let's just look at our App.js so far:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import {
    BrowserRouter,
    Link,
    Route
} from 'react-router-dom';

import { createStore, combineReducers } from 'redux'
import { reducer as formReducer } from 'redux-form'

import { Provider} from 'react-redux'

// Other components are here collapsed

const rootReducer = combineReducers({
  form: formReducer,
  // my other reducers come here
});

const store = createStore(rootReducer);

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

    render() {
        return (
        <Provider store={store}>
            <BrowserRouter>
                <div>
                    <Header />
                    <Route exact path="/" component={LandingPage} />
                    <Route path="/signin" component={SignInPage} />
                    <Route path="/account/create" component={CreateAccountPage} />
                    <Route path="/dashboard" component={DashboardPage} />
                </div>
            </BrowserRouter>
        </Provider>
        );
    }
};

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

Now, let's modify the SignInPage component:

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

        this.processSubmit = this.processSubmit.bind(this);
    }

    componentWillMount() {
        // do something like setting default state
    }

    processSubmit(values) {
        // do something with the values
    }

    render() {
        const { handleSubmit, submitting } = this.props;

        return (
            <div className="container mt-5">
                <div className="row justify-content-center">
                    <div className="col-6">
                        <div className="card">
                            <div className="card-body">
                            <h2 className="text-center font-weight-light mb-4">Sign into your account</h2>
                                <form onSubmit={handleSubmit(this.processSubmit)}>
                                    <Field
                                        label="Email Address"
                                        name="email"
                                        component={FormField}
                                        id="email"
                                        type="text"
                                        className="form-control"
                                    />
                                    <Field label="Password" name="password" component={FormField} id="password" type="password" className="form-control" />
                                    <div className="form-check">
                                        <label className="form-check-label">
                                            <Field name="remember" component="input" type="checkbox" className="form-check-input mt-2" value="1" />
                                            Remember me
                                        </label>
                                    </div>
                                    <div className="form-group mt-4">
                                        <button type="submit" className="btn btn-secondary" disabled={submitting}>Continue</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
};

SignInPage = reduxForm({
    form: 'signin',
    validate
})(SignInPage);

There a few things here to digest before we move on:

SignInPage component is no longer a pathetic dumb component that just renders the other components and pass props.
The reduxForm decorator and Field component has been imported from redux-form package so, our import declaration for redux-form now looks like this:

import {
    reducer as formReducer,
    reduxForm,
    Field
} from 'redux-form'

Notice the Field takes a component as a prop. Any component that you specify will be rendered inside Field. The inner component that we specify gets some nice props that can be used to make the inputs interactive. Here's how I have written a basic FormField component:

const FormField = ({
        label,
        input,
        type,
        name,
        className,
        meta: { touched, error, warning }
}) => (
    <div className="form-group">
        {
            label &&
            <label htmlFor={name}>{label}</label>
        }
        <input {...input } name={name} type={type} className={
            `${className} ${
                touched && (
                    (error && 'is-invalid')
                )
            }`
        } />
        {
            touched &&
                (error && <span className="invalid-feedback">{error}</span>)
        }
    </div>
);

Look at this line carefully in the new SignInPage component:

const { handleSubmit, submitting } = this.props;

The handleSubmit and submitting props come from the decorated SignInPage component . handleSubmit takes a callback with values being passed as its first parameter. submitting is just a boolean that tells if the form is in submitting state which is helpful in disabling the submit button to prevent multiple requests when the one is being processed.

Also, notice validate property in the following lines:

SignInPage = reduxForm({
    form: 'signin',
    validate: validatorSignInForm,
})(SignInPage);

The validate property must hold a function that returns error messages for fields. I'll be using a simple JavaScript based validation library validate.js to implement validatorSignInForm which you can install with npm install --save validate.js. The validator function looks like below:

const validatorSignInForm = (values) => {
    const result = validate(values, {
        email: {
            presence: {
                message: '^Please enter your email address.'
            },
            email: {
                message: '^Please enter a valid email address.'
            }
        },
        password: {
            presence: {
                message: '^Please enter your password.'
            }
        }
    });

    return result;
};

You should know that validate() comes from validate.js library so, for now you just need to know that it takes values as its first argument and rules for each value in nicely formed object as its second argument.

Now, that's a lot of code that we have looked over so far but, you'll see that once you have gone through and understood it, you'll encounter no problem creating interactive forms for your application.

Now, let's put the updated SignInPage component along with the code we've written in App.js so far and see how it looks like now:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import {
    BrowserRouter,
    Link,
    Route
} from 'react-router-dom';

import { createStore, combineReducers } from 'redux'
import {
    reducer as formReducer,
    reduxForm,
    Field
} from 'redux-form'

import { Provider} from 'react-redux'

// Other components are here collapsed

const validatorSignInForm = (values) => {
    const result = validate(values, {
        email: {
            presence: {
                message: '^Please enter your email address.'
            },
            email: {
                message: '^Please enter a valid email address.'
            }
        },
        password: {
            presence: {
                message: '^Please enter your password.'
            }
        }
    });

    return result;
};

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

        this.processSubmit = this.processSubmit.bind(this);
    }

    componentWillMount() {
        // do something like setting default state
    }

    processSubmit(values) {
        // do something with the values
    }

    render() {
        const { handleSubmit, submitting } = this.props;

        return (
            <div className="container mt-5">
                <div className="row justify-content-center">
                    <div className="col-6">
                        <div className="card">
                            <div className="card-body">
                            <h2 className="text-center font-weight-light mb-4">Sign into your account</h2>
                                <form onSubmit={handleSubmit(this.processSubmit)}>
                                    <Field
                                        label="Email Address"
                                        name="email"
                                        component={FormField}
                                        id="email"
                                        type="text"
                                        className="form-control"
                                    />
                                    <Field label="Password" name="password" component={FormField} id="password" type="password" className="form-control" />
                                    <div className="form-check">
                                        <label className="form-check-label">
                                            <Field name="remember" component="input" type="checkbox" className="form-check-input mt-2" value="1" />
                                            Remember me
                                        </label>
                                    </div>
                                    <div className="form-group mt-4">
                                        <button type="submit" className="btn btn-secondary" disabled={submitting}>Continue</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
};

SignInPage = reduxForm({
    form: 'signin',
    validate: validatorSignInForm
})(SignInPage);

const rootReducer = combineReducers({
  form: formReducer,
  // my other reducers come here
});

const store = createStore(rootReducer);

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

    render() {
        return (
        <Provider store={store}>
            <BrowserRouter>
                <div>
                    <Header />
                    <Route exact path="/" component={LandingPage} />
                    <Route path="/signin" component={SignInPage} />
                    <Route path="/account/create" component={CreateAccountPage} />
                    <Route path="/dashboard" component={DashboardPage} />
                </div>
            </BrowserRouter>
        </Provider>
        );
    }
};

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

Break - Breath a little

So far, we have looked at a lot of code. You must be overwhelmed. Take a break. Inhale air. And be back where we start looking at processing the sign in form.

So, have you noticed that I had left processSubmit method of SignInPage component empty? Our goal will now be to look at how we will implement it. A break-down of its implementation will be:

Send an AJAX request to the login route with the values
Wait for the response
Do something upon the request results

Now, for sending AJAX requests, we will use axios - a promise based AJAX library. Don't worry, it's already installed. You can start using it like below:

processSubmit(values) {
    axios
    .post('/ajax/login', values)
    .then( (response) => {
        console.log(response.data);
    })
    .error( (err) => {
        console.log(err);
    });
}

A few things to setup before you can see the request completing successfully:

You need to put Auth::routes(); in ajax Route group that we created in Part 1 in /routes/web.php.
You need to make sure that you have <meta> tag in your web.blade.php that contains the CSRF token otherwise, Laravel will throw TokenMismatchException instead of processing the login request. So make sure something like below is there:

<meta name="csrf-token" content="{{ csrf_token() }}">

By default, AuthenticatesUsers trait in LoginController has a method sendLoginResponse that is implemented to redirect. The problem is that we don't want to redirect instead, we want to return user details. So, copy the following lines of code and paste them as methods of LoginController which resides in /app/Http/Controllers/Auth/LoginController.php:

/**
 * Send the response after the user was authenticated.
 *
 * @param  \Illuminate\Http\Request  $request
 * @return \Illuminate\Http\Response
 */
protected function sendLoginResponse(Request $request)
{
    $request->session()->regenerate();

    $this->clearLoginAttempts($request);

    $user = $this->guard()->user();

    if($this->authenticated($request, $user)) {
        return response()->json([
            'success' => true,
            'user' => $user
        ], 200);
    }
}

/**
 * The user has been authenticated.
 *
 * @param  \Illuminate\Http\Request  $request
 * @param  mixed  $user
 * @return mixed
 */
protected function authenticated(Request $request, $user)
{
    return true;
}

Similarly, the AuthenticatesUsers trait has sendFailedLoginResponse which also needs to be overridden. So, copy the below lines into LoginController:

/**
 * Get the failed login response instance.
 *
 * @param  \Illuminate\Http\Request  $request
 * @return \Symfony\Component\HttpFoundation\Response
 */
protected function sendFailedLoginResponse(Request $request)
{
    return response()->json([
        'success' => false,
        'message' => trans('auth.failed')
    ], 422);
}

Now, if you test by submitting the form, you'll be able to receive the JSON responses. Or it doesn't? Let me know.

To be continued in Part 3. In Part 3, will continue with processSubmit for the SignInPage component. And, we will also look at how we can manage the user details using redux, prevent routes from being accessed in guest mode and much more.

The reason I have to split this into part 3 is because the dev.to post editor has become slow due to large amount of content in it and it's annoying!

ReactJS and Laravel - Running through a basic setup - Part 1

Muhammad Talha Akbar — Thu, 26 Oct 2017 17:13:00 +0000

Type the following command in your newly created Laravel 5.5 project:

php artisan preset react

Done with it? See your package.json updated? Great, don't close it! We have some work to do there. In your devDependencies; add the following:

"bootstrap": "^4.0.0-beta",
"popper.js": "^1.12.6",
"react-redux": "^5.0.6",
"react-router-dom": "^4.2.2",
"reactstrap": "^5.0.0-alpha.3",
"redux": "^3.7.2",
"redux-form": "^7.1.1"

Once you're done with the above, notice I have added Bootstrap 4 Beta package there? Yup, keep it. With that said, remove the bootstrap-sass and jquery declaration from devDependencies:

"bootstrap-sass": "^3.3.7",
...
"jquery": "^3.1.1",

Now, once you have done the above. Quickly fire up your terminal and issue the following command:

npm install

Hope you don't have network issues. If you were lucky enough to get the packages installed, move to /resources/assets/sass directory. Open variables.scss file in an editor of your choice and get rid of all the content in it. Next, open app.scss from the same sass directory and change it to:

// Variables
@import "variables";

// Bootstrap
@import "~bootstrap/scss/bootstrap";

Now, you have everything setup for Bootstrap 4 at the CSS side.

Move to /resources/assets/js/ directory and open bootstrap.js for editing. Once you have that file opened, rush to remove the following lines:

/**
 * We'll load jQuery and the Bootstrap jQuery plugin which provides support
 * for JavaScript based Bootstrap features such as modals and tabs. This
 * code may be modified to fit the specific needs of your application.
 */

try {
    window.$ = window.jQuery = require('jquery');

    require('bootstrap-sass');
} catch (e) {}

Also, open app.js file (next to bootstrap.js) which actually, is configured to be the entry point for your JS code. Once you have it opened, see:

require('./components/Example');

In this line, just replace /Example with /App. That's better. Don't worry; just follow the next steps and you will know why I did it (or, you are clever enough to already guess it.)

Laravel comes with Example components which are useful to check quickly if everything is setup correctly according to your chosen preset. Look into components directory, you'll see 2 files: ExampleComponent.vue and Example.js. Delete ExampleComponent.vue file because we don't need it. Then rename Example.js to App.js and keep yourself ready to type some ES6 along with JSX. If you notice, we replaced /Example with /App in app.js because we were about to rename Example.js to App.js in the components directory.

At this point, you can wipe everything off from App.js in your components directory or keep the example code. If you decide to do the latter, I would suggest a few basic changes.

Rename the component class name from Example to App and change the following lines:

if (document.getElementById('example')) {
    ReactDOM.render(<Example />, document.getElementById('example'));
}

with the lines:

if (document.getElementById('app')) {
    ReactDOM.render(<App />, document.getElementById('app'));
}

Moving on; quickly open web.php file which resides in /routes directory relative to your Laravel project. Remove the only route you see and replace it with:

Route::group(['prefix' => 'ajax'], function() {
    // all routes that don't need to go to react-router
});

Route::get('/{path?}', function () {
    return view('web');
});

Notice that we have a special route group that matches only those routes that have a prefix ajax/ to their URL. This route group will help us have such a react-router setup that can render appropriate components without using #-based URLs. However, the route declaration outside of AJAX route group matches every URL no matter what it is and return web view in response.

Next, move to /resources/views directory and rename welcome.blade.php and change it to web.blade.php or whatever you prefer. Just make sure the view name matches with the one we specified in the routes/web.php. (I'll assume you renamed it to web.blade.php)

Open web.blade.php and replace its contents with something like Bootstrap 4 HTML Starter Content. Whatever you do, make sure of the following three things:

There is a <link> tag referring to /app.css file.
There is a <script> tag with its src set to /app.js file.
There is a <div> in the <body> tag with an id app.

At this point, if you run the following command:

npm run dev

And wait for its completion. Then, run the PHP's little server through the following artisan command:

php artisan serve --port=80

You'll now be able to navigate to http://127.0.0.1 and see everything in action. (I'm assuming you didn't touch the example code in the Example component).

After all of the fuss, you will be able to write React components with:

React Router
Redux
Redux Forms
Reactstrap

This concludes Part 1 of our ReactJS and Laravel - Running through a basic setup. Considering the response on the part 1, I'll be making a part 2 in which I will be setting up Authentication System with the same setup in Laravel and React.

Do notice the npm packages above were chosen after significant time spending so, keep them and check out their getting started guides to prevent yourself from headaches.