Factor (factor.dev) is a modern Javascript CMS based on the VENM stack - Vue, Express, Node Mongo (a.k.a the MEVN stack).
Why seek a wordpress alternative? Wordpress has been the workhorse of a generation of web devs, but it is slow. Factor wraps Wordpress like functionality in Vue & renders extremely quickly.
In Part 1 of this tutorial we will set up a basic Factor site.
In Part 2 we will explore Factor from a Wordpress perspective - Posts, Pages & Custom Post Types.
Part 1
Set up Factor
Ensure node and npx are installed:
Open a terminal in ~/
git clone https://github.com/happyrobotstudio/factor-tute-1.git
cd factor-tute-1
npm install
And let's build our Factor app:
npx factor dev
Open in a Browser:
http://localhost:3000/
And we should see our new Factor app,
Our Factor app looks very much like a simple Vue app at this stage,
Factor handles our routing with addContentRoute
index.js
import { addContentRoute } from "@factor/api"
addContentRoute({
path: "/",
component: () => import("./home.vue")
})
addContentRoute({
path: "/page",
component: () => import("./page.vue")
})
Our basic app layout, a header/footer and our main <router-view>
content.vue
<template>
<div class="content">
<page-header></page-header>
<router-view />
<page-footer></page-footer>
</div>
</template>
<script lang="ts">
export default {
components: {
pageHeader: () => import("./header.vue"),
pageFooter: () => import("./footer.vue")
}
}
</script>
A home page template,
home.vue
<template>
<div class="page home-page">
<h1>Excellent Home Page</h1>
</div>
</template>
<script lang="ts">
export default {
components: {
}
}
</script>
A page template,
page.vue
<template>
<div class="page another-page">
<h1>Radical Page</h1>
</div>
</template>
<script lang="ts">
export default {
components: {
}
}
</script>
Our header and footer elements,
header.vue
<template>
<header class="site-header">
<div class="logo">
<factor-link path="/"><strong>Δ</strong> Factor Site</factor-link>
</div>
<div class="links">
<factor-link path="/">Home</factor-link>
<factor-link path="/page">Page</factor-link>
<factor-link path="/dashboard">Dashboard</factor-link>
</div>
</header>
</template>
<script lang="ts">
import { factorLink } from "@factor/ui"
export default {
components: {
factorLink
}
}
</script>
footer.vue
<template>
<footer class="site-footer">
<span>© <strong>Δ</strong> Factor Site {{ currentyear() }}</span>
</footer>
</template>
<script lang="ts">
import { factorLink } from "@factor/ui"
import Vue from "vue"
export default Vue.extend({
components: {
factorLink
},
data() {
return {
}
},
methods: {
currentyear(this: any) {
return new Date().getFullYear()
}
}
})
</script>
And factor will import styles from a file factor-styles.less
factor-styles.less
.factor-app {
--color-primary: #0471ff;
--color-secondary: #ff0076;
--color-dark: #111111;
--color-text: #495e6f;
--font-family-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
"Helvetica Neue", Arial, sans-serif;
color: var(--color-text);
font-family: var(--font-family-primary);
a {
color: var(--color-primary);
&:hover {
color: var(--color-secondary);
}
}
...
}
Create a Mongo DB
Now that we have our local server running, it's time to connect Factor to a Mongo Database.
Visit MongoDB Atlas
Create an account with Google or an email
Select 'Build a Cluster'
Select Free 'Create a Cluster'
Set a unique cluster name,
And select 'Create Cluster'
Select 'Continue without upgrading'
Once the cluster has been created,
Select 'Connect'
Whitelist your IP Address
Create a Mongo user 'dbuser' with a password, recall this login information for a later step
Select 'Choose a Connection Method'
Select 'Connect Your Application'
Get Connection String
Select Copy to grab our Mongo DB Connection String
Select 'Collections'
Add Collections
Select 'Add my own data'
Enter:
Database Name: 'test'
Collection Name:'posts'
Create a file:
.env
And replace the relevant values with your own.
FACTOR_ADMINS="adminemail@youremailprovider.com"
TOKEN_SECRET="YOUR-RANDOM-STRING-HERE"
# -- Database - MongoDB/Mongoose compatible connection URL
DB_CONNECTION=mongodb+srv://dbuser:YOUR-COMPLICATED-PASS@unique-cluster-name-4185-dlnjs.mongodb.net/test?retryWrites=true&w=majority
# -- Email - Transactional
# SMTP_USERNAME=""
# SMTP_PASSWORD=""
# SMTP_HOST=""
# -- Production URL
# FACTOR_URL=""
In the terminal,
Press Ctrl-C to terminate the server and restart with:
npx factor dev
Create Admin User
In the Browser click on the 'Dashboard' link in the menu
We will now create the primary admin account
Select 'sign up'
Enter your Name,
Enter your email
Use the admin email you have specified in the .env file
You should recieve the success screen:
Verify Admin User
The step above should have generated some output in the terminal
Look for the Verify Email link and copy into your Browser
Congratulations! Your admin user is now verified.
Stay tuned for Part 2 where we explore Posts, Pages and Custom Post Types.
Download the full source for this tutorial here:
Top comments (0)