Ok, new project, new repo. I'm going to set up my usual stack of Vue, Vuex, Vuetify, and Firebase. I'll explain why, and walk through the project initialization process.
Vue.js
Vue is a popular JavaScript Frontend framework, for building web apps. Like other frontend libraries/frameworks such as React and Angular, it's key benefits are:
- Allows you to modularize your app as a set of re-usable components
- Vue's use of reactivity, computed properties and watchers, allow it to automatically update only parts of the interface that change, making it efficient
- Use IF and FOR loops to conditionally render parts of the page, or generate them in a loop
- Simplify event handling
I like Vue over React due to the gentler learning curve yet no lack in power. I also prefer the HTML-like template language over JSX.
I'll be using Vue.js with TypeScript
Some alternatives to Vue are: React, and Angular
Vuex
Vuex is a shared state management library for Vue. Vue's focus on modularizing the app to a set of components works very well to keep functionality alongside display code. It's possible to have components interact with their parents or children via props, sometimes you really do have state that is shared across the whole app - I consider things like the logged-in user, and certain parts of the UI, to be shared states.
When used appropriately, Vuex simplifies a lot of tasks, and browser extensions allow for powerful debugging tools like time-travel (where you can scroll an app back to an earlier state).
Some alternatives to Vuex are: Composition API, Redux (if using React)
Vuetify
Vuetify is a component library that implements Material Design. When used with Vue, it means I have on-hand a set of pre-designed components that I can work with; I can pretty much get through entire projects without ever writing a line of CSS: Instead of defining divs and styling them, I work directly with Vuetify (and Material) components like cards, buttons, toolbars, etc.; all of these components have styles options that are tunable as well.
As someone who's more focused on backend development and frontend functionality, and who isn't as strong on frontend design, a component framework like this is ideal, as it means I don't have to deal with the design aspect of sites. The downside is my sites all tend to have that samey Android look (Google developed Material Design for Android, and use it across their products). However, it's still a better look than anything I could come up with without significant time investment, so I'm ok with it.
Unfortunately, Vuetify are still working on their Vue 3 version, which means for me to use it, I must stick with Vue 2 for now.
Some alternatives to Vuetify are: Bootstrap, Vue Material
Firebase
Firebase is Google Cloud's serverless offering, it wraps several serverless features like Authentication, Functions, a Database, and so on. The benefit of serverless is that I don't have to worry about managing any backend services, and instead communicate with Firebase's backend via libraries that I can import directly.
For example, achieving Twitter logins (as I'll demonstrate later) amounts to about 6 lines of code total; which is pretty impressive, and I never once had to worry about setting up a user table, and all that.
Firebase, and serverless in general, are great for front-end developers who want to build apps quickly without being weighed down with all the backend setup and maintenance tasks
Some alternatives to Firebase are: AWS (though not a single unified product, you can pull together different products to do the same thing: Amplify, Cognito, Lambda, DynamoDB), Mongo Realm, Hasura
Creating the boilerplate
The first step is to pull together the boilerplate. With so much pre-made stuff going on, we rarely start projects from nothing these days. We usually need a bundle of files that are considered a "minimum" setup. Firebase needs several files for configuration, and Vue needs quite a lot. Fortunately they both provide CLIs to achieve this. The following is this process.
Initializing Firebase
Firebase projects can be initialized using the Firebase CLI, which can be installed through npm. You simply run firebase init in a folder (probably a git repo), and it'll run you through an interactive setup process to select the features you want to set up files for:
I'm selecting the features Firestore (the database), Functions (I need this to run the actual twitter posting), Hosting (for the web app's web page). I also selected Emulators in this screenshot, but turns out I didn't need to use them.
Firebase allows you to create a new app from the CLI, though I already created one through the web interface, so I'm going to select that.
Next, Firebase wants to know where to store the Firestore rules and indexes file. These files we'll edit later to configure Firestore, though both things can actually be configured from the web interface too. It's just nice to keep them with the code though. I am customizing the paths to store them in a firestore folder.
Next, Firebase wants to know whether we'll be using JavaScript or TypeScript for functions, and whether to set up ESLint
Finally, Firebase wants to know where the hosting static files are. Unlike a web host that lets you upload individual files over FTP/SSH, Firebase Hosting expects you to provide a folder, and the CLI will just upload all the files from this folder. It's very hands-off, and not very flexible. But ideal for projects like this where a "build" process generates all the static files needed to be uploaded.
I'm setting up the public directory as web/dist because I know that Vue's default configuration is to output to a dist folder.
That's everything for Firebase. It should have created a bunch of folders and config files than now allow you to run commands such as firebase deploy to upload all the new configuratios.
Initializing a Vue project
Next, I will initialize a vue project using the Vue CLI, which can also be installed via npm. I run the command vue create web. The web part is because Vue will create a folder of this name, and I already have the folder from earlier (I created it manually so that I could point Firebase at the web/dist folder, I will select "Merge" when the CLI asks about this).
Upon running the CLI, it asks whether I want a default setup or a manual one. I want to customize, so I pick Manual:
I want the features Babel (on by default), TypeScript, Router (this is vue-router), Vuex, and Linter (on by default).
Next, it asks me a series of questions about project setup. I accept all the defaults.
Then, vue-cli will go ahead and install everything, leaving you with a project that's ready to go!
Install Vuetify
Vuetify can be installed via the vue-cli as well. I cd into the web folder, and run vue add vuetify. It asks about whether to select a pre-set, I go with the Default option.
Vuetify setup is a little odd, you want to do this early on, because it'll replace your homepage with a demo page, which can get annoying if you already have stuff in there.
The final result is, when you run npm run serve to spin up a local build and server, is the Vuetify boilerplate, showing that both Vue and Vuetify have been successfully installed.
With this done, I'm ready to begin the project. You can see the boilerplate setup for the code at commit 0bedad5 in my codebase that I'm open-sourcing.
Top comments (0)