We will be installing NodeJS, VUE, and MuleSoft.
GIT: https://github.com/timkscripts/MuleSoft
Open Command prompt
- Click start menu
- Search for ‘command prompt’
- 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.