Forem: Venkata Naga Sai Nivas Mangu

Jamstack!

Venkata Naga Sai Nivas Mangu — Sun, 06 Feb 2022 00:00:00 +0000

I came to know about Jamstack through Netlify, back when I didn’t know anything about web development (except that HTML is easy and CSS is scary). I started discovering the architecture recently and I must say, I’m having a lot of fun! I wanted to document what I’ve been learning here with the hope that it might help someone who is on the same path as I am.

So, let’s get started!

What is Jamstack?

Jamstack is an architecture designed to make the web faster, more secure, and easier to scale. It builds on many of the tools and workflows which developers love, and which bring maximum productivity.

Simply put, it is a practice of making websites a certain way that is simpler than the traditional monolithic way. Imagine you are building a fullstack application. The typical approach to this problem would be to build the front-end and back-end as one application, connect it to a database, host the backend to run on a server and manage these servers. This approach sounds complicated.

Now, consider Jamstack.

It uses the principles of pre-rendering and decoupling to increase simplicity and help deliver faster more secure web applications. This means you don’t have to worry about maintaining servers, scaling and other back-end stuff since the CDN already took care of it.

At a high level, Jamstack consists of the following components:

JavaScript

JavaScript allows us to provide all of the dynamic and interactive parts of our application and make it more than just markup. It also allows us to organize our code, access necessary APIs and increase the functionality of our web app.

APIs

This layer powers up our application. Using APIs, we can fetch data from an outside source and hydrate our pre-built markup. This opens up endless possibilities for creating applications with the Jamstack architecture.

Markup

Markup can be the HTML you wrote or the JavaScript that compiles to HTML on the frontend. Markup is what the user ends up seeing on your web application.

For a web application to be considered a Jamstack app, the HTML needs to be served statically.

How Jamstack works

We build pages using basic markup like HTML or something more functional like JavaScript.
If we used JavaScript of a JS framework, we use a build tool like webpack to make these pages deployment ready i.e., convert the JS to HTML on the server.
These deployment-ready HTML files can be served from a CDN (like Netlify or Vercel) which cache the data as needed and deliver these pages all over the world.

Comparison to traditional stacks

In traditional monolithic stacks like MEAN or MERN, the JavaScript framework used i.e., Angular and React are client-side rendered. This means when the site is served, the JavaScript loads and manipulates the Document Object Model(DOM) when the site is accessed by the user. This results in a slower load time.

In Jamstack, the CDN builds the delivered JavaScript files and delivers HTML files to the user which results in a comparatively faster load time. Even for a dynamic web application, all the non-dynamic parts are pre-rendered and the dynamic elements are then hydrated into the site on the client side.

Why Jamstack?

Security

On a Jamstack site, there aren’t many moving parts when it is delivered. Everything is rendered into HTML files which makes some common attacks like SQL injection impossible.

( Well, you CAN have a DB if you want to. You can have it in the API layer of Jamstack by using something like Hasura )

Scale

In the case of monolithic stacks, the application needs logic on the server to cache the most accessed content. For Jamstack sites, the CDN takes care of caching entirely.

With Jamstack sites, everything can be cached in a content delivery network. With simpler deployments, built-in redundancy and incredible load capacity.

Performance

Since the pages are served pre-rendered, there will be a noticeable increase in performance. With all the pages already available on a CDN close to the user’s location, load times will also be decreased.

Maintainability

You won’t have any maintenance tasks on the server side since it is taken care of by the CDN. The biggest maintenance issue you might face is to update your packages which can be very easily solved with a tool like Snyk since it makes PRs with the required changes. You just have to merge the PR and you are good to go. This gives the developer more time to concentrate on the application.

Portability

The entire site can be stored in a single git repository. You can import into a CDN of your choice and you are good to go. This makes switching CDNs easier.

Developer Experience

Jamstack sites can be built with just HTML, JavaScript, any of the many JS frameworks, or a simple static site generator like Hugo, Jekyll and many more. These are existing technologies many developers are familiar with and the Jamstack architecture is basically how most developers build websites. Hence, the development process will be efficient and effective.

Hosting options

All you need to host a Jamstack site is a Content Delivery Network (CDN). CDN eliminates the need for you to do the deployment tasks like maintaining and scaling servers, setting up CI/CD, configuring the CDN. It allows you to write code and not worry about the deployment process. Here are the two popular options you should consider:

Netlify

Netlify is one of the most famous content delivery networks out there and has a lot of interesting features. It allows you to host your website on their CDN and assign a Netlify subdomain for free. You can write Lambda functions to run during build time if necessary, configure Netlify Forms for collecting data, see the analytics of your website too! All in one place. They have a generous free tier called “Starter” which covers automated builds with each push to your site’s repository, live site previews, instant rollbacks, 1 concurrent build, 100 GB bandwidth and 300 build minutes per month.

Know more at Netlify.

Vercel

Vercel is also one of the most famous CDNs and it has similar features to Netlify in most cases. They also have a generous free tier called “Hobby” which gives you 100 GB bandwidth, serverless functions, 1 concurrent build, 6000 minutes of build time per month and free analytics.

Know more at Vercel.

Resources

Update wallpaper previews on each push

Venkata Naga Sai Nivas Mangu — Wed, 01 Dec 2021 02:24:40 +0000

I maintain a wallpaper collection repository nordic-wallpapers and I have a wallpaper-preview.md in that repo to preview all the available wallpapers. I used to have a script that needed to be run before each commit to update the wallpapers. I shifted that to GitHub Actions because I thought all wallpaper enthusiasts might not be able to run the scripts.

My Workflow

These are the steps involved in my workflow (not including cloning the repository into the system:

Get a list of all the available wallpapers
- This uses the ls command and redirects the output of that command into the wallpaper-preview.md file wiping the file clean in the process to avoid duplicate previews.
Add the markdown syntax for previewing images around the file name
- This step is executed as a multi-line script in the workflow.
- The first step adds the ![]( in-front of each line using the sed tool.
- The second step adds the ) at the end of each line using the sed tool.
Add a heading and an empty line between the heading and the wallpapers
- This adds the page heading # Wallpapers in this repository using the sed tool.
- To add a new line, I used the sed tool to search for "# Wallpapers" and add an empty line in the immediately next line.
Commit and push changes to the repository
- I used EndBug/add-and-commit to commit the changes to the repository and ad-m/github-push-action to push the changes.

EndBug / add-and-commit

Add & commit files from a path directly from GitHub Actions

Add & Commit

You can use this GitHub Action to commit changes made in your workflow run directly to your repo: for example, you use it to lint your code, update documentation, commit updated builds, etc....

This is heavily inspired by git-auto-commit-action (by Stefan Zweifel): that action automatically detects changed files and commits them. While this is useful for most situations, this doesn't commit untracked files and can sometimes commit unintended changes (such as package-lock.json or similar, that may have happened during previous steps).
This action lets you choose the path that you want to use when adding & committing changes so that it works as you would normally do using git on your machine.

Inputs

Add a step like this to your workflow:

- uses: EndBug/add-and-commit@v7 # You can change this to use a specific version.
  with
    # The arguments for the `git add` command (see

…

View on GitHub

ad-m / github-push-action

GitHub actions to push back to repository eg. updated code

GitHub Action for GitHub Push

The GitHub Actions for pushing to GitHub repository local changes authorizing using GitHub token.

With ease:

update new code placed in the repository, e.g. by running a linter on it,
track changes in script results using Git as archive,
publish page using GitHub-Pages,
mirror changes to a separate repository.

Usage

Example Workflow file

An example workflow to authenticate with GitHub Platform:

jobs
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
      with:
        persist-credentials: false # otherwise, the token used is the GITHUB_TOKEN, instead of your personal access token.
        fetch-depth: 0 # otherwise, there would be errors pushing refs to the destination repository.
    - name: Create local changes
      run: |
        ...
    - name: Commit files
      run: |
        git config --local user.email "41898282+github-actions[bot]@users.noreply.github.com"
        git config --local user.name "github-actions[bot]"
        git commit -m "Add changes" -a
    - name:

…

View on GitHub

Submission Category:

Wacky Wildcards

Yaml File

Additional Resources / Info

Link to the repository:

linuxdotexe / nordic-wallpapers

A collection of wallpapers that go well with the rices inspired by the Nord Colorscheme

Website:

I made a website using gatsby to preview all the wallpapers more easily. Here is a link for the website.

The website is also open source. I am new to web development and can use all the help I can get from the community. PRs are very welcome.

linuxdotexe / nordic-wallpapers-website

A Gatsby website that uses the GitHub API to easily preview all the wallpapers in my nordic-wallpapers repository,

This is my first time sharing a post here. Very glad to be on dev.to :)