Creating a Search app with Vue.js + Parcel + TypeScript: Part 1 of 3

In my previous article here I showed how to "watch" an AWS S3 bucket for changes and update our search index real-time. Now lets write an app to show our search results using: vue.js, parcel, typescript and sass

Part 1: App setup

In this part, I'll show how we can quickly get our app set up thanks mostly in part to parcel.js: https://parceljs.org/

Prerequisite: Install Node.js: https://nodejs.org/en/

What we'll install:

• parcel - our "zero configuration" bundler
• vue.js - our ui framework
• typescript - our coding language we'll use here
• sass - our styling language

Let's get ready to rock.

Step 1. Create a local directory to put your project (I'll assume you know how).

Step 2. Install Parcel

• open a terminal/command prompt and cd to your new directory
• paste or type the following: npm install -g parcel-bundler

Step 3. Setup dependencies. Create a package.json file in your new folder. This defines all of our dependencies. Parcel can attempt to do this for you (though it didn't quite work for me). Instead here is the file you need. Just copy the contents into your new package.json:

Step 4. Install dependencies. Run the command: npm install

Step 5. Add entry point.

• 5.1 Add index.html file as below
  • div id="app" is the "main" element (top level component of the component hierarchy)
  • script tag references our main.ts which sets up our Vue app as we will see

• 5.2 Add main.ts file (this will reference our div id="app" element). This initializes Vue.

• 5.3 Add App.vue file. ".vue" files are called "single file components" where we can put the html, javascript, and css all in one file. I prefer separating concerns so I'll show an alternative approach.

As we see above, we're importing our typescript from a separate file. This has some advantages on larger components:

• If I need to change the javascript code, I don't have to scroll through the html
• In regards to "clean code" this feels cleaner to me keeping html, javascript and styling in separate files.

For smaller components, doing it all inline seems perfectly acceptable. Again, it's really just a matter of preference.

• 5.4 Add our typescript file: app-class.ts (app.ts and App.vue seem to collide in the bundler so I name the ts files [component]-class.ts to avoid collision)

As you probably noticed, I'm using "vue-property-decorator" which allows annotation of our class properties. This will come in handy later.

Step 6. Run it! Run the command: parcel index.html

Done! Open your browser at: http://localhost:1234/

If it didn't work for some reason you can clone the full project here: https://github.com/scottlepp/search-vue-parcel-typescript

In Part 2 we'll layout our app and add a popular css framework: bootstrap. Bootstrap will make our app look professional and responsive.