Zack Jackson

Zack Jackson

1572491381

Learn how to deploy a static NuxtJS site to the Cloudflare Workers

Recently Cloudflare announced Workers support for static sites. This opens up a whole new era of static website deployment. Cloudflare Workers is a Serverless platform that allows us to write and run JavaScript and WebAssembly on their Edge network. Now with the help of Cloudflare KV and Workers, we can deploy static websites built or generated with Nuxt, Hugo, Gatsby or Jekyll directly to their network.

Table of Contents

Workers Sites are very appealing due to

  • Low Cost
  • Very Fast
  • Secure
  • Easy to Scale

I am using Cloudflare Workers since last 1 year for different purposes. I am mostly working with VueJS for frontend development, and prefer NuxtJS for complex websites that requires support for routing, store management and many more.

When they announced support for static sites, first thing on my mind was that what if we can deploy NuxtJS site to Workers? This will be game changing, as I won’t have to switch between multiple providers like Netlify, S3 static sites and others. Out of curiosity, I quickly boot-up a small NuxtJS project and deployed it. Here’s the screenshot of full-fledged NuxtJS site deployed on Cloudflare Workers.

Deploying a static NuxtJS site to Cloudflare Workers

Prerequisites

In this tutorial, you’ll learn how to deploy your NuxtJS site to the Cloudflare Workers. First we’ll create a new NuxtJS project and then we’ll deploy it.

To publish your site to Cloudflare Workers, you’ll need:

  • A Cloudflare account with Workers Unlimited plan (it’s just $5/m and includes first 10M requests)
  • Latest version of Wrangler CLI
  • Basic knowledge of VueJS/NuxtJS

Let’s install Wrangler CLI (skip if already installed)

npm i @cloudflare/wrangler -g

Now, you’ll need to configure Wrangler for your Cloudflare account. You can run config command to authenticate for your account.

wrangler config

It’ll ask you for your Cloudflare email and your Global API key. You an obtain your Global API key from

  1. Click Get API Key below the API section to jump to your Profile page.
  2. Scroll to API Keys, and click View to copy your Global API Key.

Now we’re ready to create a project.

Create a new NuxtJS Project

Let’s start with creating an empty NuxtJS project. You can run the below command:

npx create-nuxt-app nuxt-cloudflare-workers

Here I am using npm package manager to create new NuxtJS project named nuxt-cloudflare-workers. It’ll ask you some questions regarding project name, description, server-side framework, UI framework, Testing and more. you use the default options or choose what you’re good at. It’ll also install node_modules for you.

Let’s preview our site locally. Run the below command to preview the site:

cd nuxt-cloudflare-workers
npm run dev

Now open up http://localhost:3000/ on your device and you’ll see something like below.

Deploying a static NuxtJS site to Cloudflare Workers

Let’s edit some text in pages/index.vue to look it better. I’ll change title “nuxt-cloudflare-workers” to “NuxtJS” and change description to “Yay! It’s running on Cloudflare Workers.”

Do open up http://localhost:3000/ and confirm that the text is changed.

Create a Wrangler config

In previous step, we created a NuxtJS static site. In this step we will create a Wrangler configuration file.

Let’s init Wrangler project:

wrangler init --site

It will create a sample wrangler.toml file in your root directory and create some files inside workers-site directory. It looks something like below:

account_id = ""
name = "nuxt-cloudflare-workers"
type = "webpack"
route = ""
workers_dev = true
zone_id = ""

[site]
bucket = ""
entry-point = "workers-site"

Let’s customize this for our NuxtJS project. Here, account_id is your Cloudflare Account ID. If you are deploying it to your custom domain (other than workers.dev), you will need edit zone_id according to the Zone ID of your domain.

To obtain your Account ID & Zone ID:

  1. Log in to your Cloudflare account and select the desired domain.
  2. Select the Overview tab on the navigation bar.
  3. Scroll to the API section and select Click to copy to copy your Account ID.
  4. Copy your Zone ID.

You can edit the name of your Wrangler project, here I’ve kept it nuxt-cloudflare-workers. Thus, it’ll be deployed to nuxt-cloudflare-workers.<workers-sub-domain>.workers.dev.

Now set the value of bucket to dist, as our NuxtJS will generate the static files inside dist directory.

The final wrangler.toml file will be something like below:

account_id = "<account-id>"
name = "nuxt-cloudflare-workers"
type = "webpack"
route = ""
workers_dev = true
zone_id = ""

[site]
bucket = "dist"
entry-point = "workers-site"

So, our NuxtJS project is ready to deploy. In this step, we configured our wrangler.toml file to deploy this project as a static Cloudflare Workers Site.

Deploy it to Cloudflare Workers

In this step, we’ll build our site and deploy it.

Let’s build our static site using:

npm run generate

Deploying a static NuxtJS site to Cloudflare Workers

This will create a static site inside dist directory with all the compiled html, css & js.

Now let’s deploy it.

wrangler publish

This will deploy static site from dist directory to Cloudflare Workers. It might take some time to get it live.

You can go to https://nuxt-cloudflare-workers.iconscout.workers.dev and check it.

Adding new pages

I am adding more pages like about, contact, etc. to check if routing works properly.

I’ve created pages/about.vue and deployed it again.

You can check out new page at https://nuxt-cloudflare-workers.iconscout.workers.dev/about.

Testing Performance

Cloudflare Worker Site is deployed on the Cloudflare Edge network which gives it low latency, high speed and performance. I’ve checked the Google PageSpeed Insights of our newly deployed site and the results are mind blowing. It scored 100/100 with 50ms of first server response time.

Deploying a static NuxtJS site to Cloudflare Workers

Conclusion

Cloudflare is working hard to make developers life easy with their blazing fast CDN, DNS, Page Rules, Workers and many more. Now, with Cloudflare Worker Sites you will be able to deploy all static generated sites in VueJS, React, Next, NuxtJS, Hugo, Gatsby or Jekyll with a click. This can improve latency, speed and performance.

I hope you found this tutorial helpful and will be able to deploy your first Workers site right now. You can find a full source of the project available here on GitHub.

#nuxt #vue-js #vue #javascript #cloud

What is GEEK

Buddha Community

Learn how to deploy a static NuxtJS site to the Cloudflare Workers
Cristian Vasta

Cristian Vasta

1574666391

Deploying a static NuxtJS site to Cloudflare Workers

Recently Cloudflare announced Workers support for static sites. This opens up a whole new era of static website deployment. Cloudflare Workers is a Serverless platform that allows us to write and run JavaScript and WebAssembly on their Edge network. Now with the help of Cloudflare KV and Workers, we can deploy static websites built or generated with Nuxt, Hugo, Gatsby or Jekyll directly to their network.

Workers Sites are very appealing due to

  • Low Cost
  • Very Fast
  • Secure
  • Easy to Scale

I am using Cloudflare Workers since last 1 year for different purposes. I am mostly working with VueJS for frontend development, and prefer NuxtJS for complex websites that requires support for routing, store management and many more.

When they announced support for static sites, first thing on my mind was that what if we can deploy NuxtJS site to Workers? This will be game changing, as I won’t have to switch between multiple providers like Netlify, S3 static sites and others. Out of curiosity, I quickly boot-up a small NuxtJS project and deployed it. Here’s the screenshot of full-fledged NuxtJS site deployed on Cloudflare Workers.

You can find a full source of the project available here on GitHub.

Prerequisites

In this tutorial, you’ll learn how to deploy your NuxtJS site to the Cloudflare Workers. First we’ll create a new NuxtJS project and then we’ll deploy it.

To publish your site to Cloudflare Workers, you’ll need:

  • A Cloudflare account with Workers Unlimited plan (it’s just $5/m and includes first 10M requests)
  • Latest version of Wrangler CLI
  • Basic knowledge of VueJS/NuxtJS

Let’s install Wrangler CLI (skip if already installed)

npm i @cloudflare/wrangler -g

Now, you’ll need to configure Wrangler for your Cloudflare account. You can run config command to authenticate for your account.

wrangler config

It’ll ask you for your Cloudflare email and your Global API key. You an obtain your Global API key from

  1. Click Get API Key below the API section to jump to your Profile page.
  2. Scroll to API Keys, and click View to copy your Global API Key.

Now we’re ready to create a project.

Create a new NuxtJS Project

Let’s start with creating an empty NuxtJS project. You can run the below command:

npx create-nuxt-app nuxt-cloudflare-workers

Here I am using npm package manager to create new NuxtJS project named nuxt-cloudflare-workers. It’ll ask you some questions regarding project name, description, server-side framework, UI framework, Testing and more. you use the default options or choose what you’re good at. It’ll also install node_modules for you.

Let’s preview our site locally. Run the below command to preview the site:

cd nuxt-cloudflare-workers
npm run dev

Now open up http://localhost:3000/ on your device and you’ll see something like below.

Let’s edit some text in pages/index.vue to look it better. I’ll change title “nuxt-cloudflare-workers” to “NuxtJS” and change description to “Yay! It’s running on Cloudflare Workers.”

Do open up http://localhost:3000/ and confirm that the text is changed.

Create a Wrangler config

In previous step, we created a NuxtJS static site. In this step we will create a Wrangler configuration file.

Let’s init Wrangler project:

wrangler init --site

It will create a sample wrangler.toml file in your root directory and create some files inside workers-site directory. It looks something like below:

account_id = ""
name = "nuxt-cloudflare-workers"
type = "webpack"
route = ""
workers_dev = true
zone_id = ""

[site]
bucket = ""
entry-point = "workers-site"

Let’s customize this for our NuxtJS project. Here, account_id is your Cloudflare Account ID. If you are deploying it to your custom domain (other than workers.dev), you will need edit zone_id according to the Zone ID of your domain.

To obtain your Account ID & Zone ID:

  1. Log in to your Cloudflare account and select the desired domain.
  2. Select the Overview tab on the navigation bar.
  3. Scroll to the API section and select Click to copy to copy your Account ID.
  4. Copy your Zone ID.

You can edit the name of your Wrangler project, here I’ve kept it nuxt-cloudflare-workers. Thus, it’ll be deployed to nuxt-cloudflare-workers.<workers-sub-domain>.workers.dev.

Now set the value of bucket to dist, as our NuxtJS will generate the static files inside dist directory.

The final wrangler.toml file will be something like below:

account_id = "<account-id>"
name = "nuxt-cloudflare-workers"
type = "webpack"
route = ""
workers_dev = true
zone_id = ""

[site]
bucket = "dist"
entry-point = "workers-site"

So, our NuxtJS project is ready to deploy. In this step, we configured our wrangler.toml file to deploy this project as a static Cloudflare Workers Site.

Deploy it to Cloudflare Workers

In this step, we’ll build our site and deploy it.

Let’s build our static site using:

npm run generate

This will create a static site inside dist directory with all the compiled html, css & js.

Now let’s deploy it.

wrangler publish

This will deploy static site from dist directory to Cloudflare Workers. It might take some time to get it live.

You can go to https://nuxt-cloudflare-workers.iconscout.workers.dev and check it.

Adding new pages

I am adding more pages like about, contact, etc. to check if routing works properly.

I’ve created pages/about.vue and deployed it again.

You can check out new page at https://nuxt-cloudflare-workers.iconscout.workers.dev/about.

Testing Performance

Cloudflare Worker Site is deployed on the Cloudflare Edge network which gives it low latency, high speed and performance. I’ve checked the Google PageSpeed Insights of our newly deployed site and the results are mind blowing. It scored 100/100 with 50ms of first server response time.

Conclusion

Cloudflare is working hard to make developers life easy with their blazing fast CDN, DNS, Page Rules, Workers and many more. Now, with Cloudflare Worker Sites you will be able to deploy all static generated sites in VueJS, React, Next, NuxtJS, Hugo, Gatsby or Jekyll with a click. This can improve latency, speed and performance.

I hope you found this tutorial helpful and will be able to deploy your first Workers site right now. You can find a full source of the project available here on GitHub.

#vuejs #nuxtjs #Cloudflare #javascript

Michael  Hamill

Michael Hamill

1617331277

Workshop Alert! Deep Learning Model Deployment & Management

The Association of Data Scientists (AdaSci), the premier global professional body of data science and ML practitioners, has announced a hands-on workshop on deep learning model deployment on February 6, Saturday.

Over the last few years, the applications of deep learning models have increased exponentially, with use cases ranging from automated driving, fraud detection, healthcare, voice assistants, machine translation and text generation.

Typically, when data scientists start machine learning model development, they mostly focus on the algorithms to use, feature engineering process, and hyperparameters to make the model more accurate. However, model deployment is the most critical step in the machine learning pipeline. As a matter of fact, models can only be beneficial to a business if deployed and managed correctly. Model deployment or management is probably the most under discussed topic.

In this workshop, the attendees get to learn about ML lifecycle, from gathering data to the deployment of models. Researchers and data scientists can build a pipeline to log and deploy machine learning models. Alongside, they will be able to learn about the challenges associated with machine learning models in production and handling different toolkits to track and monitor these models once deployed.

#hands on deep learning #machine learning model deployment #machine learning models #model deployment #model deployment workshop

Tyrique  Littel

Tyrique Littel

1604008800

Static Code Analysis: What It Is? How to Use It?

Static code analysis refers to the technique of approximating the runtime behavior of a program. In other words, it is the process of predicting the output of a program without actually executing it.

Lately, however, the term “Static Code Analysis” is more commonly used to refer to one of the applications of this technique rather than the technique itself — program comprehension — understanding the program and detecting issues in it (anything from syntax errors to type mismatches, performance hogs likely bugs, security loopholes, etc.). This is the usage we’d be referring to throughout this post.

“The refinement of techniques for the prompt discovery of error serves as well as any other as a hallmark of what we mean by science.”

  • J. Robert Oppenheimer

Outline

We cover a lot of ground in this post. The aim is to build an understanding of static code analysis and to equip you with the basic theory, and the right tools so that you can write analyzers on your own.

We start our journey with laying down the essential parts of the pipeline which a compiler follows to understand what a piece of code does. We learn where to tap points in this pipeline to plug in our analyzers and extract meaningful information. In the latter half, we get our feet wet, and write four such static analyzers, completely from scratch, in Python.

Note that although the ideas here are discussed in light of Python, static code analyzers across all programming languages are carved out along similar lines. We chose Python because of the availability of an easy to use ast module, and wide adoption of the language itself.

How does it all work?

Before a computer can finally “understand” and execute a piece of code, it goes through a series of complicated transformations:

static analysis workflow

As you can see in the diagram (go ahead, zoom it!), the static analyzers feed on the output of these stages. To be able to better understand the static analysis techniques, let’s look at each of these steps in some more detail:

Scanning

The first thing that a compiler does when trying to understand a piece of code is to break it down into smaller chunks, also known as tokens. Tokens are akin to what words are in a language.

A token might consist of either a single character, like (, or literals (like integers, strings, e.g., 7Bob, etc.), or reserved keywords of that language (e.g, def in Python). Characters which do not contribute towards the semantics of a program, like trailing whitespace, comments, etc. are often discarded by the scanner.

Python provides the tokenize module in its standard library to let you play around with tokens:

Python

1

import io

2

import tokenize

3

4

code = b"color = input('Enter your favourite color: ')"

5

6

for token in tokenize.tokenize(io.BytesIO(code).readline):

7

    print(token)

Python

1

TokenInfo(type=62 (ENCODING),  string='utf-8')

2

TokenInfo(type=1  (NAME),      string='color')

3

TokenInfo(type=54 (OP),        string='=')

4

TokenInfo(type=1  (NAME),      string='input')

5

TokenInfo(type=54 (OP),        string='(')

6

TokenInfo(type=3  (STRING),    string="'Enter your favourite color: '")

7

TokenInfo(type=54 (OP),        string=')')

8

TokenInfo(type=4  (NEWLINE),   string='')

9

TokenInfo(type=0  (ENDMARKER), string='')

(Note that for the sake of readability, I’ve omitted a few columns from the result above — metadata like starting index, ending index, a copy of the line on which a token occurs, etc.)

#code quality #code review #static analysis #static code analysis #code analysis #static analysis tools #code review tips #static code analyzer #static code analysis tool #static analyzer

Jerad  Bailey

Jerad Bailey

1598891580

Google Reveals "What is being Transferred” in Transfer Learning

Recently, researchers from Google proposed the solution of a very fundamental question in the machine learning community — What is being transferred in Transfer Learning? They explained various tools and analyses to address the fundamental question.

The ability to transfer the domain knowledge of one machine in which it is trained on to another where the data is usually scarce is one of the desired capabilities for machines. Researchers around the globe have been using transfer learning in various deep learning applications, including object detection, image classification, medical imaging tasks, among others.

#developers corner #learn transfer learning #machine learning #transfer learning #transfer learning methods #transfer learning resources

Justice  Reilly

Justice Reilly

1595294400

Deploying Machine learning models using Flask on your website

Understanding of Machine Learning using Python (sklearn)
Basics of Flask
Basics of HTML,CSS

#machine-learning #deployment #ml-model-deployment #flask #deploying