Jason Thomas

Jason Thomas


Building a JAMstack website with Cosmic JS

In this tutorial, you’ll learn how to build a JAMstack website using Vue.js, Nuxt.js and Cosmic JS

Let’s first define our JAMstack: ‘J’ stands for JavaScript, our application uses Vue.js. ‘A’ stands for APIs, and we are using the powerful APIs of Cosmic JS. ‘M’ stands for Markup, which is Nuxt.js in this example. For this tutorial, we will be building a simple fitness studio website. In the end, we will deploy it on Netlify which gives serverless backend services and hosting. Let’s get started.


Checkout the demo

Download the codebase


We are building a **JAMstack **website with the powerful APIs of Cosmic JS. This website is about fitness and the body. The first page is dynamic with some navigations provided by Vue.js. On the left side navigation, you will find the link to the blog, whose data is also coming from the Cosmic JS via the Cosmic JS APIs. Let’s start now with the requirements.


The one and the only requirement is Node.js. Install it on your system to run npm commands.

Getting Started

Here we are using npm but you can also use yarn to install packages. So if you have installed above software, run the following command to a quick start:

npx create-nuxt-app jamstack_app

Here jamstack_app is your desired name of the app. Now go to the root of the created folder, and run the following command to run it in development:

npm run dev

Now visit: http://localhost:3000/ to view the project in development mode.

Learn more about Nuxt.js quick starter kit here: Nuxt.js Starter Kit

Folder Structure

After creating the app, you will get the same folder structure as given in the picture:

Let’s explain the main folders and files of this structure. package.json file contains the record of all modules installed in your project. Static folder contains the static files used in the project like logo and images. Pages folder contains the pages like home page and blog etc. node_modules has all modules installed and layout contains styling of the project. Config folder is created by us to save the config.js file which will be used at the time dynamic requests to the Cosmic JS server.


We have generated the Nuxt.js app with the app generator but the main configuration is pending to make our app a complete JAMstack app. With the creation of the app, JavaScript and Markup part of the app completed. Now we are configuring the API part of the app that means the Cosmic JS part.

For this, you need a Cosmic JS account. Sign up for Cosmic JS official website, it is totally free. Then create a free bucket and create your first object type: ‘blogs’. Or you can import a built-in bucket, way to import it is given in the below heading.

Now click the basic setting option in your dashboard, it will open your basic setting page as shown above. Note down your bucket slug, bucket_id. Now generate the read and write keys and save them on your computer. Now save them in your project also. For this create a config folder and create a config.js file in it and save as given below:

const config = {
bucket_name: "jamstack_app",
bucket_slug: "jamstack_app",
url: "https://api.cosmicjs.com/v1/"

export default config;

In-built Bucket

If you don’t want to create a new bucket, then you have an option to import a readymade bucket. For this, download the bucket.json file from our Git codebase and import it from your dashboard from the Import/Export option, check below image for visual help:

Home Page

Let’s get started with the first page that is the home page. In this we will render the dynamic data from Cosmic JS server with APIs, it will show you the Vue.js part of the website. Here we are going to write the detail of our website and will implement navigation in the header of the website as well as in the bottom part will give a button to navigate to blog. Check out the code of homepage at location: pages/index.vue

  <v-layout column justify-center align-center>
    <v-flex xs12 sm8 md6>
      <div class="text-xs-center">
        <v-card-title class="headline"><h2>{{title}}</h2></v-card-title>
          <div v-html="body"></div>

          <hr class="my-3">
          <div class='float-left'><p><b>About us</b></p><div v-html="about"></div></div>

          <div class='float-right'><p><b>Contact us</b></p><div v-html="contact"></div></div>
          <v-btn color="primary" flat nuxt to="/blog">Read Blog</v-btn>

.float-left {
  float: left
.float-right {
  margin-left: 300px
import axios from "axios";
import config from '../config/config';
export default {
  asyncData (context) {
    return axios.get(config.url + config.bucket_slug + '/object-type/homes',{
            params: {
                read_key: config.read_key
      .then(res => {
        return {title : res.data.objects[0].title, body: res.data.objects[0].content, image: res.data.objects[0].metadata.image, about: res.data.objects[0].metadata.about_us, contact: res.data.objects[0].metadata.contact_us}

This page is a template plus vue.js code and pure dynamic in nature. Here we applied a link at the bottom which navigates to the blog page and this blog page is also pure dynamic in nature.

The Layout of the Website

The complete layout of the app is coded in a single file for good structure. Here we are customizing the header, footer and other color schemes of the app. Check out the code for layout layouts/default.vue

  <v-app dark>
          v-for="(item, i) in items"
            <v-icon>{{ item.icon }}</v-icon>
            <v-list-tile-title v-text="item.title" />
      <v-toolbar-side-icon @click="drawer = !drawer" />
      <v-toolbar-title to="/"><v-btn to="/">JAMstack Website using Vue.js, Nuxt.js and Cosmic JS</v-btn></v-toolbar-title>
      <v-spacer />
        @click.stop="rightDrawer = !rightDrawer"
        <nuxt />
      <span class='center-align'>Proudly Powered by <a href='https://cosmicjs.com/'>Cosmic JS</a></span>

export default {
  data() {
    return {
      clipped: false,
      drawer: false,
      fixed: false,
      items: [
          icon: 'apps',
          title: 'Home',
          to: '/'
          icon: 'bubble_chart',
          title: 'Blog',
          to: '/blog'
      miniVariant: false,
      right: true,
      rightDrawer: false,
      title: 'JAMstack Website using Vue.js, Nuxt.js and Cosmic JS'

.center-align {
  text-align: center!important


Here we defined the body color of the website along with the header, footer, and navigational effects. In the navigation, we have given route to blog page and route to the home page as well. In the header of the app, we have given navigation to home to the title of the website.

Blog Page

This is the second page of our website, it handles the dynamic fetching of the data from Cosmic JS server with the help of Cosmic JS APIs. First of all, check the code and then we will explain it. Code is placed at the location: pages/blog.vue

    <v-flex text-xs-left>
       <v-btn color="primary" flat nuxt to="/">Back</v-btn>
      <div v-html="body"></div>
import axios from "axios";
import config from '../config/config';
export default {
  asyncData (context) {
    return axios.get(config.url + config.bucket_slug + '/object-type/blogs',{
            params: {
                read_key: config.read_key
      .then(res => {
        return {title : res.data.objects[0].title, body: res.data.objects[0].content, image:res.data.objects[0].metadata.image.url}

There are two part of the page, first is template and second if JavaScript part. In the template, we have given the route to the home page with the back button and rendered the title and body of the blog.

In JavaScript part, we have made of a GET request to the Cosmic JS server with the help of Cosmic JS API. This API is the combination of the static URL, bucket slug and object type. In GET request, read key is necessary to get the data from the server. After a successful request, we manipulated the data and passed to variables as shown in the code.

Static Folder

In the codebase, check out the static folder. As the name describes, it contains the static data and in our case, it contains the static images of our project. As you know our front page id totally static, image shown on the front page resides in this folder. In the same way, any static image or logo which will be used in the project must be placed here.

What Have We Built?

We have built a **JAMstack **website with the powerful APIs of Cosmic JS. In JAMstack:

‘J’ stands for JavaScript and here Vue.js used as JavaScript part of JAM, 'A 'stands for API, here Cosmic JS used as the API part of JAM, Meaning of ‘M’ is Markup, here Nuxt.js is used as the markup. Here the main part is the API part, we have made a GET request with the help of which and got the quick response. This request made with the help of axios module and then JSON data manipulated easily. Format of the Cosmic JS API response is very simple to handle.

Deployment to Netlify

We have built an app with Vue.js, Nuxt.js, and Cosmic JS, but it is not a pure JAMstack app until we can deploy the static assets to a CDN. For this example, we will deploy it to the serverless backend service provider Netlify.

Install the Netlify CLI and Nuxt CLI:

npm i -g netlify-cli npm i -g nuxt Build the static files
npm run build

Then deploy to Netlify. You will be prompted to select the folder. Type dist to deploy the dist folder.

netlify deploy


With the help of Cosmic JS you can create powerful applications. In this example, we were able to build a JAMstack application with the API power of Cosmic JS.

#vue-js #javascript #nuxt-js

What is GEEK

Buddha Community

Building a JAMstack website with Cosmic JS

NBB: Ad-hoc CLJS Scripting on Node.js


Not babashka. Node.js babashka!?

Ad-hoc CLJS scripting on Node.js.


Experimental. Please report issues here.

Goals and features

Nbb's main goal is to make it easy to get started with ad hoc CLJS scripting on Node.js.

Additional goals and features are:

  • Fast startup without relying on a custom version of Node.js.
  • Small artifact (current size is around 1.2MB).
  • First class macros.
  • Support building small TUI apps using Reagent.
  • Complement babashka with libraries from the Node.js ecosystem.


Nbb requires Node.js v12 or newer.

How does this tool work?

CLJS code is evaluated through SCI, the same interpreter that powers babashka. Because SCI works with advanced compilation, the bundle size, especially when combined with other dependencies, is smaller than what you get with self-hosted CLJS. That makes startup faster. The trade-off is that execution is less performant and that only a subset of CLJS is available (e.g. no deftype, yet).


Install nbb from NPM:

$ npm install nbb -g

Omit -g for a local install.

Try out an expression:

$ nbb -e '(+ 1 2 3)'

And then install some other NPM libraries to use in the script. E.g.:

$ npm install csv-parse shelljs zx

Create a script which uses the NPM libraries:

(ns script
  (:require ["csv-parse/lib/sync$default" :as csv-parse]
            ["fs" :as fs]
            ["path" :as path]
            ["shelljs$default" :as sh]
            ["term-size$default" :as term-size]
            ["zx$default" :as zx]
            ["zx$fs" :as zxfs]
            [nbb.core :refer [*file*]]))

(prn (path/resolve "."))

(prn (term-size))

(println (count (str (fs/readFileSync *file*))))

(prn (sh/ls "."))

(prn (csv-parse "foo,bar"))

(prn (zxfs/existsSync *file*))

(zx/$ #js ["ls"])

Call the script:

$ nbb script.cljs
#js {:columns 216, :rows 47}
#js ["node_modules" "package-lock.json" "package.json" "script.cljs"]
#js [#js ["foo" "bar"]]
$ ls


Nbb has first class support for macros: you can define them right inside your .cljs file, like you are used to from JVM Clojure. Consider the plet macro to make working with promises more palatable:

(defmacro plet
  [bindings & body]
  (let [binding-pairs (reverse (partition 2 bindings))
        body (cons 'do body)]
    (reduce (fn [body [sym expr]]
              (let [expr (list '.resolve 'js/Promise expr)]
                (list '.then expr (list 'clojure.core/fn (vector sym)

Using this macro we can look async code more like sync code. Consider this puppeteer example:

(-> (.launch puppeteer)
      (.then (fn [browser]
               (-> (.newPage browser)
                   (.then (fn [page]
                            (-> (.goto page "https://clojure.org")
                                (.then #(.screenshot page #js{:path "screenshot.png"}))
                                (.catch #(js/console.log %))
                                (.then #(.close browser)))))))))

Using plet this becomes:

(plet [browser (.launch puppeteer)
       page (.newPage browser)
       _ (.goto page "https://clojure.org")
       _ (-> (.screenshot page #js{:path "screenshot.png"})
             (.catch #(js/console.log %)))]
      (.close browser))

See the puppeteer example for the full code.

Since v0.0.36, nbb includes promesa which is a library to deal with promises. The above plet macro is similar to promesa.core/let.

Startup time

$ time nbb -e '(+ 1 2 3)'
nbb -e '(+ 1 2 3)'   0.17s  user 0.02s system 109% cpu 0.168 total

The baseline startup time for a script is about 170ms seconds on my laptop. When invoked via npx this adds another 300ms or so, so for faster startup, either use a globally installed nbb or use $(npm bin)/nbb script.cljs to bypass npx.


NPM dependencies

Nbb does not depend on any NPM dependencies. All NPM libraries loaded by a script are resolved relative to that script. When using the Reagent module, React is resolved in the same way as any other NPM library.


To load .cljs files from local paths or dependencies, you can use the --classpath argument. The current dir is added to the classpath automatically. So if there is a file foo/bar.cljs relative to your current dir, then you can load it via (:require [foo.bar :as fb]). Note that nbb uses the same naming conventions for namespaces and directories as other Clojure tools: foo-bar in the namespace name becomes foo_bar in the directory name.

To load dependencies from the Clojure ecosystem, you can use the Clojure CLI or babashka to download them and produce a classpath:

$ classpath="$(clojure -A:nbb -Spath -Sdeps '{:aliases {:nbb {:replace-deps {com.github.seancorfield/honeysql {:git/tag "v2.0.0-rc5" :git/sha "01c3a55"}}}}}')"

and then feed it to the --classpath argument:

$ nbb --classpath "$classpath" -e "(require '[honey.sql :as sql]) (sql/format {:select :foo :from :bar :where [:= :baz 2]})"
["SELECT foo FROM bar WHERE baz = ?" 2]

Currently nbb only reads from directories, not jar files, so you are encouraged to use git libs. Support for .jar files will be added later.

Current file

The name of the file that is currently being executed is available via nbb.core/*file* or on the metadata of vars:

(ns foo
  (:require [nbb.core :refer [*file*]]))

(prn *file*) ;; "/private/tmp/foo.cljs"

(defn f [])
(prn (:file (meta #'f))) ;; "/private/tmp/foo.cljs"


Nbb includes reagent.core which will be lazily loaded when required. You can use this together with ink to create a TUI application:

$ npm install ink


(ns ink-demo
  (:require ["ink" :refer [render Text]]
            [reagent.core :as r]))

(defonce state (r/atom 0))

(doseq [n (range 1 11)]
  (js/setTimeout #(swap! state inc) (* n 500)))

(defn hello []
  [:> Text {:color "green"} "Hello, world! " @state])

(render (r/as-element [hello]))


Working with callbacks and promises can become tedious. Since nbb v0.0.36 the promesa.core namespace is included with the let and do! macros. An example:

(ns prom
  (:require [promesa.core :as p]))

(defn sleep [ms]
   (fn [resolve _]
     (js/setTimeout resolve ms))))

(defn do-stuff
   (println "Doing stuff which takes a while")
   (sleep 1000)

(p/let [a (do-stuff)
        b (inc a)
        c (do-stuff)
        d (+ b c)]
  (prn d))
$ nbb prom.cljs
Doing stuff which takes a while
Doing stuff which takes a while

Also see API docs.


Since nbb v0.0.75 applied-science/js-interop is available:

(ns example
  (:require [applied-science.js-interop :as j]))

(def o (j/lit {:a 1 :b 2 :c {:d 1}}))

(prn (j/select-keys o [:a :b])) ;; #js {:a 1, :b 2}
(prn (j/get-in o [:c :d])) ;; 1

Most of this library is supported in nbb, except the following:

  • destructuring using :syms
  • property access using .-x notation. In nbb, you must use keywords.

See the example of what is currently supported.


See the examples directory for small examples.

Also check out these projects built with nbb:


See API documentation.

Migrating to shadow-cljs

See this gist on how to convert an nbb script or project to shadow-cljs.



  • babashka >= 0.4.0
  • Clojure CLI >=
  • Node.js 16.5.0 (lower version may work, but this is the one I used to build)

To build:

  • Clone and cd into this repo
  • bb release

Run bb tasks for more project-related tasks.

Download Details:
Author: borkdude
Download Link: Download The Source Code
Official Website: https://github.com/borkdude/nbb 
License: EPL-1.0

#node #javascript

How WordPress Helps you Make Great Websites in 2020

Many sites are powered by a CMS (Content Management System) called WordPress. WordPress is an Open Source Software that offers free use of the product.

This is awesome for a low budget business or individual. To learn more about WordPress or there terms visit their website (wordpress.org).

Before you launch, your WordPress site go through this checklist to get a better understanding

I will assume you have already purchased a domain name and had a hosting account set up with a service provider.

Many service providers are willing to go as far as installing WordPress for you now.

WordPress is great, but you must also learn about how websites work. Beginners should start by learning HTML (HyperText Markup Language) and CSS (Cascading Style Sheets).

These two computer languages basically cover how things are arranged and displayed on a page.

You should also understand how the FTP protocol is used for transferring files to your HTTP server.

Once you have got a good feel of HTML, CSS, HTTP, and FTP you will be ready to start exploring WordPress.

It allows you to change the look and feel of your website through a backside control panel.

You will find that WP is very robust and scalable.

It can provide a solution ranging from a single web page to an expansive multi-page website.

Another cool thing about WP is how it offers database solutions like pages, categories, comments, etc.

You can use it as a Blog or you can create static web pages. I am a huge fan. I have tried JOOMLA, but I still prefer WP.

There is a lot to learn when you are considering building a website.

I have been using WP for about 5 years and I am still learning. There is plenty of documentation available on the net.

If you are in need of a website, and you are starting this from scratch, I would recommend hiring a developer. But if you can accomplish learning this you will be able to build a good website solution for almost anyone.

#wordpress #wordpress-website #web-development #wordpress-website-building #wordpress-website-development #wordpress-tutorial #website #website-development

Rahim Makhani

Rahim Makhani


Get a Bug Free and smooth website with website Maintenance

Having a website for your own firm or business is very important as it can benefit you in many ways like your users can get 24/7 service from your company, you can exchange your information, it can help you to expand your business in the market. One must also maintain their website to keep it bug free and updated.

Your website should be bug free because if there is any bug in your website it will slow down the performance of it and will not even work properly if this happens then there are chances that you may lose your customers.

Are you searching for a company that can provide you with website support and maintenance? Nevina Infotech is the best company that can help you with the maintenance and support, as we have enthusiastic web app developers who can help you to maintain your website.

#website maintenance services #website support and maintenance #website maintenance support #website maintenance packages #website maintenance company #website maintenance plans

Security Website Design

As web developers, we strive to meet your specific needs by creating a website that is user-friendly and remains relevant to the current design trends. This ensures that your website grabs the attention of your audience and keeps you ahead of your competitors.

DataIT Solutions team of experts works collaboratively to create ideas that can meet your requirements. Our Website Designing Company believes in High-Quality Professional Website Designing for your Security Website Designing. Our designers have experience in working on a wide array of projects, including websites of the next generation. We listen to your needs and then deliver.

Our Expertise includes:

  • Dot Net Development
  • PHP Development
  • HTML5 Development
  • IOS App Development
  • Android App Development
  • Website Security services

Our team of experts has the expertise, knowledge, and skills to take control and dominate the web design industry over the next couple of years. They are on hand to listen to your ideas, goals, and help you to have a website that is unique and works with your business and brand.

Looking for a better design? Need a professional web design?
Get in touch with our, Web Design Professional experts.

#security website design #security website designing #security website designer #website designer #website designing #website design

Construction website design in the UK

The right construction web design firm can help ensure that a website converts visitors into clients or leads effectively, even on the first visit, through the proper use of site elements to lead visitors through a sales funnel. With an effective website, construction companies can easily showcase their portfolios as they work to generate more effective leads.

DataIT Solutions offers customized construction website design companies in the UK and digital marketing services. Whether you’re establishing a new online location or your current site needs a redesign, we work with you to produce exactly what you want and need.

We approach every project differently - we analyze and research your business and customer type to build and design the website around our analysis and what we feel will work best for your website and business and as standard, a website will benefit from all of the standard content management features.

What’s included in your website design packages:

  • Hosting and coding
  • Graphic design
  • Advanced analytics tracking
  • Optimization for SEO
  • Existing content import
  • New content creation
  • Lead form creation and tracking
  • Website compatibility across all browsers and devices
  • Integration with social media pages
  • XML sitemap creation and submission
  • And more!

Ready to start your website design project?
We’ll consult with you to scope out your website build requirements.
Request a Consultation.!!

#construction website design in the uk #construction website design #construction website #website design in the uk #website design #website designer