DEV Community

happyrobotstudio
happyrobotstudio

Posted on • Updated on

Exploring Factor - A Wordpress replacement in Vue & Typescript

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,

localhost:3000
localhost:3000/page

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

Atlas Sign Up

Select 'Build a Cluster'

Build a Cluster

Select Free 'Create a Cluster'

Create a Cluster

Set a unique cluster name,

And select 'Create Cluster'

Create Cluster

Select 'Continue without upgrading'

Continue without upgrading

Once the cluster has been created,

Select 'Connect'

Connect

Whitelist your IP Address

Create a Mongo user 'dbuser' with a password, recall this login information for a later step

Whitelist and Create a Mongo user

Select 'Choose a Connection Method'

Choose a Connection Method

Select 'Connect Your Application'

Connect Your Application

Get Connection String

Select Copy to grab our Mongo DB Connection String

Copy Connection String

Select 'Collections'

Collections

Add Collections

Select 'Add my own data'

Add my own data

Enter:

Database Name: 'test'
Collection Name:'posts'

Database Collection name

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

dashboard

We will now create the primary admin account

Select 'sign up'

dashboard

Enter your Name,

Enter your email

Use the admin email you have specified in the .env file

sign up

You should recieve the success screen:

sign up

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

sign up

Congratulations! Your admin user is now verified.

sign up

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

Top comments (0)