1565838000
Build A Progressive Web Application With Nuxt.js
Ever since its announcement by Google, the adoption of progressive web apps has skyrocketed as many traditional web apps have been and are being converted to progressive web apps. In this tutorial, I’ll be showing you how to build a progressive web app with Nuxt.js. For the purpose of demonstration, we’ll be building a news app.
This tutorial assumes a basic knowledge of progressive web app.
Nuxt.js is a framework for building server-side rendered Vue.js applications.
Getting started
We’ll start by creating a new Nuxt.js app. For this, we’ll make use of the Vue CLI, so you need to first install the Vue CLI in case you don’t have it installed already:
npm install -g vue-cli
Then we can create a Nuxt.js app:
vue init nuxt/starter pwa-news
Next, we need to install the dependencies:
cd pwa-news
npm install
We can now launch our app:
npm run dev
The app should be running on http://localhost:3000.
With our app up and running, let’s now install the necessary Nuxt.js modules that we’ll be needing for our news app:
npm install @nuxtjs/axios @nuxtjs/bulma @nuxtjs/dotenv
Let’s quickly go over each of the module:
- @nuxtjs/axios: Secure and easy Axios integration with Nuxt.js.
- @nuxtjs/bulma: This module leverages the lovely Bulma CSS framework.
- @nuxtjs/dotenv: This module loads your
.envfile into your context options.
Next, let’s make Nuxt.js use these modules. We’ll do that by adding them in the modules section of the nuxt.config.js file:
// nuxt.config.js
modules: [
'@nuxtjs/axios',
'@nuxtjs/dotenv',
'@nuxtjs/bulma'
]
Getting our API key
Our news app will be built on News API. So we need to get our API key.
Click on the Get API key button then follow along the registration to get your API key.
Building the news app
With our API key in place, let’s start building our news app. First, let’s update the layouts/default.vue file as below:
// layouts/default.vue
<template>
<div>
<section class="hero has-text-centered is-primary">
<div class="hero-body">
<div class="container">
<h1 class="title">PWA News</h1>
<h2 class="subtitle">All the headlines making the wavy!</h2>
</div>
</div>
</section>
<nuxt/>
</div>
</template>
<style>
html {
font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
</style>
We are simply making use of the Bulma classes.
Next, let’s update the pages/index.vue file as well:
// pages/index.vue
<template>
<section class="section">
<div class="container">
<div class="columns is-multiline">
<div
class="column is-one-quarter"
v-for="(article, index) in articles"
:key="index">
<a :href="article.url" target="_blank">
<div class="card">
<div class="card-image">
<figure class="image is-3by2">
<img :src="article.urlToImage" :alt="article.title">
</figure>
</div>
<div class="card-content">
<div class="content">{{ article.title }}</div>
</div>
</div>
</a>
</div>
</div>
</div>
</section>
</template>
<script>
export default {
async asyncData({ app }) {
const { articles } = await app.$axios.$get(
`https://newsapi.org/v2/top-headlines?sources=cnn&apiKey=${
process.env.API_KEY
}`
);
return { articles };
},
};
</script>
In the template section, we loop through the news headlines and display each headline in a card (using Bulma classes) with a link to view the news directly on the source. On the script section, because we’ll be fetching the news headlines and rendering them on the server-side, so we make use of the asyncData method. Then making use of the Nuxt.js axios module installed earlier, we make a GET request to the New API endpoint to fetch news headlines, passing along the source we want to fetch from and our API key. Lastly, we return a articles object containing the fetched news headlines. With this, we can access the articles object as we would access any other component data.
You will notice we are getting our API key from an environment variable, which we are yet to create. Let’s do that now. Create a new .env file directly in the project root directory:
touch .env
Then add the code below into it:
// .env
API_KEY=YOUR_API_KEY
Now, if we test our app, we should get something similar to the image below:
Converting our app to a progressive web app
So far our news is feature complete. But our goal for this tutorial is to build a progressive web app. So, let’s add the progressive web app awesomeness to our news app. To do this, we make of a Nuxt.js module called Nuxt PWA.
Using Nuxt PWA you can supercharge your current or next Nuxt project with a heavily tested, updated and stable PWA solution and zero-config!
Nuxt PWA module is a collection of smaller modules that are designed to magically work out of the box together. These modules includes:
- @nuxtjs/axios: Secure and easy Axios integration with Nuxt.js.
- @nuxtjs/bulma: This module leverages the lovely Bulma CSS framework.
- @nuxtjs/dotenv: This module loads your
.envfile into your context options.
For the purpose of this tutorial, we’ll be making use of only the first 4 modules, as we won’t be covering push notifications.
The lovely thing about Nuxt PWA is that it works straight out of the box with zero configuration. So let’s install and set it up:
npm install @nuxtjs/pwa
Next, we add the module to the nuxt.config.js file:
// nuxt.config.js
modules: [
...,
'@nuxtjs/pwa'
]
Lastly, we need an icon for our news app. Though this is optional, it will give our app that native feel once our app is added to the home screen of our user’s devices. For this tutorial, we’ll use the icon from the Nuxt.js HackerNews clone. So download and place it in the static directory.
That’s all we need to do to make use of the Nuxt PWA module. Because by default, workbox module is only enabled on production builds, we need to build our news app for production:
npm run build
Once the the build is done, we can start our app with:
npm start
Then we can view the app at http://localhost:3000.
We get pretty much the same thing from earlier. To see indeed that our app is now a progressive web app, try setting our app to offline (which simulates no internet connection) under the Application tab on Chrome devtools and refresh the page.
The app should still be running fine as our app is been cached for offline view.
Also, we can use the Lighthouse extension to test if our app meets the standards for a progressive web app. Under the Audits tab (you might have to download the Lighthouse extension if you can’t find this tab) of Chrome devtools, click on the perform an audit… button and click on Run aduit:
This will start performing some checks on our app. Once it’s complete, we should get a screen as below:
We are more focused on the Progressive Web App section. As you can see, our app got an 82/100, which is a great score. If we narrow the result down, you’ll see that our app only failed 2 audits, which are understandable since our app is still running on localhost.
Conclusion
So in this tutorial, we looked at how we can build a progressive web app with Nuxt.js. With this tutorial, you should be able to convert an existing Nuxt.js application into a progressive web app. We also looked at how we can test a progressive web app using the Lighthouse extension. I hope you found this tutorial helpful.
**Recommended Reading **
☞ How to create simple app with Nuxt and Morris for displaying charts
☞ Vue.js Pattern for Async Requests: Using Renderless Components
☞ 10+ Must-Have Tools & Libraries for Vue.js Development
☞ Using Nuxt generate for building static web applications
☞ Using Nuxt generate for building static web applications
☞ Seven Problems You Can Avoid by using Nuxt.js
Ever since its announcement by Google, the adoption of progressive web apps has skyrocketed as many traditional web apps have been and are being converted to progressive web apps. In this tutorial, I’ll be showing you how to build a progressive web app with Nuxt.js. For the purpose of demonstration, we’ll be building a news app.
This tutorial assumes a basic knowledge of progressive web app.
Nuxt.js is a framework for building server-side rendered Vue.js applications.
Getting started
We’ll start by creating a new Nuxt.js app. For this, we’ll make use of the Vue CLI, so you need to first install the Vue CLI in case you don’t have it installed already:
npm install -g vue-cli
Then we can create a Nuxt.js app:
vue init nuxt/starter pwa-news
Next, we need to install the dependencies:
cd pwa-news
npm install
We can now launch our app:
npm run dev
The app should be running on http://localhost:3000.
With our app up and running, let’s now install the necessary Nuxt.js modules that we’ll be needing for our news app:
npm install @nuxtjs/axios @nuxtjs/bulma @nuxtjs/dotenv
Let’s quickly go over each of the module:
- @nuxtjs/axios: Secure and easy Axios integration with Nuxt.js.
- @nuxtjs/bulma: This module leverages the lovely Bulma CSS framework.
- @nuxtjs/dotenv: This module loads your
.envfile into your context options.
Next, let’s make Nuxt.js use these modules. We’ll do that by adding them in the modules section of the nuxt.config.js file:
// nuxt.config.js
modules: [
'@nuxtjs/axios',
'@nuxtjs/dotenv',
'@nuxtjs/bulma'
]
Getting our API key
Our news app will be built on News API. So we need to get our API key.
Click on the Get API key button then follow along the registration to get your API key.
Building the news app
With our API key in place, let’s start building our news app. First, let’s update the layouts/default.vue file as below:
// layouts/default.vue
<template>
<div>
<section class="hero has-text-centered is-primary">
<div class="hero-body">
<div class="container">
<h1 class="title">PWA News</h1>
<h2 class="subtitle">All the headlines making the wavy!</h2>
</div>
</div>
</section>
<nuxt/>
</div>
</template>
<style>
html {
font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
</style>
We are simply making use of the Bulma classes.
Next, let’s update the pages/index.vue file as well:
// pages/index.vue
<template>
<section class="section">
<div class="container">
<div class="columns is-multiline">
<div
class="column is-one-quarter"
v-for="(article, index) in articles"
:key="index">
<a :href="article.url" target="_blank">
<div class="card">
<div class="card-image">
<figure class="image is-3by2">
<img :src="article.urlToImage" :alt="article.title">
</figure>
</div>
<div class="card-content">
<div class="content">{{ article.title }}</div>
</div>
</div>
</a>
</div>
</div>
</div>
</section>
</template>
<script>
export default {
async asyncData({ app }) {
const { articles } = await app.$axios.$get(
`https://newsapi.org/v2/top-headlines?sources=cnn&apiKey=${
process.env.API_KEY
}`
);
return { articles };
},
};
</script>
In the template section, we loop through the news headlines and display each headline in a card (using Bulma classes) with a link to view the news directly on the source. On the script section, because we’ll be fetching the news headlines and rendering them on the server-side, so we make use of the asyncData method. Then making use of the Nuxt.js axios module installed earlier, we make a GET request to the New API endpoint to fetch news headlines, passing along the source we want to fetch from and our API key. Lastly, we return a articles object containing the fetched news headlines. With this, we can access the articles object as we would access any other component data.
You will notice we are getting our API key from an environment variable, which we are yet to create. Let’s do that now. Create a new .env file directly in the project root directory:
touch .env
Then add the code below into it:
// .env
API_KEY=YOUR_API_KEY
Now, if we test our app, we should get something similar to the image below:
Converting our app to a progressive web app
So far our news is feature complete. But our goal for this tutorial is to build a progressive web app. So, let’s add the progressive web app awesomeness to our news app. To do this, we make of a Nuxt.js module called Nuxt PWA.
Using Nuxt PWA you can supercharge your current or next Nuxt project with a heavily tested, updated and stable PWA solution and zero-config!
Nuxt PWA module is a collection of smaller modules that are designed to magically work out of the box together. These modules includes:
- @nuxtjs/axios: Secure and easy Axios integration with Nuxt.js.
- @nuxtjs/bulma: This module leverages the lovely Bulma CSS framework.
- @nuxtjs/dotenv: This module loads your
.envfile into your context options.
For the purpose of this tutorial, we’ll be making use of only the first 4 modules, as we won’t be covering push notifications.
The lovely thing about Nuxt PWA is that it works straight out of the box with zero configuration. So let’s install and set it up:
npm install @nuxtjs/pwa
Next, we add the module to the nuxt.config.js file:
// nuxt.config.js
modules: [
...,
'@nuxtjs/pwa'
]
Lastly, we need an icon for our news app. Though this is optional, it will give our app that native feel once our app is added to the home screen of our user’s devices. For this tutorial, we’ll use the icon from the Nuxt.js HackerNews clone. So download and place it in the static directory.
That’s all we need to do to make use of the Nuxt PWA module. Because by default, workbox module is only enabled on production builds, we need to build our news app for production:
npm run build
Once the the build is done, we can start our app with:
npm start
Then we can view the app at http://localhost:3000.
We get pretty much the same thing from earlier. To see indeed that our app is now a progressive web app, try setting our app to offline (which simulates no internet connection) under the Application tab on Chrome devtools and refresh the page.
The app should still be running fine as our app is been cached for offline view.
Also, we can use the Lighthouse extension to test if our app meets the standards for a progressive web app. Under the Audits tab (you might have to download the Lighthouse extension if you can’t find this tab) of Chrome devtools, click on the perform an audit… button and click on Run aduit:
This will start performing some checks on our app. Once it’s complete, we should get a screen as below:
We are more focused on the Progressive Web App section. As you can see, our app got an 82/100, which is a great score. If we narrow the result down, you’ll see that our app only failed 2 audits, which are understandable since our app is still running on localhost.
Conclusion
So in this tutorial, we looked at how we can build a progressive web app with Nuxt.js. With this tutorial, you should be able to convert an existing Nuxt.js application into a progressive web app. We also looked at how we can test a progressive web app using the Lighthouse extension. I hope you found this tutorial helpful.
**Recommended Reading **
☞ How to create simple app with Nuxt and Morris for displaying charts
☞ Vue.js Pattern for Async Requests: Using Renderless Components
☞ 10+ Must-Have Tools & Libraries for Vue.js Development
☞ Using Nuxt generate for building static web applications
☞ Using Nuxt generate for building static web applications
☞ Seven Problems You Can Avoid by using Nuxt.js
#javascript #vue #vuejs #nuxt #nuxtjs
What is GEEK
Buddha Community
1632537859
NBB: Ad-hoc CLJS Scripting on Node.js
Nbb
Not babashka. Node.js babashka!?
Ad-hoc CLJS scripting on Node.js.
Status
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.
Requirements
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).
Usage
Install nbb from NPM:
$ npm install nbb -g
Omit -g for a local install.
Try out an expression:
$ nbb -e '(+ 1 2 3)'
6
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
"/private/tmp/test-script"
#js {:columns 216, :rows 47}
510
#js ["node_modules" "package-lock.json" "package.json" "script.cljs"]
#js [#js ["foo" "bar"]]
true
$ ls
node_modules
package-lock.json
package.json
script.cljs
Macros
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)
body))))
body
binding-pairs)))
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)'
6
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.
Dependencies
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.
Classpath
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"
Reagent
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
ink-demo.cljs:
(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]))
Promesa
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]
(js/Promise.
(fn [resolve _]
(js/setTimeout resolve ms))))
(defn do-stuff
[]
(p/do!
(println "Doing stuff which takes a while")
(sleep 1000)
1))
(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
3
Also see API docs.
Js-interop
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
.-xnotation. In nbb, you must use keywords.
See the example of what is currently supported.
Examples
See the examples directory for small examples.
Also check out these projects built with nbb:
- c64core: retrocompute aesthetics twitter bot
- gallery.cljs: script to download walpapers from windowsonearth.org.
- nbb-action-example: example of a Github action built with nbb.
API
See API documentation.
Migrating to shadow-cljs
See this gist on how to convert an nbb script or project to shadow-cljs.
Build
Prequisites:
- babashka >= 0.4.0
- Clojure CLI >= 1.10.3.933
- 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
1625717787
Reach out to more customers: get a progressive web app
A Progressive Web App is a type of application software that is delivered through the web. It is built using standard web technologies HTML, CSS, and JavaScript. It is expected to work on any platform that uses a standards-compliant browser, including desktop and mobile.
It is also known as a type of web page or web server. With the help of these PWA web pages, you can reach more customers for a business by marketing and promoting your business through web pages. You can also gain more customers by developing PWA by hiring a progressive web app development company. Nevina Infotech is a company that can help you to build your progressive web app with the help of its enthusiastic developers.
#progressive web app development company #progressive web app developers #progressive web app platform #progressive web app development services #progressive web app development
1620187126
Get your Custom Progressive Web App at an affordable Price
Progressive Web App or PWA is a type of application software that is delivered over the web. It is built using standard web technologies, including HTML, CSS, and JavaScript. It is designed to work on any platform that uses a standards-compliant browser. It can work on both desktop and mobile devices.
PWA is a type of website or web page known as a web application. It doesn’t require separate bundling or distribution.
Are you searching for a progressive web app development company to develop your custom PWA at an affordable rate? Then Nevina Infotech is the best suitable choice for you. We have experienced and dedicated developers who will help you to develop your custom PWA as per your requirement.
#progressive web app development company #progressive web app developers #progressive web app platform #progressive web app development services #progressive web app development
1626327771
Get your custom progressive web app with the latest features
Suppose you are looking for an app that can be run on any platform, whether on a desktop or a smartphone. Progressive web app development can provide this functionality to your app. It’s made using the most common web technologies, including HTML, CSS, and JavaScript.
To get a PWA for your business requirements, you can find a progressive web app development company that can understand your vision and give you the best app that you deserve. Nevina Infotech is one of the best PWA development companies, which have the most dedicated developers with the experience of app development that can help you achieve your goals.
#progressive web app development company #progressive web app developers #progressive web app platform #progressive web app development services #progressive web app development
1617354704
Top Progressive Web App Development Company in USA
AppClues Infotech is one of the leading progressive web app development company in USA. We offer the best progressive web app development & design solution to create high-performance & secure PWA.
For more info:
Website: https://www.appcluesinfotech.com/
Email: info@appcluesinfotech.com
Call: +1-978-309-9910
#top progressive web app development company in usa #hire progressive web app developers in usa #best pwa development company in usa #custom progressive web app development company #progressive web apps development #progressive web app development services