Today’s post will demonstrate how to have a script automatically run as a cron job on your Mac computer using crontab.
We will demonstrate by automating a simple script to add the word “hello” onto a new line every minute and showing how we can log out stdout and stderr to a file after each run for our sake.
Getting started
We will create a .scripts folder at the root using to store our scripts to be used by crontab and create a file hello.sh to store our script:
Inside of the file hello.sh, add the following:
The above does the…
LocalStack provides an easy-to-use test/mocking framework for developing Cloud applications. In today’s post, we’re going to have a quick look at setting up LocalStack locally to work with their free tier AWS emulated products.
In particular, today’s post will have a quick look at emulating S3 buckets for local development.
Prerequisites
Before getting started, it is required that you have the following on your machine:
- Python (both Python 2.x and 3.x supported)
- pip (python package manager)
- Docker
- AWS CLI (for interacting with LocalStack after installation)
Installing LocalStack
Following the instructions on their README, we can use pip to install the package.
Running LocalStack
Once installed, we can get everything up by running localstack start. You will get feedback in the terminal that a number of services are started and finally get the service list with the ports they are running on. By default, these services will start on port 4566. Easy peasy! …
In this post, we will set up DynamoDB for local development and learn how to use the provided UI to explore the data we work with.
Getting started
Create a new project directory to work within.
Head to the AWS documentation page and download a version of DynamoDB into the project directory.
I will download the Oregon zip file.
Ensure to unzip the folder into the project directory. Within that folder, I am going to move the DynamoDBLocal_lib and DynamoDBLocal.jar file up to the project directory root (you can remove what is left of the folder after if you would like).
Now we can start the DB by running java -Djava.library.path=./DynamoDBLocal_lib -jar DynamoDBLocal.jar …
A design system will make you more productive and help you build new features and components faster
When building out a UI component library for my own work, I ran into a couple of pain points while searching for how to create a simple workflow that “just works.”
Most tutorials I saw for TypeScript component libraries made use of build tools (which at times caused headaches) and my current job took the opposite extreme of publishing the UI component library as TypeScript and relying on individual projects to transpile it to JavaScript directly from the library itself (if you are from my company… you didn’t read anything).
This tutorial will show you how to set up a create-react-app project to create components with TypeScript + Storybook and then demo that same design system being used as a package in another React project. …
Add your own simple authentication to websites using Next.js Auth
Password protection for deploys can be a costly payment when hosting websites, particularly when you want to protect branch deployments.
In today’s tutorial, I am going to show you how you can set up your own simple authentication protection on these branches using Next.js 10 and Next.js Auth.
Getting Started
Setting up the API
In pages/api/auth/[...nextauth].js, add the following:
We are going to use NEXTAUTH_USERNAME and NEXTAUTH_PASSWORD to set up our basic environment variables.
The above will make a comparison, and if that comparison is correct, we’ll return the user object which will just be a name of admin and ID of 1.
Setting up a private page
In pages/private.js, add the…
Next.js released an optimised image component that optimizes how images load on Next.js websites. In their own words: “Images are always rendered in such a way as to avoid prevent Cumulative Layout Shift, a Core Web Vital that Google is going to use in search ranking.” — Next.js image docs
In this post, we’re going to explore and play around with this new component to see it in action.
Getting Started
We will use create-next-app build out the project:
Selecting an image
For this particularly exploration, I went to Unsplash and chose an image to my taste.
In this case, I went with Florian Olivo’s Jellyfish image. …
In this post, we will be diving into one of Next.js 10’s new advanced features in internationalised routing and how we can use this with react-intl.
Getting started
Create a new Next.js 10 project by running npx create-next-app i18n-example to create a new project name i18n-example.
We will run some other commands to set things up:
For installing
react-intlI've used--legacy-peer-depsas there was a peer dependency ofreact@^16.3.0and I was running npm v7.
Now that we have some files going, let’s get started with some basic content!
Setting up Next.js i18n
Follow on from the docs on getting started, we need to update next.config.js: …
Over my previous posts, I have been exploring some of the neat things about Next.js 10 and using Vercel as a host.
Today we are going to show how you can build out your next store or start financing your own dreams.
We will use a Stripe + Nextjs starter template, upgrade React to version 17, TypeScript to version 4 and deploy the final working application to Vercel via the CLI.
I tell you what, I sure am ready to leave me 9–5 job.
Prerequisites and requirements
Getting started
Thanks to create-next-app, we already have an example that we can get started with and explore! …
Add some datapoints to your new Vercel Analytics setup with GTMetrix and explore an overview of the results
Vercel announced their new analytics feature at their recent Next.js conference and, great news— it’s now live to try out!
In my most recent post, I deployed a simple Next.js 10 application to Vercel. Now it’s time to test out some of the new features!
In this post, we’ll cover how to enable Vercel Analytics on a Vercel hosted Next.js 10 project, then use GTMetrix to help send some request from around the globe (using throttling for various speeds) that our analytics can collect (on top of any other potential visits to the site).
The “What” of Vercel Analytics
A great way to understand what is on offer is to read through Vercel’s analytics overview. …
Back in the day when Vercel was Zeit and the Vercel CLI was simply now, I was blown away by the simplicity of it all. You could, at the time, deploy contains and I made that count during that golden Bitcoin phase of 2018 (yep, what a throwback).
After the recent Next.js Conference and announcement of Next.js 10, I have been very tempted to make some changes to how I deploy my applications.
I am still working through it, but as it currently stands, I am not into the idea of fighting against the grain to get Lambda functions working with Next.js …
About
