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:
| { | |
| "name": "parcel", | |
| "version": "1.0.0", | |
| "description": "test", | |
| "main": "index.ts", | |
| "author": "scott", | |
| "license": "MIT", | |
| "devDependencies": { | |
| "@vue/component-compiler-utils": "^2.0.0", | |
| "babel-cli": "^6.26.0", | |
| "babel-preset-env": "^1.7.0", | |
| "node-sass": "^4.9.0", | |
| "parcel-bundler": "^1.9.1", | |
| "posthtml": "^0.11.3", | |
| "tslint": "^5.10.0", | |
| "typescript": "^2.9.2", | |
| "vue-hot-reload-api": "^2.3.0", | |
| "vue-property-decorator": "^6.1.0", | |
| "vue-template-compiler": "^2.5.16" | |
| }, | |
| "dependencies": { | |
| "vue": "^2.5.16" | |
| } | |
| } |
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
-
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <title>Document</title> | |
| </head> | |
| <body> | |
| <div id="app"></div> | |
| <script src="./src/main.ts"></script> | |
| </body> | |
| </html> |
- 5.2 Add main.ts file (this will reference our
div id="app"element). This initializes Vue.
| import Vue from 'vue'; | |
| import App from './app.vue'; | |
| new Vue({ | |
| el: '#app', | |
| render: h => h(App) | |
| }); |
- 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.
| <template> | |
| <div id="app"> | |
| <header>foo</header> | |
| <div>{{ bar }}</div> | |
| </div> | |
| </template> | |
| <script lang="ts"> | |
| import App from './app-class'; | |
| export default App; | |
| </script> | |
| <style lang="scss"> | |
| #app { | |
| color: #56b983; | |
| } | |
| </style> |
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)
| import { Component, Vue, Prop, Provide } from 'vue-property-decorator' | |
| @Component() | |
| export default class App extends Vue { | |
| @Provide() | |
| foo = 'foo'; | |
| @Provide() | |
| bar = 'bar'; | |
| } |
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.
Top comments (0)