Start to Finish — Write & Deploy a Vue App, setup Auto-deploy, Install a Plugin, Enable Authentication, Basic UI Profile, and integrate PostgreSQL… ALL FOR FREE
Let’s find out if I still know what the F*** I’m doing.
It’s been a few years since I’ve done this stuff, and I want to know if I’m still as good with the full-stack experience as I think I am.
“Project: OurSharedKey”
The Challenge
Create a working Vue App using Twitters Bootstrap front-end toolkit with Google and Facebook authentication, hosted in a public repo on GitHub with minimal project-management using GitHub Projects. Deploy the app to a testable server using Heroku and set it to auto deploy on any push event to a master branch. Purchase a domain from GoDaddy and setup the nameserver to point to the Heroku.
Then lastly and Most Importantly, DOCUMENT IT ALL HERE.
Now What Should I Make?
Something simple… like a shared calendar to manage a vacation home between family members.
Yep, that’s it.
Parts
- Repository:
GitHub — https://github.com - Project Management:
GitHub — https://github.com/features/issues - Framework:
Vue — https://v3.vuejs.org - UI-UX:
Bootstrap — https://getbootstrap.com/ - Install One Plugin:
FullCalendar —https://fullcalendar.io/ - Authentication:
Auth0 — https://auth0.com - Domain:
GoDaddy — https://www.godaddy.com - Hosting:
Heroku — https://www.heroku.com - Auto Deploy:
Heroku — https://devcenter.heroku.com/articles/github-integration - Database:
Heroku — https://elements.heroku.com/addons/heroku-postgresql - File Hosting:
Firebase — https://firebase.google.com/docs/storage/web/upload-files
I’ve used similar stacks to this before, now it’s time to see if I can fit them all together.
Time To Start!
This should be fun, and annoying…
./Start
The first step is to setup a Repot so can enable a Project Manager to and start tracking all the steps I need to do and write down thoughts I have as I go.
To GitHub I go…
Repository — GitHub
- Go to https://github.com/new
- Set name: OurSharedKey
No README, no .gitignore, no license.
Ignoring all those for now (pun intended).
Cool, easiest part is done, lol.
Now to setup a Project so I can start planning…
Project Management — GitHub
Oh cool, they just realized a new “Projects (Beta)” thing, def checking that out.
- Go to the Project tab:
- https://github.com/riodw/OurSharedKey/projects/new
- Create a new Project, I’m calling it “Release Requirements”
- Setup some columns (I will not be using “Automation” for these).
Now add the tasks, this will take some time.
….
and done.
I always add a v2.0 column for things I might want to do in the future, and I’ll to it as I go along.
Now to setup the Vue App.
Framework — Vue : Create New Vue App using the CLI
I’m going to use Vue CLI to start this app, since it will have everything I need.
1. Install it globaly
npm install -g @vue/cli2. Create the new project
vue create our-shared-keyNote: names can only be lowercase
3. Select Manually select features
◉ Choose Vue version◉ Babel◯ TypeScript◉ Progressive Web App (PWA) Support◉ Router◉ Vuex◉ CSS Pre-processors◉ Linter / Formatter◯ Unit Testing◯ E2E Testing
Choose Vue version— I will select the latest version of Vue next.
Babel — a JavaScript compiler.
TypeScript —From Microsoft, a strict syntactical superset of JavaScript and adds optional static typing to the language. Not needed for this small project.
PWA — From Google, makes web apps that use service workers, manifests, and other web-platform features to give users an experience on par with native apps. Sure, we’ll make the Google overlords happy.
Router — Nested route/view mapping. Yep, we can use this.
Vuex — State management. Sure, might be useful for authentication at least.
CSS Pre-processors — lets you generate CSS from the preprocessor’s own unique syntax. Yep, need this.
Linter/Formatter — I do like opinionated formatters, so Yes, get this.
No Testing will be used in this project…
4. Hit enter
5. Select Vue version. We want 3.x
6. Use history mode for router?
Going to do n on this one, it will put a # in the URL but that’s fine. I don’t fee like dealing with the setup to remove it.
7. Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
We for sure want the Sass/SCSS option, but which one? Well, node-sass is depricated, haha, So def not that one.
We want dart-sass.
8. Pick a linter / formatter config
I have a particular love for Prettier. So will using that one. ❤
9. Pick additional lint features
Yep, both. Why not? More formatting is always welcome.
10. Where do you prefer placing config for Babel, ES Lint, etc.?
I hate having random files around for different settings, if someone else clones the file and doesn’t have the file or overwrites it then things in the code will be different for them than for me, No Goo.
User package.json.
11. Pick the package manager to use when installing dependencies.
- Use NPM
12. Create Project!
😁 DONE!
Alright, “Create New Vue App using the CLI”. Can mark that off as done.
Get localhost server to run
This should be as simple as following the commands from above…
$ cd our-shared-key
$ npm run serve- BUT! We have to let the server know where the NODE_OPTIONS are first!
export NODE_OPTIONS=--openssl-legacy-providerThis is the kind of thing you only learn with experience, lol.
2. Then run the local server.
npm run serve
So far so good.
3. Go to the localhost:8080 URL!
SUCCESS!
Another one down!
Next up….
Push to Repo
Back to the GitHub repo! https://github.com/riodw/OurSharedKey
Since we already have a repo… (we can confirm this by typing git status and it says “On branch master nothing to commit, working tree clean”) all we need to do it follow the instructions on GitLab.
…or push an existing repository from the command line
git remote add origin git@github.com:riodw/OurSharedKey.git
git branch -M main
git push -u origin main
We’re going to run the commands.
- Add remote.
git remote add origin git@github.com:riodw/OurSharedKey.git
git branch -M main
git push -u origin main2. Check the GitHub repo…
SUCCESS.
Anddddd… Another one down!
Next up…
Setup Heroku
I’ve good success with Heroku before, it’s owned by SalesForce, although for the life of me I still don’t know why SalesForce bought them. Actually, I’m going to figure that out right now.
Ahh…
1. A perception that the company is involved in “hip” developer culture thereby winning the hearts and minds of a key developer demographic.
2. Perhaps more importantly — even though salesforce.com and the Force.com Platform can be integrated with just about anything, their business model wasn’t originally built with the consumer-web in mind. Heroku (or more precisely RoR) is perfect to plug this gap in their offering.
Well, that’s weird, but whatever.
Anyway…
- Go to Heroku
2. Click “New”
- “Create new app”
3. For App name I’m going to use the same name
our-shared-key4. Click “Create app”
Done. lol. That was easy.
Next…
Setup Auto-Deploy on Heroku
This part can be a bit complex, I’ll keep it simple but there is a lot of customization here that can be done depending on the App you are building.
1. Connect to GitHub
2. Connect to GitHub
3. Authorize heroku
4. Search “OurSharedKey”
5. Click “Connect”
6. Enable Automatic Deploys
Every push to
mainwill deploy a new version of this app. Deploys happen automatically.
Alright, looks good so far!
Let’s update the repo and do a push to test the deploy.
I’m going to create a new project_setup.md file and move all the stuff except the title from README.md into it.
Next we need to add some files to let Heroku know how to run our app.
Create The Server!
7. First install a few dependencies…
npm install express serve-static --save8. Create the server file.
Create a new file called server.js in the project root.
Add these lines to them:
const express = require("express");
const serveStatic = require("serve-static");
const path = require("path");
const app = express();app.use(serveStatic(path.join(__dirname, "/dist")));const port = process.env.PORT || 8080;app.listen(port, () => {
console.log(port);
});
9. Update the package.json file to include a script to run the server file
"start": "node server.js",10. Test the server
You can test the server.js script to run the server by running commandnpm start
Perfect! Ready to push.
11. Push Code
12. Check the Heroku Activity
Seems to be working.
13. Click “Open app”
And…..
😎 Who’s good???? — Me.
Another one DONE!
What’s up Next????
Hummm, this is getting subjective.
I suppose the next easiest thing would be the Domain name, but I’ll save that for last. Like the 🍒 on top 😉
Other than that the next easiest thing would be installing Bootstrap 5.
Install Bootstrap v5
Now I know that there is a plug in for SPA Vue Apps that can use an enhanced version of Bootstrap called BootstrapVue, but I’ve used it in the past for multiple projects and it doesn’t add that much value, expecially since Bootstrap v5 doesn’t use jQuery! Thank God, jQuery will be the death of me. It’s like Everything uses it! The day I can go a full day of never visiting a website that doesn’t use jQuery will be a very happy day for me.
So, because Bootstrap 5 no longer needs jQuery so it’s easier to use with Vue, and no longer requires a library like bootstrap-vue, we can just install straight Bootstrap latest version! 😁
- Install Bootstrap (the normal and boring way!)
npm install --save bootstrap
and there we go, bootstrap installed.
Now I could technically call this a success, but let’s make the website actually use it before we do that.
2. Update the project!
Note: I’m going to skip a lot of the steps in here, as this is not a coding tutorial.
I’m going to use a basic template from the Bootstrap…
This one: https://getbootstrap.com/docs/5.1/examples/cover/
First thing is to go to the source code:
3. Copy past into src/App.vue
Note: It’s more complicated than that, you have to separate the CSS and then breakout the body content and the header/footer into their own sections in each of the views. I’m also removing (commenting out for now) the HelloWorld.vue component. Then there’s also the updating the index.html with a few things.
4. Customize it.
just a little 🙃
That’ll do, but it’s missing something…
I know.
That’s better 😅
Finished.
5. Now Git-push!
And it’s live!
Wonderful. Another one done 🥳
Next up, let’s make something that “looks useful” then update it later.
Install FullCalendar
Note that for this section I will just be installing the calendar. In the next step I will be showing it on the site.
- Install It.
npm install --save @fullcalendar/vue3 @fullcalendar/coreAlright, that was easy.
Done.
Now for the harder part:
Show the Calendar
First we need a few more part of FullCalendar for this to work:
- Install daygrid
npm install --save @fullcalendar/daygridWe need this to display the calendar, the other packages are just setup code, this one has the draw functions so to speak.
2. Install interaction
Provides functionality for event drag-n-drop, resizing, dateClick, and selectable actions
This will be used later.
npm install --save @fullcalendar/interaction3. Update project files
I won’t be getting into the specifics here, again this isn’t a coding guide.
- src/views/About.vue
<template>
<div class="about">
<FullCalendar :options="calendarOptions" />
</div>
</template><script>
import FullCalendar from "@fullcalendar/vue3";
import dayGridPlugin from "@fullcalendar/daygrid";export default {
name: "Home",
components: {
FullCalendar,
},
data() {
return {
calendarOptions: {
plugins: [dayGridPlugin],
initialView: "dayGridMonth",
},
};
},
};
</script>
(Oh, and I’m also removing the Tenor GIF, no need for this spyware and extra code to be included).
4. Push all the changes.
Refresh… Look at that, perfect.
Done.
Alright, now let’s…
Setup Auth0
So, to do this we need to start with an account.
Let’s assume you already have an Auth0 account, it’s free btw.
- Create a “New Tenant”
I’m going to call this the same as the others.
Now since this is a brand new project I do get all the pro-features to try out.
But I won’t be using any of these “Enterprise” features really.
2. Checkout the Login box
Alright setup is done.
Now let’s do Social connections.
Setup Google Auth in Auth0
So, it turns out Auth0 includes the Google Auth out-of-the-box.
See here:
Already turned on, it’s also clearly an option. So, that’s cool!
and Done.
Next.
Setup Auth0
😅…This and the next ones are going to be long ones.
Okay, step one.
- Create Application
2. Create Application
Type in the name
3. Click “Create”
What technology are you using for your web app?
4. Go to Settings
Enter the URLs needed to link Auth0:
Install Auth0
So, it turns out that the official Auth0 documentation only has code for Vue2 and since we are using Vue3 we have to get a little creative.
Hours of research later…
Fortunately, there is an NPM package that now exists specifically for using Auth0 with Vue3, and the best part is it’s quite easy to use!
It’s called vue-auth0-plugin
https://www.npmjs.com/package/vue-auth0-plugin
Sample:
https://github.com/jnt0r/vue-auth0-plugin/tree/master/samples/simple-vue3-sample
- Install vue-auth0-plugin.
npm install --save vue-auth0-plugin2. Tell Vue to use VueAuth0Plugin
- src/main.js
import { createApp } from "vue";
import App from "./App.vue";
import "./registerServiceWorker";
import router from "./router";
import store from "./store";
// auth0
import VueAuth0Plugin from "vue-auth0-plugin";import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap";const app = createApp(App);
app.use(store);
app.use(router);
app.use(VueAuth0Plugin, {
domain: "our-shared-key.us.auth0.com",
client_id: "lRjomGno3ycd0N8PEVXwT6EmOmseaabY",
redirect_uri: "http://localhost:8080",
});app.mount("#app");
Now Auth0 can be injected as auth.
3. Make /about an authenticated route
- src/router/index.js
import { createRouter, createWebHashHistory } from "vue-router";
// @ is an alias to /src
import Home from "@/views/Home.vue";
import { AuthenticationGuard } from "vue-auth0-plugin";const routes = [
{
path: "/",
name: "Home",
component: Home,
},
{
path: "/about",
name: "About",
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () =>
import(/* webpackChunkName: "about" */ "../views/About.vue"),
beforeEnter: [AuthenticationGuard],
},
];const router = createRouter({
history: createWebHashHistory(),
routes,
});export default router;
Notice the beforeEnter: [AuthenticationGuard] this is what makes a route inaccessible without authentication.
4. Add the Login buttons
- src/views/Home.vue
<div>
<button
v-on:click="auth.loginWithPopup()"
:disabled="auth.authenticated"
class="btn btn-primary me-1"
>
Login with PopUp
</button>
<button
v-on:click="auth.loginWithRedirect()"
:disabled="auth.authenticated"
class="btn btn-primary me-1"
>
Login with Redirect
</button>
<button
v-on:click="auth.logout()"
:disabled="!auth.authenticated"
class="btn btn-secondary"
>
Logout
</button>
</div>
<div class="mt-2">
<div>
{{ auth.authenticated ? "Authenticated" : "Not authenticated" }}
</div>
<div>{{ auth.loading ? "Loading" : "Not loading" }}</div>
<div>User: {{ auth.user?.name || "NO_USER" }}</div>
</div>5. Show login info on About page
- src/views/About.vue
<template>
<div class="about">
<FullCalendar :options="calendarOptions" />
<br />
<h1>
You are logged in as {{ auth.user.name }} ({{ auth.user.nickname }})
</h1>
<img :src="auth.user.picture" alt="Profile picture" />
<br /><button v-on:click="auth.logout()">Logout</button>
</div>
</template><script>
// @ is an alias to /src
import FullCalendar from "@fullcalendar/vue3";
import dayGridPlugin from "@fullcalendar/daygrid";
import interactionPlugin from "@fullcalendar/interaction";export default {
name: "About",
inject: ["auth"],
components: {
FullCalendar,
},
data() {
return {
calendarOptions: {
plugins: [dayGridPlugin, interactionPlugin],
initialView: "dayGridMonth",
},
};
},
};
</script>
Alright! Should be good.
Let’s test it.
And clicking on “About” redirects to the Auth0 login page.
Perfect!
Note: The login won’t work on Prod without updating the redirect_url in main.js.
This is how I handle it:
redirect_uri:
window.location.hostname === "localhost"
? "http://localhost:8080"
: "https://our-shared-key.herokuapp.com",
Setup Facebook Auth in Auth0
This should also be easy, basicly just enable the Connection in Auth0 dashboard.
- Click “+ Create Connection”
2. Click “Facebook”
3. Click “Continue”
Alright, so this next section requires you to have a Facebook App, easy enough, I’ve made plenty of these over the years. Time to make another one lol.
So, to start let’s go to:
Couple of comments, pretty sad when the developer portal for Facebook doesn’t even scale well and starts cutting off information. Also, I can’t be the only one who hates this rebrand to “Meta” right? what’s up with that?
Anyway
4. Click “Create App.”
Now we’re going to use the “Consumer” App.
5. Click “Next”
6. Fill out information.
For Display name I’m going to put, as expected, “Our Shared Key”.
I’m also going to select by Business Account, for fun.
7. Click “Create app”
- This will create an App ID & App secret
- These will be under the Facebook App settings Basic
8. Input the app’s keys in Auth0
9. Update the Facebook Login Settings
10. Save Changes
11. Test It!
YES. WORKING.
- Click “Logout” and sign in with Google.
🥳 Both work
Remove Email & Password authentication
Before I continue I’m going to remove the email and password authentication option. I want this to be a Social authentication only.
- Go to Auth0
2. Go to “Authentication”
3. Go to “Database”
4. Then go to “settings”
5. Click “Delete”
Now the login page is only one visible.
DONE, NEXT!
Install FullCalendar List view
This should be an easy one.
- Install FullCalendar ListView
npm install --save @fullcalendar/list2. Import fullcalendar/list
import listPlugin from "@fullcalendar/list";- src/views/About.vue
3. Add the options
headerToolbar: {
center: "dayGridMonth,listWeek"
}Refresh.
And it works!
Alright, I think it’s time to update the UI to make it a real App.
This is going to take a little bit.
…
Landing page done.
