Development

Add a New Page to ReactGo

Adding a new page to your reactGo project can be a lengthy process.  I’m hoping to write a yeoman generator to do this for me in the near future but for now…  Here are the steps.

Steps:

  1. Add a new route to your app >routes.js
    Add Something like: <Route path="routeName" component={page} onEnter={requireAuth} fetchData{[fetchItemData, fetchCartData]} />
    to the Route section.
    Add the necessary supporting imports.
  2. Add a new entry to the navigation.
  3. Create a new page in the pages folder.
    Duplicate existing page, then open.  Update references to new component name.
  4. Add reference to app > pages > index.js
    export { default as ContianerName } from 'pages/ContainerName';
  5. Create a new data fetcher (if necessary)
    Duplicate existing and update path to get data from server and action type to dispatch.
  6. Update the app > fetch-data > index.js with the new reference.
    export { default as fetchMyData } from './fetchMyData';
  7. If a new data set is needed follow these steps: Add a New Dataset to the Store
  8. Create a new Container
    Duplicate an existing component then design and build your page.
  9. After your pages design is complete componentatize what you should.

Questions for yeoman generator:

  • Provide Route name: String
  • Provide page/component name: String
  • Does the page already exist? Boolean
  • If No => Provide Page Description: String
  • Would you like to generate a new CSS Module for the page? Boolean
  • Auth required? Boolean
  • Does it need to fetch any data? Boolean
    • If yes => How many? Number
    • For count:
      • Provide Data Fetcher name: String
      • Does it already exist? Boolean
      • If No => Does dataset exist?

Dockerizing ReactGo

First up you’ll need to be able to successfully run a build for your current ReactGo app.  I assume you have docker installed.

npm run build

Once you’ve got a successful build on your hands go ahead and create your dockerfile.  Example one below:

You can use a later version of Node if you like I built and tested my on v6.10.

docker build -t <image_name> .

NOTE: DO NOT FORGET THE PERIOD AT THE END (that caused me a serious headache one day…)

While that is building lets launch a mongo container to run our database (we’ll link to it later).  I assume you’ve already pulled mongo from the docker hub: docker pull mongo

docker run -d --name <db_container_name> mongo

Now let test our container locally… I’m going to bind our exposed 80 port to port 80 on localhost to demonstrate how it’s done.  This same principal applies when launching a container out in a production docker environment.

docker run -d -p 127.0.0.1:80:80 -it --link <db_container_name>:mongo --name <app_container> <image_name>

NOTE: notice the MONGODB_URI ENV variable we set in the docker file.  Take special note of underlined part that follows: the mongodb://mongo/MyAppCollection.  This MUST match the link name you give in your run command (e.g. <db_container_name>:mongo).

Check your local host on port 80 and you should see your app.  If not check the logs by using the docker logs <container_ID> command.  Container IDs can be found with docker ps -a command.

After you’ve successfully tested your container you’re ready to push the image to your registry.  You can use docker hub but I’m using Bluemix, since it’s private and I get it for free ;).  After you login to your registry tag your image for release:

Bluemixers need your name space? try bx ic namespace-get

docker tag <image_name> registry.ng.bluemix.net/<name_space>/<app_name>:<version_tag>

The version tag is optional but recommended.  It will default to latest otherwise. Then push it (push it real good)

docker push registry.ng.bluemix.net/<name_space>/<app_name>:<version_tag>

Then wait… forever…

If your on Bluemix you’ll probably want to push up a mongo container as well. (remember to start one up so we can link to it like we did on local host)

For those of you who are not using Bluemix substitute the bx ic commands below for your registry (should be just docker for most of the world)

bx ic cpi mongo registry.ng.bluemix.net/<name_space>/mongo

From there I usually create a dummy container with the Bluemix GUI (website) so I can provision a public IP through Bluemix which I can then reuse when I launch a container with this command.  There is probably a way to provision an IP through CLI but I’m too lazy to look it up.

bx ic run -d -p <my_public_ip>:80:3000 -it --link <db_container_name>:mongo --name <app_container_name> <name_space>/<image_name_or_id>

 

React, Emmet, ESLint, Babel Packages

First make sure you have the following packages added to your project:

npm install --save-dev babel-eslint eslint eslint-config-airbnb eslint-plugin-react eslint-plugin-jsx-a11y eslint-plugin-import mocha

On a fresh instal of Sublime text install the following with package control.

  • Babel
  • Emmet
  • SublimeLinter
  • SublimeLinter-contrib-eslint

After installation restart Sublime.  Now your files will have linting on them so you can see how nasty your code is. ;)

Sample .eslintrc for refference

 

ReactGo – Steps to add a new data set to the store.

I’m documenting this because I want to make sure I catch everything for the eventual yeoman generator I intend to build….

Using my Material-UI modded version of ReactGo boilerplate (commit d5f71395f8eca8a0d9a1be162bbd20674d7cdcdd, Feb 16, 2017)

In order to support multiple datasets being loaded into one page from the router I’ve modded the current base to suit my needs summary of changes are on my version of the repo.  These changes were based on the work of @k1tzu & @StefanWerW

Right now I’ve got it down to a 12 step process… (whew!) lets get into it…

Continue reading…

motoChecker v3

Well, v3 is done and tested added support for stored validations.

This version has more Dewbacks so you know it’s better!

Git Hub repo is the same as before

Matt suggested I change the name to motoChecker. Since my last name is Motacek. I like it. DONE!

I’ve spent all day on documentation for it and I’m bored with writing now. I’ve learned a few things, though…

Content revised… my hate for SharePoint faded after I asked someone smarter than me to teach me how to use the damn thing.

It’s ok now.

MotoValidation 2.0

V2.1 is out!

It’s been a while since I’ve posted something on my blog but it’s also been a while since I was working on something that I felt worth sharing.

I’m proud to present motoValidation v2 a big improvement to my original creation.  The goal of this script is to limit the amount of code that a developer must write in order to accomplish common validation use cases in IBM BPM platform.  This script is currently targeted for Heritage coaches only… I’m not sure if I like client side coaches yet… I’m sure they’ll grow on me but they need some serious stuff before I’ll consider them usable.

With motoValidation we make some assumptions:

  • The most common type of validation is a required field
  • The target for your validation is the same as the binding
  • We should not make developers provide redundant information over and over (if I have to type tw.whatever.thing.thing.thing one more time I’m gonna snap…)
  • Validation should require as little code as possible

Get it from Git

Continue reading…

Discoverable JSON based RESTful Services (DJRS)

For any developer who has ever worked with SOAP you know about WSDLs. These standardized files could provide information to an application or and IDE which the developer could then use to easily select an action to do. In the era of declining SOAP usage and the rise of the RESTful APIs it’s time to start thinking about how to make REST even easier to consume than it already is. Easier than easy… yes, easy peasie lemon squeezy.

I won’t lie my first experience with SOAP was a nightmare and even worse I was doing it with PHP and a toolkit that was clearly developed by someone who didn’t want anyone to use php to use their service. So my first experiences were bitter to say the least. But as I worked on other project I foudn other developers using other platforms/frameworks (like .NET) who spoke highly of their experience with SOAP. So that made me ask the question, “What was I missing out on?” The truth was a lot actually. When I saw how easy it was to consume a SOAP service in .NET it seemed to good to be true. But with SOAPs decline in favor of RESTful services the shift went back to something I was ultimately more comfortable with given my experience with SOAP.

So now to the meat and potatoes. What we needs is a good tool that make creating an API easy. BUT WAIT JOE MY COMPANY ALREADY PURCHASED AN ESB AND I HAVE TO USE IT. Well that sucks for you because the big thing that most ESBs I’ve used fail on is providing clear documentation on how to use the service and if it’s JSON based there’s no file generated for a developer IDE to consume. And that’s what we need, an application that allows developers to connect to any data store, provides an easy and intuitive method on configure what should be exposed, what should be auto set, what needs to be validated as well as set up authentication for you and auto-generate documentation and a consumable description of the service that an IDE can use to make connecting to the API easy. We need Deejers (DJRS).

Swagger has already done most of the hard work for this and I think we just need to take it to the next level.

So that’s the goal and I’m starting to build it now and since I’m currently obsessed with Meteor I’m going to use it to build it. Check if anyone has done that yet… NOPE.

Goals:

  • Self Documenting (Swagger)
  • Built in analytics tools
  • User Access Management
  • Easy to Understand UI (For API management)
  • Auto Generated SDKs for languages (Swagger format has consumable client libraries for most languages)
  • Back-end should connect directly to Data-store
    • Should support major data store formats
  • Deployment on on Cloud Foundry will be easy
  • Caching – with query time cache conditions and customization cache times for each end point
  • Support major security formats (Basic, OAuth, JWT ect…)
  • Availability to increase number of running nodes to scale up in high demand situations
  • User can configure the application for any table available:
    • Auto Generate field on condition
    • Designate Required Fields
    • Data Type
    • Schema (Global and per table)

Steps:

  1. Build app that connects and has CRUD access to most common DB formats
  2. Auto-generate basic yaml based on connected datastores
  3. Provide swagger-like endpoint manager to define options
  4. Generate YAML or standard Swagger Config file for Service
  5. … more… but let’s start with that.

JSON Object for 196 Countries with 2 Character Country Code in Name Value Format

I just got done with this… IT TOOK FOREVER! Save your self the pain and copy if you need it.

196 Countries in Country Name and ISO “-2 Code Country Code format. The JSON object is in name value pair format for easy consumption.

Please leave a comment is I misspelled something or if I need to add another country!

Did all the counties from here: http://www.nationsonline.org/oneworld/country_code_list.htm that weren’t in italics.

Continue reading…

MSNR Step 2 – Getting Ready for Development

This isn’t really a step in the MSNR process but more notes for myself in the future so when I build another server I know what to do and not have to do everything over again from scratch.

Well your not gonna stand in front of your server all day while you code are you?  Well I’m not (not that dedicated).  Today I want to cover the basics of getting openSSH installed, configured and connecting to your files over SFTP.

I’m on windows so it was actually a bit of an ordeal the first time.

  1. If you don’t have it go download Putty.
  2. Next, generate an SSH Key:
    • Open the PuTTYgen program.
    • For Type of key to generate, select SSH-2 RSA.
    • Click the Generate button.
    • Move your mouse in the area below the progress bar. When the progress bar is full, PuTTYgen generates your key pair.
    • Type a passphrase in the Key passphrase field.
    • Type the same passphrase in the Confirm passphrase field. You can use a key without a passphrase, but this is not recommended.
    • Save your private key.
    • Select your public key and paste it into a new text file
      • You can use the saved one on openSSH Putty will format it wrong
  3. Now that you got your keys comes the fun part get the public key on your server.
    • Copy your text file with the pasted key on to a jump drive.
    • Plug that into your server
    • Once you plug it in you’ll notice that Ubuntu recognized it and probably set it to something like [sda]
    • Now for the commands

Now you should be able to create your connection to your server.  Open up Putty type in the IP of your server then go to the Connection >> SSH >> Auth and put the location of your Private key that you saved earlier in the “Private key file for authentication:” field.

There you are SSH done.  Finally to connect to your folder via SFTP (I use Filezilla).  First load your private key file into Filezilla and open up Edit >> Settings.  Now go to the SFTP section and add your private key file again.  If you used a passphrase you’ll have to enter it in and save another version of your keyfile with out a passphrase.  Add the keyfile and create your new connection.  Use your username and the IP and you should be good to go.

Happy coding.