Skip to content


Folders and files

Last commit message
Last commit date

Latest commit



10 Commits

Repository files navigation

freeCodeCamp JAMstack examples

6 - Client-side rendering targeted API content

This repo holds one of a series of examples of JAMstack sites from a freeCodeCamp video. The video, "Introduction to JAMstack" is available to view for free on freeCodeCamp.

About this example

The last of our 6 code examples, this example builds on example 5 to use progressive enhancement to add weather data to the page with client-side rendering.

Here in the video, we add JavaScript to use access the user's location via the Geolocation API, and then request local weather data from which is then added to the page.


This code will make use of a browser API which can only be used when accessed over a secure HTTPS connection. To configure your local development environment to serve requests over HTTPS you'll need to first create a certificate for local testing, and ensure that you rlocal machine trusts that cert. The confioguration of browsersync in Eleventy is shown in the video

By default, sites on Netlify are automatically configured with a free certifcate provided by LetsEncrypt, so no additional steps will be reuired in the CI/CD and hosting environments.

Local development

To work on this example locally, you can clone the repository and start editing, although there are a few pre-requisites:

# clone the repo
git clone

# move into the working directory and install dependencies
cd fcc-6-client-side-api
npm install

# build and start the local development server
npm start

# just run the build
npm run build

Clone and deploy

If you wanted to quickly clone this repository and deploy it as a new site on Netlify you can click the button below for a rapid start. This will give you a ready-made CI/CD pipeline linked to your git commits.

Deploy to Netlify

Watch the video

For a better understanding of what this example is and why it exists, you can jump directly into the video at the point we are discussing this example

JAMstack video

Other code examples in this series

More JAMstack resources to explore


No description, website, or topics provided.






No releases published


No packages published