MuleSoft: Hello World

We will be installing NodeJS, VUE, and MuleSoft.

GIT: https://github.com/timkscripts/MuleSoft

https://www.npmjs.com/get-npm

https://nodejs.org/en/

Open Command prompt

  1. Click start menu
  2. Search for ‘command prompt’
  3. Open it.

Verify you have node and NPM installed by typing ‘node –v’ and ‘npm –v’

Update to the latest NPM packages.

Installation of VUE by typing ‘npm install vue’

ErrorC:\Users\Babylon>npm install vue

npm ERR! code ENOTFOUND

npm ERR! errno ENOTFOUND

npm ERR! network request to https://registry.npmjs.org/vue failed, reason: getad

drinfo ENOTFOUND registry.npmjs.org registry.npmjs.org:443

npm ERR! network This is a problem related to network connectivity.

npm ERR! network In most cases you are behind a proxy or have bad network settin

gs.

npm ERR! network

npm ERR! network If you are behind a proxy, please make sure that the

npm ERR! network ‘proxy’ config is set properly.  See: ‘npm help config’

npm ERR! A complete log of this run can be found in:

npm ERR!     C:\Users\Babylon\AppData\Roaming\npm-cache\_logs\2019-05-07T02_45_2

2_922Z-debug.log

Error log points to:

If only there was a tool out there to search every site for solutions to this error mes-
https://stackoverflow.com/questions/48439439/npm-err-request-to-https-registry-npmjs-org-node-modules-failed-reason-erro

Onward, run command prompt as admin:

Run ‘cache clean –f’
Run ‘npm install vue’

Neat.

Actually also need the VUE CLI installed:

Run ‘npm install –g @vue/cli’

Almost there, the command prompt is angry with us:

Due to having an older verison on this machine before I started I used the MSI install to ‘uinstall’ and ‘re-install’ Now on proper version.

NodeJS, NPM and Vue are installed now what? Let’s do stuff.

https://cli.vuejs.org/guide/creating-a-project.html#vue-create

vue create hello-world

After installation localhost:8000 didn’t come back to me. Perhaps Node wasn’t running?
However I figured try ‘vue ui’ to see if it does some heavy lifting for me.

We are going to pause here and set up our Mule soft next. I tried to make trial accounts for TIBCO and Dell Boomi but none would let me without using an enterprise email. Mulesoft however let me use my normal gmail.

I won’t be adding screenshots on how to register for a free trial on Mulesoft.

Under a new Canvas we are going to add an HTTP Request.

When selected, we have some tabs for configurations. All we really need to do for this demo is choose a path for our URL call. I will choose HelloWorld

Since I don’t have any local databases or other fancy setups to point to we will just create a Payload. Click the + sign and search for ‘payload’

We add a value for it to return. In this case, the string “Hello World!”.
Make sure it auto-saved and then click Run.

We can navigate to the URL and hopefully see our result.

Now we will move back to VUE.
First, we have a nodeJS server running locally, but the MuleSoft workflow is hosted on their servers. We will set up a proxy / proxy table within our app/config/index.js:

Our VUE has some Data. In this case it is responseHello where we will store our response. When we do a GET on the local /HelloWorld it will actually perform a cross-site proxy to the MuleSoft server. Getting rid of CORS errors.

So we do a basic GET for some data, and store it.

On the index.html page we have within our APP a spot where we display that information.

This concludes our VUE front end, NODEJS backend, calling MuleSoft webservice through HTTP GET to return some data.


Leave a Reply

Your email address will not be published. Required fields are marked *