DEV Community: Dillon Raphael

1UpBlitz – A SaaS Starter for Blitzjs

Dillon Raphael — Mon, 30 Aug 2021 14:45:36 +0000

After working on this product for a few months, I promised to release 1UpBlitz on August 31st. But instead, I'm 1 day early!

This is me working over the weekend, while I was a cottage. Where I was supposed to relax and chill.

1UpBlitz is my first product that's been relatively successful.

What is 1UpBlitz? 1UpBlitz is a SaaS starter built with blitzjs that will save you 60+ hours of work.

What's Blitzjs? It's a full stack react framework. Think ruby on rails, but for React. You can learn more about it here https://blitzjs.com/

1UpBlitz comes with the following:

Create multiple plans
Plan upgrading and downgrading
Roles & Permissions for workspaces
Invite users to a workspace
File upload api routes and an included react-dropzone form component
Smart slug generator
Search & Paginated table component
End-to-end tested with cypress

I'm having a release sale of 25% off over at producthunt. Check it out https://www.producthunt.com/posts/1upblitz

How to use React Dashboard analytics with an external site FOR FREE

Dillon Raphael — Sun, 29 Sep 2019 19:54:10 +0000

With the latest release of React Dashboard, there is an included analytics function that lets you store your own analytics data. It doesn't store cookies or ip addresses, instead you get the necessities like your most popular pages, referrers, device, browser & country. This has a huge advantage as it's GDPR compliant.

The only requirements are the free version of Netlify & the sandbox database from mLab.

First create a database on mLab. You can choose the free sandbox version:

When the database is created, click on it and select the User tab. We need to create an admin user for this database:

Then keep note of your mongodb url:

mongodb://<dbuser>:<dbpassword>@ds031978.mlab.com:31978/dbname

Replace <dbuser> & <dbpassword> with the credentials of the user you just created above.

Now push the code in the React Dashboard folder to Github or Gitlab, then create a new site from Git on Netlify.

These are the required build steps. It should populate automatically.

Then there are 3 required environment variables:

Fill the MONGODB_URL with the mlab url above, containing the user credentials.

Then on the external site you want to track analytics, run this API request on page load. This can be done with vanilla javascript, jQuery, React or any frontend framework you prefer.

I created a little api request library that you can copy and paste into your code. It uses Axios, so you'll need to run npm install --save axios inside your project directory.

   import axios from 'axios'

    const createAxios = (token) => {

      const instance = axios.create({
        headers: {
          Accept: 'application/json'
        }
      });

      return instance;
    }


    export const POST = (url, data, token) => createAxios(token).post(url, data, token);
    export const PATCH = (url, data, token) => createAxios(token).patch(url, data);
    export const PUT = (url, data, token) => createAxios(token).put(url, data);
    export const DELETE = (url, params, token) => createAxios(token).delete(url, { params: params || { foo: 'bar' } });
    export const GET = (url, params, token) => createAxios(token).get(url, { params });

Then lets use a React component as an example:

import React from 'react'

import {POST} from '../lib/api'


const Index = () => {

  React.useEffect(() => {

    POST('https://<yournetlifyurl.com>/.netlify/functions/create-visitor', {
      referrer: document.referrer,
      path: window.location.pathname
    })


  }, [])

  return (
    <div><h1>Analytics Example</h1></div>
  )
}

export default Index

It's that simple, and you can start tracking your analytics - free, without any tracking cookies. Check out React Dashboard at https://reactdashboard.com

Creating a dynamic sitemap with Ghost & Next.js for ultimate SEO benefits

Dillon Raphael — Sat, 09 Mar 2019 13:50:40 +0000

There are 2 titans in the blogging platform world. Wordpress owns the majority of the market, but Ghost (https://ghost.org/) is just beautiful. Traditionally, most create themes for these platforms using their internal rendering engines, but we went a different route.

We use React for everything at Creators Never Die, and wanted to continue that pattern for our own site. Obviously, running a blog requires great SEO practices - which out of the box, React doesn't do well. Most search engine bots just scrape HTML, although I've heard Google is able to render React sites properly. Instead of taking that chance, there is a great framework called Next.js. Without explaining the nuances this wonderful framework brings, their main selling point is that they handle rendering React on the server.

After finishing our site, an issue arisen. We needed a dynamic sitemap! Most blogging platforms offer this solution, but only if we use their templating language. Since we are using Next.js, we had to handle creating our sitemap ourselves. I'm going to show you how we did this.

Next.js offers the ability to customize server routes using any node backend framework you like. For this example, we're going to use express, but you can use whatever you like.

We're going to assume you have Next.js installed. Install express & the official Ghost Javascript SDK:

npm install --save express @tryghost/content-api

Next, create a generateSitemap.js file. We're going to run this script whenver the /sitemap.xml route is hit. Well get to routes later in this post.

Inside the file, we're first going to initiate the Ghost SDK. To do this, well need to supply the URL to your Ghost blog & the API token you'll get from your admin panel. Goto the Integrations tab, and create a new custom Integration. This is where you'll find your API Key.

Copy the Content API key, and add this to your new generateSitemap.js file (It's recommended to use a .env file):



    const GhostContentAPI = require('@tryghost/content-api')
    const api = new GhostContentAPI({
      host: http://ghostblogurl.com,
      key: abcdefghijklmnopqrstuvwxyz,
      version: 'v2'
    });

Now we're going to create a function that returns a Promise of all the posts in your Ghost backend:



    const getPosts = () => new Promise((resolve, reject) => {
      api.posts.browse().then((data) => {
        resolve(data)
      })
    })

And finally, an async function that will actually create the XML structure. Notice the line that supplies the URL:



    const createSitemap = async() => {

      let xml = ''
      xml += '<?xml version="1.0" encoding="UTF-8"?>'
      xml += '<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">'


      await getPosts().then((_newData) => {
        _newData.map((_post) => {
          xml += '<url>'
          xml += `<loc>${SITE_ROOT}/blog/item?q=${_post.slug}</loc>`
          xml += `<lastmod>${_post.updated_at}</lastmod>`
          xml += `<changefreq>always</changefreq>`
          xml += `<priority>0.5</priority>`
          xml += '</url>'
        })
      })

      xml += '</urlset>'

      console.log(`Wrote Sitemap`);
      return xml;

    }

    module.exports = createSitemap

Make sure the url follows how you have Next.js setup. In our case, we have blog folder within the pages directory. pages > blog > item.js



    xml += `<loc>${SITE_ROOT}/blog/item?q=${_post.slug}</loc>`

Wont get into detail in this post, but we basically are using the same concept in the getPosts() function above, but supply the slug parsed from the url. Here is an example:



    const posts = await api.posts.read({slug: `${query.q}`}, {include: 'tags,authors'}, {formats: ['html']});

The complete generateSitemap.js file should look like this (I've added dotenv package to handle parsing the .env file):



    require('dotenv').config()

    const GhostContentAPI = require('@tryghost/content-api')
    const api = new GhostContentAPI({
      host: process.env.GHOST_API,
      key: process.env.GHOST_TOKEN,
      version: 'v2'
    });



    const SITE_ROOT = process.env.SITE_ROOT || 'https://creatorsneverdie.com'


    const getPosts = () => new Promise((resolve, reject) => {
      api.posts.browse().then((data) => {
        resolve(data)
      })
    })


    const createSitemap = async() => {

      let xml = ''
      xml += '<?xml version="1.0" encoding="UTF-8"?>'
      xml += '<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">'


      await getPosts().then((_newData) => {
        _newData.map((_post) => {
          xml += '<url>'
          xml += `<loc>${SITE_ROOT}/blog/item?q=${_post.slug}</loc>`
          xml += `<lastmod>${_post.updated_at}</lastmod>`
          xml += `<changefreq>always</changefreq>`
          xml += `<priority>0.5</priority>`
          xml += '</url>'
        })
      })

      xml += '</urlset>'

      console.log(`Wrote Sitemap`);
      return xml;


    }


    module.exports = createSitemap

All that's left is creating the custom routes. Create a server.js file in the root of your directory. We're going to require all the necessary packages, and create a SITEMAP variable to store the XML content within the session:



    const express = require('express');
    const next = require('next');
    const port = parseInt(process.env.PORT, 10) || 3000;
    const dev = process.env.NODE_ENV !== 'production';
    const app = next({ dev });
    const handle = app.getRequestHandler();


    const genSitemap = require('./lib/generateSitemap')
    let SITEMAP = null

Well then prepare Next.js and initiate the express server:



    app.prepare()
      .then(() => {
        const server = express();

        server.get('*', (req, res) => handle(req, res));

        server.listen(port, (err) => {
          if (err) throw err;
          console.log(`> Ready on http://localhost:${port}`);
        });
      });

We need 2 routes. One to view the sitemap, and one to generate the sitemap whenever a new post is made, edited or deleted. To accomplish this, Ghost allows you to create a Webhook. First let's create the Webhook in the Ghost backend. Navigate to the same location you found your Content API Key, press "Add Webhook" and supply the following values (replacing our domain with yours):

Now back to the server.js file, well add the 2 routes. A GET route & POST route:



    server.get('/sitemap.xml', async (req,res) => {
         if(!SITEMAP) {
             SITEMAP = await genSitemap();
       } 

       res.set('Content-Type', 'text/xml');
       res.send(SITEMAP);
    })

    server.post('/createSitemap', async (req, res, next) => {
      SITEMAP = await genSitemap()
        res.status(200).send(SITEMAP)
    })

In the GET request, we check if the SITEMAP variable is empty. If it's empty, we call the genSitemap() function we created in the generateSitemap.js file. This will return the XML file and store in the SITEMAP variable. Same concept applies to the POST request, which gets called whenever a post is created or modified. Your server.js file should look like this:



    const express = require('express');
    const next = require('next');
    const port = parseInt(process.env.PORT, 10) || 3000;
    const dev = process.env.NODE_ENV !== 'production';
    const app = next({ dev });
    const handle = app.getRequestHandler();


    const genSitemap = require('./lib/generateSitemap')
    let SITEMAP = null


    app.prepare()
      .then(() => {
        const server = express();

        server.get('/sitemap.xml', async (req,res) => {
          if(!SITEMAP) {
            SITEMAP = await genSitemap();
          } 

          res.set('Content-Type', 'text/xml');
          res.send(SITEMAP);
        })

        server.post('/createSitemap', async (req, res, next) => {
          SITEMAP = await genSitemap()
          res.status(200).send(SITEMAP)
        })


        server.get('*', (req, res) => handle(req, res));

        server.listen(port, (err) => {
          if (err) throw err;
          console.log(`> Ready on http://localhost:${port}`);
        });
      });

And now if you goto /sitemap.xml you'll see the following:

Try creating a new post, and watch the /sitemap.xml automatically update!

If you would be so kind and help me build my clout on twitter @dillonraphael. Feel free to ask me questions.