Friday, February 22, 2019

Published 10:47 PM by with 0 comment

Tutorial: Writing a Vue App from Start to Deployment

I didn't see any nice tutorials from start to finish on writing and deploying a Vue app, so I wrote down all the steps with a sample project. The sample project uses Vuetify as the Vue framework and plotly as the plotting framework. To get started, here is the finished product.



Intro

This tutorial assumes that you have an IDE and npm and that you have basic JavaScript knowledge. You should also look through the Vue guide. If you don't know what IDE to use, I used Visual Studio Code for this and it's pretty great.


Installing Vue CLI 3 and getting a project

Run the following command:

npm install -g @vue/cli

Next run:

vue create vue-test

Pick the defaults. This should have created a project with a bunch of files for you. Now switch your environment/workspace/folder/whatever it's called in your IDE to that path of the project you created. you should see something like this:



Adding Vuetify

Run the following command:

vue add vuetify

Choose default. Open the 'main.js' file in your project (src/main.js). Add this under the import App from './App.vue' line:

import Vuetify from 'vuetify'

Vue.use(Vuetify);

import 'vuetify/dist/vuetify.min.css'

Your can now use Vuetify.


Adding plotly

Run the following command:

npm install --save plotly.js

Open the 'HelloWorld.vue' file in your project (src/components/HelloWorld.vue). Change the name to 'PlotlyGraph.vue'. Replace the contents of the file with this code. For reference on how this plotly implementation works, see this tutorial I wrote a while back. This is just an extension of that.


Adding BigEval

If you clicked the example at the start, you might have noticed a 'custom' button. Clicking that lets you type in an equation for it to plot. To interpret that equation, you can use BigEval

Run the following command:

npm install bigeval

That's it.


Writing the page

I won't paste the entirety of the page here because you can simply open the code and look at it. I will walk through how a few key pieces work to give some insight. To run the app, use the following command:

npm run serve

Here is the code for the page.

Using plotly in vue

The plotlygraph component above exposes 'propData', 'divId', 'height', and 'width' as props. 'propData' is for all information that gets passed into methods like Plotly.newPlot. 'divId' is the id of the div the component creates, and is primarily used to identify the source of events that reach the caller. 'height' and 'width' let you control the size of the plot in the div containing the component. 

'propData' has three members:
  • data: array of trace objects
  • layout: object with layout information
  • config: object with plotly config info
This example builds up this object, then sets it at the end of a single method called 'updatePlot'.

The app also listens to the plot's 'afterplot' event. That is triggered whenever the plot updates, and the app logs the time that it fires below the plot.

Triggering plot updates

Vue watches are used to update the plot when things happen and they are registered in 'mounted'. There are three inputs that have watches on them:
  • selectedFunction: which function you selected to plot
  • A: value of A
  • B: value of B
Watches will simply execute the method attached to them ('updatePlot' in this case) whenever the variable being watched changes. I did not add a watch for the equation...I'm using @change to trigger it so that there are examples of calling 'updatePlot' through both mechanisms.

Interpreting the equation

The equation that's typed in is a string. The code converts that string into something BigEval can understand using the following replacements:
  • y, =, and spaces are converted to nothing
  • x is replaced by the current value of the iterator
  • A is replaced by the value in A's input
  • B is replaced by the value in B's input
Thus, something like y = A*x + B*sin(x) becomes 4*2 + 3*0.0349 for A = 4, B = 3, and i = 2.

You'll notice that the equation has some validation attached to it. I used two crude rules for that:
  • equation string can not be empty
  • when x = -1, equation string can not result in NaN or ERROR; this is not robust but works well enough for a quick example
The code uses the 'rules' prop to call the 'validEquation' method to perform this validation. This comes from Vuetify.

Building and deploying the app

Once everything is implemented, build and deploy is refreshingly easy. Simply run the following command:

npm run build

After this finishes, it will create a 'dist' folder under your directory. This is all you need. It contains an index.html file and all of the necessary dependencies. Simply move those to your host, and the page is live. You will need to update the href values in index.html to match whatever hierarchy you have for your files, but that's it.

For hosting, there are many options. I have a hostgator account for another site (http://blog.cityprojections.com/) so I just used it. I've used https://www.000webhost.com/ in the past and they were fine. Just google it and pick one you like.


Conclusion

This does not cover everything in Vue obviously, but it does show:
  • setting up a project
  • using many basic features in vue (events, watches, binding, v-for, using a framework)
  • pulling in external packages
  • building a project
Some big pieces that you should read up on that aren't included here are:

Hopefully this helps with getting started on something larger than a typical example.





      edit

0 comments:

Post a Comment