Exploring Factor - A Wordpress replacement in Vue & Typescript

happyrobotstudio — Fri, 14 Feb 2020 17:00:40 +0000

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
Create a Mongo DB
Create Admin User
Verify Admin User

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>&Delta;</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>&copy; <strong>&Delta;</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:

https://github.com/happyrobotstudio/factor-tute-1

DEV Community: happyrobotstudio