DEV Community: Cindy Le

3 Healthy Hobbies for Software Developers

Cindy Le — Sat, 24 Jun 2023 00:50:52 +0000

Software development is an intellectually demanding field that often requires long hours of focused work in front of a computer screen. As a software developer, it's crucial to find balance and maintain a healthy lifestyle. Engaging in physical hobbies not only provides a break from coding but also offers numerous benefits for both mind and body. In this article, we will explore two hobbies - Brazilian Jiu-Jitsu (BJJ), rock climbing, running/jogging. While there are certainly other hobbies that may be equally fulfilling, I am focusing solely on these particular activities due to my firsthand involvement and the positive impact they have had on my life.

1. Brazilian Jiu-Jitsu (BJJ)

Software developing and BJJ might seem worlds apart, but they share remarkable similarities. Just as software developers navigate through complex code, BJJ practitioners navigate intricate techniques and strategies on the mat. Both activities require problem-solving skills, adaptability, and a keen eye for details.

BJJ provides an outlet for software developers to exercise their analytical minds in a physical setting. It promotes mental agility, patience, and the ability to anticipate and respond to rapidly changing circumstances--qualities that are equally valuable in the coding world. Additionally, BJJ fosters resilience, as developers learn to embrace challenges, adapt to setbacks, and persist in the face of difficulties.

Pair programming is a collaborative technique used in software development where two programmers work together on the same codebase. Similarly, BJJ emphasizes the importance of training with partners to improve skills and techniques.

In pair programming, developers take turns as the "driver" (actively writing code) and the "navigator" (providing feedback, thinking strategically, and catching errors). This dynamic mirrors the interaction between training partners in BJJ. One person assumes the role of the "attacker" while the other plays the "defender", allowing for mutual learning, skill refinement, and the discovery of new approaches.

2. Rock Climbing

Rock climbing is a hobby that can perfectly complement the analytical and problem-solving nature of software development. Scaling a challenging rock face demands mental focus, strategic thinking, and the ability to break down complex problems into manageable steps--skills that software developers are well-versed in.

Both rock climbing and coding require attention to detail, precise execution, and the ability to plan ahead. Climbing teachers developers the importance of calculated risks, as they learn to evaluate different routes and anticipate potential obstacles. Moreover, conquering a difficult climb provides a tremendous sense of accomplishment, similar to the satisfaction of successfully completing a challenging coding project.

Belaying with a Partner

Belaying is a fundamental aspect of rock climbing that involves one person managing the safety of another person. The belayer controls the rope and provides support by keeping it taut, ensuring the climber's safety in case of a fall.

Similarly, software development often involves teamwork and collaboration. Developers frequently work in pairs or teams, where one person can serve as a "belaying" counterpart. This involves reviewing code, identifying potential issues, and offering guidance and support to ensure the overall quality and safety of the project.

Just as a belayer provides a safety net for the climber, a software development partner offers a fresh perspective, acts as a sounding board, and provides valuable feedback during the development process. Both in climbing and software development, the collaboration between individuals fosters trust, enhances problem-solving, and promotes a shared responsibility for the successful outcome.

Lead Climbing

Lead climbing is an advanced technique in rock climbing where the climber ascends while attaching the rope to anchors along the route. The lead climber takes on the responsibility of not only climbing but also securing the rope and protecting against potential falls.
Similarly, in software development, taking on a lead role involves assuming responsibility for the project's overall direction, decision-making, and coordination. The lead developer guides the team, sets priorities, and ensures that the project progresses smoothly and meets the desired objectives.

Lead climbers and lead developers share common characteristics such as decisiveness, risk management, and the ability to adapt to changing situations. Both roles require individuals to make critical judgments, anticipate challenges, and provide support and guidance to their teammates.

Additionally, lead climbing and software development demand a strong sense of self-reliance and confidence. The lead climber must trust their skills and judgment to navigate challenging routes, while the lead developer must make crucial technical and managerial decisions. Both roles offer opportunities for personal growth and the development of leadership qualities.

Rock climbing and software development share similarities through the concepts of belaying with a partner and lead climbing. Belaying with a partner mirrors the collaborative nature of software development, where individuals support and ensure the safety of their teammates. Lead climbing and lead development involve taking on responsibility, making critical decisions, and guiding others toward success. Recognizing these parallels can provide valuable insights for rock climbers and software developers alike, fostering effective teamwork, risk management, and personal growth in both domains.

3. Running/Jogging

Running or jogging is a simple yet powerful physical hobby that complements the sedentary nature of software development. Just as developers strive for continuous improvement in their coding skills, runners aim to enhance their endurance and set new personal records.

Running and software development share a common thread—both require discipline, commitment, and the ability to set goals. Developers often break down complex projects into smaller, manageable tasks, and runners do the same by setting incremental milestones to achieve their fitness objectives. Additionally, running/jogging serves as an effective stress reliever, helping developers recharge their minds and maintain a healthy work-life balance.

Conclusion

Engaging in physical activities like Brazilian Jiu-Jitsu, rock climbing, and running/jogging can significantly benefit software developers. These hobbies offer opportunities to strengthen physical fitness, enhance mental focus, and provide a much-needed break from the coding world. The shared characteristics of these activities and software development, such as problem-solving, adaptability, and goal setting, make them a perfect match for developers looking to improve their overall well-being and achieve a healthy work-life balance. So, why wait? Step away from the screen and embark on a new adventure today!

Configure third-party domain name and HTTPS for CloudFront distribution

Cindy Le — Tue, 09 Aug 2022 16:03:00 +0000

Part 3/n of the Cloud Resume Challenge

Chunk 1: Building the frontend

After you have successfully used CloudFront to serve the Next.js website hosted on Amazon S3, you'll notice that the website https://d1ij0wngzhbeyc.cloudfront.net/ is using HTTPS but what if you wanted to use another domain name like https://cindyle.dev.

Stack:

Next.js
Amazon S3
Amazon CloudFront
Third-party Domain (ie Namecheap)
AWS Certificate Manager
Route 53

Setting up the Namecheap DNS

You can purchase a domain name from Route 53, but while I was playing around with this Chunk, I bought a domain name from Namecheap.

Purchase a domain name from Namecheap or any other domain registrar
To add an alternative domain name (CNAME) to a CloudFront distribution, you must attach a trusted certificate that validates your authorization to use the domain name.
Head over to the AWS Certificate Manager console and Request a certificate
- Certificate type: Request a public certificate
- Fully qualified domain name: cindyle.dev
- Select validation method: DNS validation - recommended
After you send the request, you should see that the Status says Pending Validation
Click on the Certificate ID, and you should see the CNAME name and CNAME value
- CNAME name: _916aeebf4a4ee9545320d30853000009.cindyle.dev.
- CNAME value: _f3e8e0dff0089b1eb52619f87dxxxxx8.mqzgcdqkwq.acm-validations.aws.
Over in your Namecheap console, in the Domain tab, make sure you have
- Nameservers: Namecheap Basic DNS
Go to the Advanced DNS tab, select ADD NEW RECORD
- Type: CNAME Record
- Host: _916aeebf4a4ee9545320d30853000009 (NOTE: You only need the beginning part, not the .cindyle.dev.
- Value: _f3e8e0dff0089b1eb52619f87dxxxxx8.mqzgcdqkwq.acm-validations.aws.
- TTL: 5 min
In the AWS Certificate Manager, wait for the Status to go from Pending validation to Success. This could take hours but setting the TTL to 5 minutes should only take 10-15 minutes.
Once the certificate is validated, you don't need to keep the record anymore on Namecheap, so delete it.

Add an Alternative domain name (CNAME) to CloudFront

In the Amazon CloudFront console, select the distribution you created previously
Click on Edit and under Alternative domain name (CNAME) - optional, click on Add item
- Alternative domain name: cindyle.dev
- Custom SSL certificate: cindyle.dev (3ff2abcd-12ac-1234-a000-9jklfdsirba) from the dropdown menu
Save the changes and wait for the distribution to finish deploying

Use Route 53 as the DNS Service to manage your DNS records

In the Route 53 Console, create a new Hosted Zone
- Domain name: cindyle.dev
- Type: Public hosted zone
Click on the Hosted zone details, and you should see four servers listed underneath Name servers
- ns-1234.awsdns-35.org
- ns-123.awsdns-30.com
- ns-789.awsdns-09.net
- ns-7890.awsdns-06.co.uk
Over in the Namecheap console, in the Domain tab, make sure you have Nameserver: Custom DNS and enter the four name servers from your Route 53 Hosted Zone details
Back in the Route 53 console, create a new Record
- Record name: cindyle.dev (keep blank to create a record for the root domain)
- Type: A - Routes traffic to an IPv4 address and some AWS resources
- Alias (turn on)
- Route traffic to: Alias to CloudFront distribution
- Dropdown: d1ij0wngzhbeyc.cloudfront.net
Create another new Record
- Record name: cindyle.dev (keep blank to create a record for the root domain)
- Type: AAAA - Routes traffic to an IPv6 address and some AWS resources
- Alias (turn on)
- Route traffic to: Alias to CloudFront distribution
- Dropdown: d1ij0wngzhbeyc.cloudfront.net
You should see that https://cindyle.dev is live

Use CloudFront to serve a static website hosted on Amazon S3

Cindy Le — Mon, 08 Aug 2022 19:38:00 +0000

Part 2/n of the Cloud Resume Challenge

Chunk 1: Building the frontend

After configuring the Next.js website on S3, you'll notice that the website endpoint http://cindy-crc.s3-website-us-east-1.amazonaws.com/ is HTTP. This is because the website URL should use HTTPS for security, and this is where we'll need to use CloudFront.

Stack:

Next.js
Amazon S3
Amazon CloudFront

As you'll remember from the previous blog, you'll need to remove any Bucket policy attached to the S3 bucket and Block all public access to continue with this.

We will be using a REST API endpoint as the origin, with access restricted by an Origin Access Identity (OAI).

Create the CloudFront Distribution

I mostly followed Use CloudFront to serve a static website hosted on Amazon S3

In the Amazon CloudFront console, choose Create distribution
- Origin domain: cindy-crc.s3.us-east-1.amazonaws.com (from the dropdown menu)
- Name: cindy-crc.s3.us-east-1.amazonaws.com (should be autofilled)
- S3 bucket access: Yes use OAI (bucket can restrict access to only CloudFront)
- For Origin access identity, select Create new OAI and choose the newly created OAI
- Bucket policy: Yes, update the bucket policy
- Default root object - optional: index.html
Click Create distribution and wait for the Last modified status to go from Deploying to Date. This may take ~5 minutes
You should be able to visit the Distribution domain name link https://d1ij0wngzhbeyc.cloudfront.net and see the resume website

Troubleshooting

If you're getting an Access Denied error, it's probably due to Bucket policy. You should be blocking all public access and only allowing your CloudFront Distribution to access your S3. The S3 bucket policy should look like

{
    "Version": "2008-10-17",
    "Id": "PolicyForCloudFrontPrivateContent",
    "Statement": [
        {
            "Sid": "1",
            "Effect": "Allow",
            "Principal": {
-                "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity Distribution-ID"
+                "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity E392Q20ZNZ7N4X"
            },
            "Action": "s3:GetObject",
-            "Resource": "arn:aws:s3:::Bucket-Name/*"
+            "Resource": "arn:aws:s3:::cindy-crc/*"
        }
    ]
}

Configure a static Next.js website on Amazon S3

Cindy Le — Fri, 05 Aug 2022 19:22:00 +0000

This is the start of a multi-blog series as I make my way through the Cloud Resume Challenge. As advertised, the Cloud Resume Challenge is a popular 16-step project that takes you from certified to hired in cloud.

I already have a job and have passed two AWS exams. Still, a couple of months ago, I ventured off to see what's out there, and oh boy, the number of cloud questions I could not answer at the interviews made me really think, "I don't know my stuff. I owe it to the people involved to do a really good job here". The worst part is I didn't blindly send out resumes and hope these companies would call me; I reached out to my connections and asked them to put my name out there. Some of which returned to me with opportunities that have not been made public yet. I underperformed in these interviews, but I now know what these companies are looking for.

Anyway, I don't want to ramble on about how I replayed these interviews in my head because this is about what I'm going to do moving forward to make myself a better candidate, so whenever I decide to venture off again, I'll be prepared!

Chunk 1: Building the frontend

The minimum requirement for this part of Chunk 1 is to have an HTML page with some CSS and serve the files in an Amazon S3 bucket.

It sounds simple enough, but since I love frontend development, so I decided to add the Developer Mod. I'll build my website using a JavaScript framework instead of just HTML and CSS.

Stack:

Next.js
Amazon S3

Getting Started with Next.js

I made a GitHub repo here if you wanna see what I have so far. For this part of Chunk 1, you really just need to have a Next.js app, then build and export it.

Create a new Next.js app using create-next-app. We have been using pnpm on Telescope, and I simply cannot go back to npm.

pnpm create next-app

Run pnpm run dev to start the development server on http://localhost:3000 and view your initial Next.js application.
Update the build script in the package.json file.

  "scripts": {
    ...
-    "build": "next build",
+    "build": "next build && next export",
    ...
  },

Run pnpm run build will generate an out directory with everything you need for your static website.

cloud-resume-challenge
  ├── .next
  ├── node_modules
+ ├── out
+ │   ├── _next
+ │   ├── favicon.ico
+ │   ├── index.html
+ │   └── vercel.svg
  ├── pages
  ├── public
  ├── styles
  ├── .eslintrc.json
  ├── .gitignore
  ├── next.config.js
  ├── package.json
  ├── pnpm-lock.yaml
  └── README.md

Host the Next.js website on Amazon S3

I mostly followed Tutorial: Configuring a static website on Amazon S3 for this part. However, to proceed with the CloudFront Distribution in a later blog post, you will need to Block all public access for the S3 bucket.

In the Amazon S3 console, choose Create bucket and enter the following:
- Bucket name: cindy-crc
- AWS Region: US East (N. Virginia) us-east-1
- Uncheck Block all public access
- Bucket Versioning: Enable
Click on Create
Once the bucket as been created, upload everything from your out folder into the bucket
Click on your newly created bucket from the list and go to the Properties tab
Go all the way to the bottom, under Static website hosting and Enable Static website hosting
Specify the Index document as index.html
Save your changes, and you should be able to see a Bucket website endpoint like http://cindy-crc.s3-website-us-east-1.amazonaws.com/
In the Permissions tab of your bucket, add a new Bucket policy and save the changes

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
-                "arn:aws:s3:::Bucket-Name/*"
+                "arn:aws:s3:::cindy-crc/*"
            ]
        }
    ]
}

Test your website endpoint by visiting http://cindy-crc.s3-website-us-east-1.amazonaws.com/
You can stop here if you're satisfied with having a static website on Amazon S3, but for the purpose of the Cloud Resume Challenge, which will move on to using CloudFront, you need to remove the Bucket policy and Block all public access again.

Remote Development with Visual Studio Code on AWS EC2

Cindy Le — Sun, 13 Mar 2022 23:20:39 +0000

The following will show you how to create and connect to a virtual machine (VM) on AWS using the Visual Studio Code Remote - SSH extension. You'll be able to run Telescope in development on a remote machine with VS Code just like if the source code was local. This documentation is based on Remote development over SSH

Telescope is a tool for tracking blogs around Seneca's open source develop. The application itself has many microservices that use Docker containers and are composed together using Docker-Compose. You can find the GitHub repo here

Telescope Tech Stack

Next.js
Material UI
Node.js
Elasticsearch
Redis
Traefik
Nginx
Docker
Supabase
Jest

Telescope Microservices

Dependency Discovery
Feed Discovery
Image
Parser
Planet
Posts
Search
SSO
Status
Users

Disclaimer: This guide is specifically designed for students who are enrolled in AWS Academy so the services and technologies used adhere by the AWS Academy Learner Lab - Foundation Services restrictions.

Note: If you are not enrolled in AWS Academy, please note that the EC2 instance used in this guide is not within AWS's Free-Tier so please see EC2 Pricing to see if you're comfortable with these costs.

Running Docker in development is CPU intensive so these are the EC2 instances I recommend:

Minimum: t2.large (8 GiB RAM + 2 vCPU)
Recommended: r5.large (16 GiB RAM + 2 vCPU)

Summary of Pricing:

t2.large costs \$0.0928 per hour
r5.large costs \$0.126 per hour
20GB Amazon Elastic Block Storage (EBS) costs \$1 per month
Elastic IP Address

Cost Estimate Per Month:

	t2.large	r5.large
EC2 Instance cost per hour	\$0.0928	\$0.126
Elastic IP Address cost per hour	\$0.005	\$0.005
Hours per day	6	6
Days per month	30	30
Sub-total	\$17.60	\$23.58
20GB EBS Volume	\$0.5	\$0.5
Total	\$18.10	\$24.08

Prerequisites:

Download and install Visual Studio Code
Install the Remote - SSH extension
AWS Academy Account. You will need your AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY and your SSH key (.pem file)

Create your virtual machine (AWS EC2):

In the upper-right hand corner of your AWS Management Console, select a region. In this tutorial, US East (N. Virginia) us-east-1 as your Region

In the search bar at the top, type in ec2 and click on EC2 to go to the EC2 Dashboard
Click on Launch instances

Step 1 - Choose an Amazon Machine Image (AMI): Amazon Linux 2 AMI (HVM) - Kernel 5.10, SSD Volume Type
Step 2 - Choose an Instance Type: r5.large
Step 3 - Configure Instance Details:
- IAM role: LabInstanceProfile
- Copy and paste the aws-userdata.sh script into the User data field
Step 4 - Add Storage: Change the Size (GiB) from 8 to 20
Step 5 - Add Tags: No tags are needed. Proceed to the next step.
Step 6 - Configure Security Group:
- Assign a security group: Create a new security group
- Security group name: telescope-sg
- Add the following Rules:
- SSH for your IP address
- Type: SSH
- Protocol: TCP
- Port Range: 22
- Source: My IP (When you select this from the dropdown menu, it will automatically put <your-ip-address>/32 in the field. For example 76.72.29.150/32)
- Open port 3000 for your IP address
- Type: Custom TCP
- Protocol: TCP
- Port Range: 3000
- Source: My IP
- Open port 8000 for your IP address
- Type: Custom TCP
- Protocol: TCP
- Port Range: 8000
- Source: My IP
- Open port 8000 for your IP address
- Type: Custom TCP
- Protocol: TCP
- Port Range: 8443
- Source: My IP

Note: My IP is the IP address of your (home) network. Your IP address will likely change if you manually reboot your router or a power outage occurs and your router reboots itself. If you know your IP address has changed, please update the Security Group on AWS.

Click on Review and Launch. You will get a warning: Your instance configuration is not eligible for the free usage tier, this is because we're using a r5.large instance type.
Click on Launch
In the pop-up, choose Choose an existing key pair

Select a key pair: vockey

Click on Launch Instances

It will take a few minutes for AWS to launch your new EC2 instance.

Once your EC2 instance has been launched, you should name it something meaningful like Telescope-Dev and you can find your EC2 instance's public IPv4 address. Make note of this IP address.

Associate an Elastic IP address to your EC2 instance

In the left-hand pane, go to Network & Security > Elastic IPs
Click on Allocate Elastic IP address button

Network Border Group: us-east-1
Public IPv4 address pool: Amazon'pool of IPv4 addresses and click on Allocate

Select the newly created Elastic IP address. In the Actions dropdown menu, select Associate Elastic IP address
Select the EC2 instance you've created in the previous section Telescope-Dev and click on Associate
In the left-hand pane, go to Instances, select Telescope-Dev and you should be able to see that your Elastic IP address has been associated to your EC2 instance

Connect using SSH

Obtain your AWS Credentials and SSH Key

You can find your AWS credentials under AWS Details of your AWS Academy account
Download the SSH key (labsuser.pem) file to your local computer. Note the file location
Open up Visual Studio Code
Click on the Open a Remote Window icon at the bottom left-hand corner of the window
Select Connect to Host
Select Configure SSH Hosts...
This will open up a config file in Visual Studio Code. If you're using Windows, it'll be something like C:/Users/cindy/.ssh/config
Edit the config file with the following:



Host aws-e2
    HostName <your-ec2-ip-address>
    User ec2-user
    IdentityFile ~/.ssh/labsuser.pem

Save the file
When you click on the Open a Remote Window icon at the bottom left-hand corner again and choose Connect to Host, you will see aws-ec2 listed.
Select aws-ec2 and a new Visual Studio Code window will open.
You will see "aws-ec2" has fingerprint "SHA256:xxx" and Are you sure you want to continue?. Click on Continue. Then You should see that you're connected!

Setting up your AWS credentials

Open up a terminal in Visual Studio Code (hotkey on Windows: Ctrl + backtick). You should see that you're logged in as something like [ec2-user@ip-172-31-4-0 ~]$.
Verify the AWS CLI installation



$ aws --version

aws-cli/2.3.0 Python/3.8.8 Linux/5.4.0-1045-aws exe/x86_64.ubuntu.20 prompt/off

Configure your AWS credentials



aws configure

Currently, everything is set as None so enter your credentials for your AWS IAM user.



AWS Access Key ID [None]: ****************764G
AWS Secret Access Key [None]: ****************qBbe
Default region name [None]: us-east-1
Default output format [None]:

Verify that everything in the aws-userdata.sh script was installed correctly

Check Docker: docker info
Check docker-compose version: docker-compose --version
Check Node.js version: node -v
Check pnpm version: pnpm -v
Check git version: git --version

Authenticate as your GitHub account with the GitHub CLI

Run gh auth login
What account do you want to log into? GitHub.com
What is your preferred protocol for Git operations? SSH
Generate a new SSH key to add to your GitHub account? Yes
Enter a passphase for your new SSH key (Optional): ********
How would you like to authenticate GitHub CLI? Login with a web browser
First copy your one-time code: ABC1-234D

Opening up the Telescope repository in AWS EC2:

Clone your fork of the Telescope repository. For example gh repo clone cindyledev/telescope. If you do not have a fork of the Telescope repository, run gh repo clone -o upstream Seneca-CDOT/telescope to clone the Telescope repository and name the remote upstream then proceed to Step 5.



gh repo clone <github-username>/telescope

Open the telescope directory and the entire Telescope files and folder structure should be visible to you!
Add the Telescope repository and name the remote upstream by entering



git remote add upstream https://github.com/Seneca-CDOT/telescope.git

Verify that the remote has been added



git remote -v

Set all the necessary environment variables in your .env file to contain your EC2 instance's public IPv4 address by executing the aws-ip.sh script



sh ./tools/aws-ip.sh

If you did everything correctly, you've completed the environment setup!

Now to get started with development...

Install all dependencies



pnpm install

Start all Telescope services using the environment variables set in .env. This will take some time to complete

Note: Do not use pnpm services:start. This will use the environment variables in config/env.development and we don't want that here.



docker-compose --env-file .env up -d

Start the Telescope development server on Port 3000



pnpm start

Find your EC2 instance's public IPv4



$ curl -s http://169.254.169.254/latest/meta-data/public-ipv4

35.174.16.133

Open <public-ip>:8000 browser tab to see Telescope running on a AWS Cloud9 environment!
Open <public-ip>:3000/feeds in another browser tab to see all the feeds in the backend
Open <public-ip>:8443/v1/<microservice-port> in another browser tab to see the microservices. For example 35.174.16.133:8443/v1/status

Frequently Asked Questions (FAQ)

How do I stop my docker containers?



pnpm services:stop

How do I delete my docker containers?



docker system prune -af --volumes

I can't open `<EC2-ip>:8000` running, what could I be doing wrong?

If you have a VPN on, turn it off and get your IP address by visiting http://checkip.amazonaws.com/ then updating your Security Group to allow your IP address to access the ports 22, 3000, 8000, and 8443.
Your home IP address may have changed because your router was rebooted. This can happen when you manually reboot your router or when a power outage occurs. The solution here is the same as above. You can get your IP address by visting http://checkip.amazonaws.com/ then updating your Security Group to allow your IP address to access the ports 22, 3000, 8000, and 8443.

How do I turn off my EC2 instance if I'm actively not using it?

Close your Remote Connection on VS Code
Manually turning the EC2 instance off using the AWS Console
Stop your AWS Academy Lab

How to Dockerize a Docusaurus v2 application

Cindy Le — Tue, 08 Mar 2022 14:46:31 +0000

Let's get started with the most basic Docusaurus application.

Getting started with Docusaurus

Create a new Docusaurus site ```

npx create-docusaurus@latest my-website classic


Your directory structure should look like this:

![Directory structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uzsk43jvyqbgbu0ozbeh.png)

2. Start the site:

cd my-website
npx docusaurus start


3. Open `http://localhost:3000`. Once you see that your website is running locally you can close the server then proceed to the next section.

## Adding the Dockerfile

1. Add the `host` flag to the `start` and `serve` scripts in the `package.json` file

```diff


  "scripts": {
    "docusaurus": "docusaurus",
--  "start": "docusaurus start",
++  "start": "docusaurus start --host 0.0.0.0",
    "build": "docusaurus build",
    "swizzle": "docusaurus swizzle",
    "deploy": "docusaurus deploy",
    "clear": "docusaurus clear",
--  "serve": "docusaurus serve",
++  "serve": "docusaurus serve --host 0.0.0.0",
    "write-translations": "docusaurus write-translations",
    "write-heading-ids": "docusaurus write-heading-ids"
  },

Create a new file called Dockerfile in the root of the project



## Base ########################################################################
# Use a larger node image to do the build for native deps (e.g., gcc, python)
FROM node:lts as base

# Reduce npm log spam and colour during install within Docker
ENV NPM_CONFIG_LOGLEVEL=warn
ENV NPM_CONFIG_COLOR=false

# We'll run the app as the `node` user, so put it in their home directory
WORKDIR /home/node/app
# Copy the source code over
COPY --chown=node:node . /home/node/app/

## Development #################################################################
# Define a development target that installs devDeps and runs in dev mode
FROM base as development
WORKDIR /home/node/app
# Install (not ci) with dependencies, and for Linux vs. Linux Musl (which we use for -alpine)
RUN npm install
# Switch to the node user vs. root
USER node
# Expose port 3000
EXPOSE 3000
# Start the app in debug mode so we can attach the debugger
CMD ["npm", "start"]

## Production ##################################################################
# Also define a production target which doesn't use devDeps
FROM base as production
WORKDIR /home/node/app
COPY --chown=node:node --from=development /home/node/app/node_modules /home/node/app/node_modules
# Build the Docusaurus app
RUN npm run build

## Deploy ######################################################################
# Use a stable nginx image
FROM nginx:stable-alpine as deploy
WORKDIR /home/node/app
# Copy what we've installed/built from production
COPY --chown=node:node --from=production /home/node/app/build /usr/share/nginx/html/

Working with Docker container in development

To build the Docker container for development, run



docker build --target development -t docs:dev .

To run the Docker container in development, run



docker run -p 3000:3000 docs:dev

Note: Remember to stop the container before proceeding to the next step

Working with Docker container in production

To build the Docker container for production, run



docker build -t docusaurus:latest .

To run the Docker container in production, run



docker run --rm -p 3000:80 docusaurus:latest

My '20% time' spent on Telescope

Cindy Le — Mon, 21 Feb 2022 17:40:46 +0000

I procrastinated a lot on this blog because I didn't know where to start, but anyway, I was assigned several tasks at work last year, which resulted in me writing a lot of documentation. One particular doc had to be read in order, from top to bottom, and I didn't want to split it into different docs... See what I'm trying to get at? I'm having problems organizing docs at work, and guess what other project was having the same problem? Telescope!

Google has a '20% time' rule so I decided to use my time on Telescope.

“We encourage our employees, in addition to their regular projects, to spend 20% of their time working on what they think will most benefit Google,” founders Sergey Brin and Larry Page wrote in their IPO letter. “This empowers them to be more creative and innovative. Many of our significant advances [like AdSense and Google News] have happened in this manner.”

I was eager to get started, so I went back to the age-old issue #290 I filed years ago. I had to remind myself what had been completed for this issue because although I initially suggested using Docusaurus, we found out Gatsby.js supported adding markdown pages, so I started working on just the About page to have something similar to Docusaurus but use Gatsby plugins instead. Unfortunately, we were stuck on the design and ran out of time to complete it.

When the 2.0 team was porting our Gatsby.js frontend to Next.js, we also found out that Next.js also supports MDX so Chris converted my work on the About page and implemented it in Next.js.

Come Winter 2022, I decided to resurrect the issue and tried to convenience the team (mainly myself) that it would be fun. Of course, I didn't expect any interest in this because students typically want to write code and contribute to an area of their interest which is rarely maintaining documentation.

I initially put up a PR that created a microservice for the docs using Next.js, MDX, and Tailwind CSS. Yes, this was my terrible attempt at getting Tailwind CSS into Telescope, but we already had a Next.js frontend, and it didn't make sense to have two Next.js projects to maintain. My second PR used Docusaurus, but I introduced too many parts, which made it extremely difficult to review. I added:

The Docusaurus project itself
Dockerized it
Attempted to hook it up to Traefik
Attempted to hook it up to Nginx

In the end, it wasn't working as expected, so I made a third PR. Smaller PRs are easier to review and understand. Unfortunately, I got carried away with my second PR because I didn't want the Docusaurus feature to turn out like my Gatsby About page, where only one part of it was implemented, and the rest was unfinished.

I had thought of an MVP for Docusaurus in my head, but now I'm gonna write it down here:

Docusaurus website contains all the Telescope docs
Docusaurus website is accessible on staging and production at http://dev.telescope.cdot.systems/docs and http://telescope.cdot.systems/docs, respectively
Each doc shows when the doc was last modified and by whom.

As you can see, we're already almost there. I also filed many nice to have issues and was surprised at the number of contributors that rallied behind the Docusaurus feature. I try my best to keep the Docusaurus Project Board up to date because I could quickly lose track of everything since I didn't do all the work.

For the 2.7 Release, we closed 20 issues and PRs related to Docusaurus! Thank you to our contributors, reviewers, and project board creator. In no particular order:

cindyledev
sancodes - First-time contributor on Telescope
menghif
humphd
tcvan0707
dbelokon
Kevan-Y
JerryHue
TueeNguyen
joelazwar
tpmai22
TDDR
sirinoks

Adding Job Type Filtering

Cindy Le — Wed, 24 Nov 2021 15:50:42 +0000

ExamPro Markdown Lab Part 3

This is part of the ExamPro Next.js course. Additional content will be added to this lab, such as pagination and job type filtering.

In this lab, we will be adding the job type filtering feature to the existing application

Filter by Job Type: All, Full-Time, Part-Time Feature

localhost:3000/jobs/type/full-time

Create pages/jobs/type/[type_name].js
Import the following

import { promises as fs } from 'fs';
import path from 'path';
import matter from 'gray-matter';

import Job from '@/components/jobs/Job';
import JobsHeader from '@/components/jobs/JobsHeader';
import Layout from '@/components/Layout';

Create the getStaticPaths() function

export async function getStaticPaths() {
  // Read from the /jobs directory
  const files = await fs.readdir(path.join('jobs'));

  const types = await Promise.all(
    files.map(async (filename) => {
      const markdown = await fs.readFile(path.join('jobs', filename), 'utf-8');

      const { data } = matter(markdown);

      // Return the job types in lowercase. Eg. 'full-time' instead of 'Full-Time'
      return data.type.toLowerCase();
    })
  );

  const paths = types.map((type) => ({
    params: { type_name: type },
  }));

  return {
    paths,
    fallback: false,
  };
}

Create the getStaticProps() function

// This function takes the type_name from getStaticPaths()
export async function getStaticProps({ params: { type_name } }) {
  // Read from /jobs directory
  const files = await fs.readdir(path.join('jobs'));

  // Map through jobs directory
  const jobs = await Promise.all(
    files.map(async (filename) => {
      // Set 'slug' to name of md file
      const slug = filename.replace('.md', '');
      // Read all markdown from file
      const markdown = await fs.readFile(path.join('jobs', filename), 'utf-8');
      // Extract data from markdown
      const { data } = matter(markdown);

      // return slug and data in an array
      return {
        slug,
        data,
      };
    })
  );

  // Maps through all the job types
  const types = jobs.map((job) => job.data.type);
  // Only take the unique job types
  const uniqueTypes = [...new Set(types)];

  const jobTypes = jobs.filter((job) => job.data.type.toLowerCase() === type_name);

  // return jobs, typeName, types
  return {
    props: {
      jobs: jobTypes,
      typeName: type_name,
      types: uniqueTypes,
    },
  };
}

Create JobTypePostings() function

export default function JobTypePostings({ jobs, typeName }) {
  const jobType = typeName.replace(/(^|[\s-])\S/g, function (match) {
    return match.toUpperCase();
  });

  return (
    <Layout title="Jobs | ExamPro">
      <JobsHeader jobType={jobType} />
      <div className="bg-white my-4 shadow overflow-hidden divide-y divide-gray-200 sm:rounded-md">
        <ul role="list" className="divide-y divide-gray-200">
          {/* Maps through each job */}
          {jobs.map((job, index) => (
            <Job key={index} job={job} />
          ))}
        </ul>
      </div>
    </Layout>
  );
}

Update the `[page_index].js` file

Import the JobsHeader component

import JobsHeader from '@/components/jobs/JobsHeader';

Replace the following lines

<div className="px-4 py-4 sm:px-6 md:flex md:items-center md:justify-between">
  <div className="flex-1 min-w-0">
    <h2 className="text-2xl font-bold leading-7 text-gray-900 sm:text-3xl sm:truncate">
      Job Postings
    </h2>
  </div>
</div>

with

<JobsHeader />

Adding Pagination

Cindy Le — Wed, 24 Nov 2021 15:46:18 +0000

ExamPro Markdown Lab Part 2

This is part of the ExamPro Next.js course. Additional content will be added to this lab, such as pagination and job type filtering.

In this lab, we will be adding the pagination feature to the existing application

Adding Pagination Feature

http://localhost:3000/jobs would look like this:

Config file

This file will be used to set how many jobs will be displayed on one page

Create ./config/index.js

export const JOBS_PER_PAGE = 4;

Pagination Component

Create ./components/jobs/Pagination.js

import Link from 'next/link';

import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/solid';

import { JOBS_PER_PAGE } from '@/config/index';

export default function Pagination({ currentPage, numJobs, numPages }) {
  const isFirst = currentPage === 1;
  const isLast = currentPage === numPages;
  const prevPage = `/jobs/page/${currentPage - 1}`;
  const nextPage = `/jobs/page/${currentPage + 1}`;
  const firstJobOfPage = parseInt((currentPage - 1) * JOBS_PER_PAGE + 1);
  const lastJobOfPage = parseInt(currentPage * JOBS_PER_PAGE);

  if (numPages === 1) return <></>;

  return (
    <div className="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
      <div className="flex-1 flex justify-between sm:hidden">
        {/* If not first page, display the Previous link */}
        {!isFirst && (
          <Link href={prevPage}>
            <a className="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
              Previous
            </a>
          </Link>
        )}

        {/* If not last page, display the Next link */}
        {!isLast && (
          <Link href={nextPage}>
            <a className="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
              Next
            </a>
          </Link>
        )}
      </div>

      <div className="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
        <div>
          <p className="text-sm text-gray-700">
            Showing <span className="font-medium">{firstJobOfPage}</span> to{' '}
            <span className="font-medium">{lastJobOfPage > numJobs ? numJobs : lastJobOfPage}</span>{' '}
            of <span className="font-medium">{numJobs}</span> results
          </p>
        </div>
        <div>
          <nav
            className="relative z-0 inline-flex rounded-md shadow-sm -space-x-px"
            aria-label="Pagination"
          >
            {/* If not first page, display the Previous link */}
            {!isFirst && (
              <Link href={prevPage}>
                <a className="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                  <span className="sr-only">Previous</span>
                  <ChevronLeftIcon className="h-5 w-5" aria-hidden="true" />
                </a>
              </Link>
            )}

            {/* Loop through numPages array */}
            {Array.from({ length: numPages }, (_, i) => (
              <li key={i} className="list-none">
                <Link href={`/jobs/page/${i + 1}`} passHref>
                  {i == currentPage - 1 ? (
                    <a
                      aria-current="page"
                      className="z-10 bg-orange-50 border-orange-400 text-orange-500 relative inline-flex items-center px-4 py-2 border text-sm font-medium"
                    >
                      {i + 1}
                    </a>
                  ) : (
                    <a className="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
                      {i + 1}
                    </a>
                  )}
                </Link>
              </li>
            ))}

            {/* If not last page, display the Next link */}
            {!isLast && (
              <Link href={nextPage}>
                <a className="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                  <span className="sr-only">Next</span>
                  <ChevronRightIcon className="h-5 w-5" aria-hidden="true" />
                </a>
              </Link>
            )}
          </nav>
        </div>
      </div>
    </div>
  );
}

To add pagination, we need a new dynamic route for our job listings.

Create pages/jobs/page/[page_index].js file

Import fs and path modules
Import matter
Import Job component
Import Layout component
Import Pagination

import { promises as fs } from 'fs';
import path from 'path';
import matter from 'gray-matter';

import { JOBS_PER_PAGE } from '@/config/index';

import Job from '@/components/jobs/Job';
import Layout from '@/components/Layout';
import Pagination from '@/components/jobs/Pagination';

Create getStaticPaths() function

export async function getStaticPaths() {
  // Read from the /jobs directory
  const files = await fs.readdir(path.join('jobs'));
  // Get the number of files and divide by JOBS_PER_PAGE then round up
  const numPages = Math.ceil(files.length / JOBS_PER_PAGE);

  let paths = [];

  for (let i = 1; i <= numPages; i++) {
    paths.push({
      params: { page_index: i.toString() },
    })
  }

  return {
    paths,
    fallback: false,
  }
}

Create getStaticProps() function

export async function getStaticProps({ params }) {
  const page = parseInt((params && params.page_index) || 1);

  // Read from /jobs directory
  const files = await fs.readdir(path.join('jobs'));

  // Map through jobs directory
  const jobs = files.map(async (filename) => {
    // Set 'slug' to name of md file
    const slug = filename.replace('.md', '');
    // Read all markdown from file
    const markdown = await fs.readFile(path.join('jobs', filename), 'utf-8');
    // Extract data from markdown
    const { data } = matter(markdown);

    // return slug and data in an array
    return {
      slug,
      data,
    };
  });

  // Get total number of jobs
  const numJobs = files.length;
  // Get the number of files and divide by JOBS_PER_PAGE then round up
  const numPages = Math.ceil(files.length / JOBS_PER_PAGE);
  // Get the page index
  const pageIndex = page - 1;
  // Display only the number of jobs based on JOBS_PER_PAGE
  const displayJobs = jobs.slice(pageIndex * JOBS_PER_PAGE, (pageIndex + 1) * JOBS_PER_PAGE);

  return {
    props: {
      jobs: await Promise.all(displayJobs),
      numJobs,
      numPages,
      currentPage: page,
    },
  };
}

Create the JobPostings() function

export default function JobPostings({ jobs, numJobs, numPages, currentPage }) {
  return (
    <Layout title="Jobs | ExamPro">
      <div className="px-4 py-4 sm:px-6 md:flex md:items-center md:justify-between">
        <div className="flex-1 min-w-0">
          <h2 className="text-2xl font-bold leading-7 text-gray-900 sm:text-3xl sm:truncate">
            Job Postings
          </h2>
        </div>
      </div>
      <div className="bg-white my-4 shadow overflow-hidden divide-y divide-gray-200 sm:rounded-md">
        <ul role="list" className="divide-y divide-gray-200">
          {/* Maps through each job */}
          {jobs.map((job, index) => (
            <Job key={index} job={job} />
          ))}
        </ul>
      </div>
      <Pagination currentPage={currentPage} numJobs={numJobs} numPages={numPages} />
    </Layout>
  );
}

Since we most of the same functionality in pages/jobs/index.js and pages/jobs/page/[page_index.js], we can just delete everything in pages/jobs/index.js import like so:

import { getStaticProps } from './page/[page_index]';
import JobPostings from './page/[page_index]';

export { getStaticProps };
export default JobPostings;

Creating the Basic Job Listing

Cindy Le — Sat, 20 Nov 2021 01:19:06 +0000

ExamPro Markdown Lab Part 1

This is part of the ExamPro Next.js course. Preview of complete lab deployed on Vercel

In this lab, we will be creating the Job Listings portion of ExamPro using the following stack:

Technology Stack

Node.js (12.22.0 or later)
Next.js (12.0.4)
React (17.0.2)
TailwindCSS (3.0.0)
gray-matter (4.0.3)
marked (4.0.3)

Application Screenshots

localhost:3000/jobs/ display a list of all jobs

localhost:3000/jobs/[slug] displays individual jobs

Getting Started

You may choose to start a new repository or continue with the current exampro-nextjs project

If you're starting from scratch, proceed to Step 1.

Setting Up Next.js

Create a new Next.js app called exampro-markdown

npx create-next-app@latest exampro-markdown

Change to the exampro-markdown directory

cd exampro-markdown

Setting Up TailwindCSS

Install TailwindCSS, its peer-dependencies, plugins, and other Tailwind Labs tools

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

npm install @headlessui/react @heroicons/react

Initialize your Tailwind configuration files

npx tailwindcss init -p

Include Tailwind in your CSS by replacing the original content with the following lines in your ./styles/globals.css file

@tailwind base;
@tailwind components;
@tailwind utilities;

In tailwind.config.js, add orange to your colors by adding the following line at the top of the file

const colors = require('tailwindcss/colors');

and extending the color palette to including orange

module.exports = {
  content: ['./components/**/*.js', './pages/**/*.js'],
  theme: {
    extend: {
      colors: {
        orange: colors.orange,
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

Setting Up Prettier and Husky Hooks (optional)

Install Prettier, Husky, and lint-staged

npm install --save-dev --save-exact prettier
npm install --save-dev husky lint-staged
npx husky install
npm set-script prepare "husky install"
npx husky add .husky/pre-commit "npx lint-staged"

Create .prettierrc.json in the root directory

{
  "arrowParens": "always",
  "bracketSpacing": true,
  "embeddedLanguageFormatting": "auto",
  "endOfLine": "lf",
  "htmlWhitespaceSensitivity": "css",
  "insertPragma": false,
  "bracketSameLine": false,
  "jsxSingleQuote": false,
  "proseWrap": "preserve",
  "quoteProps": "as-needed",
  "requirePragma": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "useTabs": false,
  "vueIndentScriptAndStyle": false,
  "printWidth": 100
}

Create .prettierignore in the root directory

package.json
package-lock.json
node_modules/
.cache
.next

In the package.json, add the following scripts and lint-staged:

  "scripts": {
    ...
    "prettier": "prettier --write \"./**/*.{md,json,html,css,js,yml}\"",
    "prettier-check": "prettier --check \"./**/*.{md,json,html,css,js,yml}\"",
    ...
  },
  ...
    "lint-staged": {
    "**/*": "prettier --write --ignore-unknown"
  }

Install gray-matter and marked

npm install --save gray-matter
npm install marked

Removing unnecessary file and code

Delete the styles/Home.module.css file
Remove everything inside the parent <div> element in ./pages/index.js and the import lines

import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'

Setting up `jsconfig.json`

This specifies path mapping to be computed relative to baseUrl option.

Create jsconfig.json file

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "baseUrl": ".",
    "paths": {
      "@/components/*": ["components/*"],
      "@/config/*": ["config/*"],
      "@/styles/*": ["styles/*"]
    }
  }
}

Using provided components and stylesheets

Copy the following components and stylesheet into your project. These are React components that have been styled using TailwindCSS. Markdown.module.css is used to style the Markdown content

Footer from ./components/Footer.js
Header from ./components/Header.js
Layout from ./components/Layout.js
Main from ./components/Main.js
Job from ./components/jobs/Job.js
JobsHeader from ./components/jobs/JobsHeader.js
TypeLabel from ./components/jobs/TypeLabel.js
TypeList from ./components/jobs/TypeList.js
./styles/Markdown.module.css

Update the ./pages/index.js file to include the Layout and Main components

import Main from '@/components/Main';
import Layout from '@/components/Layout';

export default function Home() {
  return (
    <Layout>
      <Main />
    </Layout>
  );
}

Run npm run dev to start the server, you should see

Markdown Implementation

Job Postings

Create /jobs directory and fill it with job postings in markdown (.md files).
You can copy the .md files in the /jobs of the repository or create your own using Lorem Markdownum. Make sure to include frontmatter above your markdown. Frontmatter looks like:

---
title: 'Cloud Support Engineer'
type: 'Part-Time'
location: 'Remote'
category: 'Operations, IT and Support Engineering'
---

JobPostings Component (Page component that shows list of all jobs)

Create pages/jobs/index.js file

Import the fs and path modules
Import matter from gray-matter
Import the Job Component
Import the Layout component

import { promises as fs } from 'fs';
import path from 'path';
import matter from 'gray-matter';

import Job from '@/components/jobs/Job';
import Layout from '@/components/Layout';

Create the getStaticProps() function

export async function getStaticProps() {
  // Read from /jobs directory
  const files = await fs.readdir(path.join('jobs'));

  // Map through jobs directory
  const jobs = files.map(async (filename) => {
    // Set 'slug' to name of md file
    const slug = filename.replace('.md', '');
    // Read all markdown from file
    const markdown = await fs.readFile(path.join('jobs', filename), 'utf-8');
    // Extract data from markdown
    const { data } = matter(markdown);

    // return slug and data in an array
    return {
      slug,
      data,
    };
  });

  return {
    props: {
      jobs: await Promise.all(jobs),
    },
  };
}

Your JobPostings() function will take the jobs prop from the getStaticProps() function and map through each of the job markdown files in /jobs

// Takes the `jobs` prop from the getStaticProps() function
export default function JobPostings({ jobs }) {
  return (
    <Layout title="Jobs | ExamPro">
      <div className="px-4 py-4 sm:px-6 md:flex md:items-center md:justify-between">
        <div className="flex-1 min-w-0">
          <h2 className="text-2xl font-bold leading-7 text-gray-900 sm:text-3xl sm:truncate">
            Job Postings
          </h2>
        </div>
      </div>
      <div className="bg-white my-4 shadow overflow-hidden divide-y divide-gray-200 sm:rounded-md">
        <ul role="list" className="divide-y divide-gray-200">
          {/* Maps through each job */}
          {jobs.map((job, index) => (
            <Job key={index} job={job} />
          ))}
        </ul>
      </div>
    </Layout>
  );
}

Markdown Component (For parsing markdown)

This component handles the parsing of the markdown content to html so we can style it using Markdown.module.css

Create ./components/Markdown.js file

import { marked } from 'marked';

import styles from '@/styles/Markdown.module.css';

// Takes content (for example from ./pages/jobs/[slug].js)
export default function Markdown({ content }) {
  return (
    // Uses marked to parse markdown to html
    <div className={styles.markdown} dangerouslySetInnerHTML={{ __html: marked(content) }}></div>
  );
}

JobPage Component (Individual job posting)

Create ./pages/jobs/[slug].js file
Import the following

import { promises as fs } from 'fs';
import path from 'path';
import Link from 'next/link';
import matter from 'gray-matter';
import { BriefcaseIcon, LocationMarkerIcon, UsersIcon } from '@heroicons/react/solid';

import Markdown from '@/components/Markdown';
import Layout from '@/components/Layout';

Create a getStaticPaths() function

export async function getStaticPaths() {
  // Read from the /jobs directory
  const files = await fs.readdir(path.join('jobs'));
  // Map through the files
  const paths = await Promise.all(
    files.map(async (filename) => ({
      params: {
        // Create a slug using the name of the file without the .md extension at the end
        slug: filename.replace('.md', ''),
      },
    }))
  );

  return {
    paths,
    fallback: false,
  };
}

Create a getStaticProps() function

// This function takes the slug from getStaticPaths()
export async function getStaticProps({ params: { slug } }) {
  // Read file with name of slug + .md extension in the /jobs directory
  const markdown = await fs.readFile(path.join('jobs', slug + '.md'), 'utf-8');
  // Use `matter` to extract the content and data from each file
  // content is the body of the markdown file
  // data is the frontmatter of the markdown file
  const { content, data } = matter(markdown);

  // Return content, data, and slug as props
  return {
    props: {
      content,
      data,
      slug,
    },
  };
}

Your JobPage() function will take content and data as props from getStaticProps() and will display them as React Components

export default function JobPage({ content, data }) {
  return (
    <Layout title={`${data.title} | ExamPro`}>
      <div className="px-4 py-4 sm:px-6 md:flex md:items-center md:justify-between lg:flex lg:items-center lg:justify-between">
        <div className="flex-1 min-w-0">
          <h2 className="text-2xl font-bold leading-7 text-gray-900 sm:text-3xl sm:truncate">
            {data.title}
          </h2>
          <div className="mt-1 flex flex-col sm:flex-row sm:flex-wrap sm:mt-0 sm:space-x-6">
            <div className="mt-2 flex items-center text-sm text-gray-500">
              <UsersIcon
                className="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400"
                aria-hidden="true"
              />
              {data.category}
            </div>
            <div className="mt-2 flex items-center text-sm text-gray-500">
              <LocationMarkerIcon
                className="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400"
                aria-hidden="true"
              />
              {data.location}
            </div>
            <div className="mt-2 flex items-center text-sm text-gray-500">
              <BriefcaseIcon
                className="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400"
                aria-hidden="true"
              />
              {data.type}
            </div>
          </div>
        </div>
        <div className="mt-5 flex lg:mt-0 lg:ml-4">
          <span className="sm:ml-3">
            <Link href="/jobs" passHref>
              <button
                type="button"
                className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-orange-500 hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-400"
              >
                Back to Jobs
              </button>
            </Link>
          </span>
        </div>
      </div>
      <div>
        <Markdown content={content} />
      </div>
    </Layout>
  );
}

Remote Development using SSH with Visual Studio Code on an AWS EC2 instance

Cindy Le — Sat, 13 Nov 2021 00:05:40 +0000

Telescope Tech Stack

Next.js
Material UI
Node.js
Elasticsearch
Redis
Traefik
Firebase
Jest

Telescope Microservices

Auth
Feed-Discovery
Image
Parser
Planet
Posts
Search
Status
Users

Disclaimer: The EC2 instance used in this guide is not within AWS's Free-Tier so please see EC2 Pricing to see if you're comfortable with these costs. Running Docker in development is CPU intensive so these are the EC2 instances I recommend:

Minimum: t2.medium (4 GiB RAM + 2 vCPU)
Recommended: t2.large (8 GiB RAM + 2 vCPU)

Summary of Pricing:

t2.medium costs \$0.0464 per hour
t2.large costs \$0.0928 per hour
30GB Amazon Elastic Block Storage (EBS) costs \$3 per month

Cost Estimate Per Month:

	t2.medium	t2.large
Cost per hour	\$0.0464	\$0.0928
Hours per day	8	8
Days per month	30	30
Sub-total	\$11.14	\$22.27
30GB EBS Volume	\$3	\$3
Total	\$14.14	\$25.27

Prerequisites:

Download and install Visual Studio Code
Install the Remote - SSH extension
Create an AWS Account. You can watch this part of the AWS Certified Cloud Practitioner course on creating an account if you need help.
Create an IAM user with administrative privileges. You will need your AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY
Sign into your AWS Account using your IAM user

Create your virtual machine (AWS EC2):

In the upper-right hand corner of your AWS Management Console, select US East (Ohio) us-east-2 as your Region
In the upper-left hand corner of your AWS Management Console, click on Services. This will bring up a list of AWS Services, search for EC2
Click on Launch instances

Step 1 - Choose an Amazon Machine Image (AMI): Ubuntu Server 20.04 LTS (HVM), SSD Volume Type
Step 2 - Choose an Instance Type: t2.medium
Step 3 - Configure Instance Details: Accept the defaults and proceed to the next step
Step 4 - Add Storage: Change the Size (GiB) from 8 to 20
Step 5 - Add Tags: No tags are needed. Proceed to the next step.
Step 6 - Configure Security Group:
- Assign a security group: Create a new security group
- Security group name: telescope-sg
- Add the following Rules:
- SSH for your IP address
- Type: SSH
- Protocol: TCP
- Port Range: 22
- Source: My IP (When you select this from the dropdown menu, it will automatically put <your-ip-address>/32 in the field. For example 76.72.29.150/32)
- Open port 3000 for your IP address
- Type: Custom TCP
- Protocol: TCP
- Port Range: 3000
- Source: My IP
- Open port 8000 for your IP address
- Type: Custom TCP
- Protocol: TCP
- Port Range: 8000
- Source: My IP
- Open port 8000 for your IP address
- Type: Custom TCP
- Protocol: TCP
- Port Range: 8443
- Source: My IP

Click on Review and Launch. You will get a warning: Your instance configuration is not eligible for the free usage tier, this is because we're using a t2.medium instance type.
Click on Launch
In the pop-up, choose Create a new key pair

Key pair type: RSA
Key pair name: telescope-dev-key

Click on Download Key Pair
If you're using Windows, save the file in the .ssh directory in your user profile folder (for example C:/Users/cindy/.ssh/)
Click on Launch Instances

It will take a few minutes for AWS to launch your new EC2 instance.

Once your EC2 instance has been launched, you should name it something meaningful like Telescope-Dev and you can find your EC2 instance's public IPv4 address. Make note of this IP address.

Connect using SSH

Open up Visual Studio Code
Click on the Open a Remote Window icon at the bottom left-hand corner of the window
Select Connect to Host
Select Configure SSH Hosts...
This will open up a config file in Visual Studio Code. If you're using Windows, it'll be something like C:/Users/cindy/.ssh/config
Edit the config file with the following:

Host aws-ec2
    HostName <your-ec2-ip-address>
    User ubuntu
    IdentityFile ~/.ssh/telescope-dev-key.pem

Save the file
When you click on the Open a Remote Window icon at the bottom left-hand corner again and choose Connect to Host, you will see aws-ec2 listed.
Select aws-ec2 and a new Visual Studio Code window will open.
You will see "aws-ec2" has fingerprint "SHA256:xxx" and Are you sure you want to continue?. Click on Continue. Then You should see that you're connected!

Setting up your AWS credentials

Open up a terminal in Visual Studio Code (hotkey on Windows: Ctrl + backtick). You should see that you're logged in as something like ubuntu@ip-172.31.23.4.
Install unzip. We will need this to install the AWS CLI

$ sudo apt install unzip

Install the latest version of the AWS CLI

$ curl "https://awscli.amazonaws.com/awscli-exe-linux-x86_64.zip" -o "awscliv2.zip"
unzip awscliv2.zip
sudo ./aws/install

Verify the AWS CLI installation

$ aws --version

aws-cli/2.3.0 Python/3.8.8 Linux/5.4.0-1045-aws exe/x86_64.ubuntu.20 prompt/off

Remove the awscliv2.zip file and aws directory

rm awscliv2.zip
rm -rf aws

Configure your AWS credentials

aws configure

Currently, everything is set as None so enter your credentials for your AWS IAM user.

AWS Access Key ID [None]: ****************764G
AWS Secret Access Key [None]: ****************qBbe
Default region name [None]: us-east-2
Default output format [None]:

Installing Docker and Docker-Compose

Install Docker Engine - Community Edition

Update the apt package index:

sudo apt-get update

Install packages to allow apt to use a repository over HTTPS:

sudo apt-get install \
    ca-certificates \
    curl \
    gnupg \
    lsb-release

Add Docker’s official GPG key:

curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg

Use the following command to set up the stable repository:

echo \
  "deb [arch=$(dpkg --print-architecture) signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/ubuntu \
  $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null

Update the apt package index again:

sudo apt-get update

Install the latest version of Docker Engine community:

sudo apt-get install docker-ce docker-ce-cli containerd.io

Add your user to the Docker group (source):

sudo usermod -aG docker $USER

Activate the changes to groupss

newgrp docker

Now run docker as a service on your machine, on startup:

Enable docker on startup: sudo systemctl enable docker
Disable docker on startup: sudo systemctl disable docker

Install Docker-Compose

Run to download the current stable version of Docker-Compose:

sudo curl -L "https://github.com/docker/compose/releases/download/1.29.2/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose

Apply executable permissions to the downloaded file:

sudo chmod +x /usr/local/bin/docker-compose

Check installation using:

$ docker-compose --version

docker-compose version 1.29.2, build 5becea4c

Install Node.js and npm

Install Node.js 16.x and npm 8.1

$ curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash -
sudo apt-get install -y nodejs

Verify installation

$ node -v
v16.12.0

$ npm -v
8.1.0

Setting up the Telescope repository in AWS EC2:

Clone the Telescope repository and name the remote upstream by entering

git clone -o upstream https://github.com/Seneca-CDOT/telescope.git

Open the telescope directory and the entire Telescope files and folder structure should be visible to you!
Set all the necessary environment variables in your env.remote file to contain your EC2 instance's public IPv4 address by executing the aws-ip.sh script

sh ./tools/aws-ip.sh

If you did everything correctly, you've completed the environment setup!

Now to get started with development...

Install all dependencies

npm install

Start all Telescope services. This will take some time to complete

docker-compose --env-file .env up -d

Start the Telescope development server on Port 3000

npm start

Find your EC2 instance's public IPv4

$ curl -s http://169.254.169.254/latest/meta-data/public-ipv4

35.174.16.133

Open <public-ip>:8000 browser tab to see Telescope running on a AWS Cloud9 environment!
Open <public-ip>:3000/feeds in another browser tab to see all the feeds in the backend
Open <public-ip>:8443/v1/<microservice-port> in another browser tab to see the microservices. For example 35.174.16.133:8443/v1/posts

Frequently Asked Questions (FAQ)

How do I stop my docker containers?

npm run services:stop

How do I delete my docker containers?

docker system prune -af --volumes

I get `Permission denied` error when I run `docker-compose --env-file .env up -d`

Sometimes the Docker permissions aren't set properly when you first install Docker. You may need to reboot your VM or run

newgrp docker

I can't open :8000 running, what could I be doing wrong?

If you have a VPN on, turn it off and get your IP address by visiting http://checkip.amazonaws.com/ then allow your IP address to access the ports 3000 and 8000.
AWS may change your EC2 instance IP address when you stop or restart your EC2 instance. One solution is to purchase an Elastic IP address to reserve the particular public IP address. However, you can just clean out the env.remote and .env files and run the ./tools/aws-ip.sh script again to set your new EC2 IP address in the appropriate environment variables. Just remember to use the new EC2 IP address in the browser as well.

I can't SSH into my EC2 instance

Same reason as above, your EC2 instance IP address may change when you stop or restart your EC2 instance. So make sure your .ssh/config file has the correct HostName
If your own IP address changes (for example, you changed internet providers or you moved to a new location with a different IP address), you need to update your inbound rules to allow your IP address to access port 22. Don't forget to allow access to port 3000 and 8000 as well.

How do I turn off my EC2 instance if I'm actively not using it?

There are a number of different methods to stop an EC2 instance:

Manually turning it off using the AWS Console
Creating a Cloudwatch alarm to stop your EC2 instance for you after some inactivity
- Click on the + underneath Alarm status to start creating an alarm
- Click on Create an alarm radio button
- Set Alarm action to Stop
- Set alarm to trigger if the CPU utilization of the EC2 instance has been less 25% for an hour

Remote Development with AWS Cloud9 IDE using a Docker and Docker-Compose application

Cindy Le — Fri, 12 Nov 2021 23:41:47 +0000

In this tutorial, we will be setting up Telescope in AWS Cloud9 IDE. Telescope is a tool for tracking blogs around Seneca's open source develop. The application itself has many microservices that use Docker containers and are composed together using Docker-Compose. You can find the GitHub repo here

Telescope Tech Stack

Next.js
Material UI
Node.js
Elasticsearch
Redis
Traefik
Firebase
Jest

Telescope Microservices

Auth
Feed-Discovery
Image
Parser
Planet
Posts
Search
Status
Users

AWS Cloud9 is a cloud-based integrated development environment (IDE) that lets you write, run, and debug your code with just a browser.

Disclaimer: The EC2 instance used in this guide is not within AWS's Free-Tier so please see EC2 Pricing to see if you're comfortable with these costs. Cloud9 has a cost-saving setting to help reduce costs by automatically hibernating after 30 minutes of inactivity. Running Docker in development is CPU intensive so these are the EC2 instances I recommend:

Minimum: t2.medium (4 GiB RAM + 2 vCPU)
Recommended: t2.large (8 GiB RAM + 2 vCPU)

Summary of Pricing:

t2.medium costs \$0.0464 per hour
t2.large costs \$0.0928 per hour
30GB Amazon Elastic Block Storage (EBS) costs \$3 per month

Cost Estimate Per Month:

	t2.medium	t2.large
Cost per hour	\$0.0464	\$0.0928
Hours per day	8	8
Days per month	30	30
Sub-total	\$11.14	\$22.27
30GB EBS Volume	\$3	\$3
Total	\$14.14	\$25.27

Prerequisites:

Create an AWS Account. You can watch this part of the AWS Certified Cloud Practitioner course on creating an account if you need help.
Sign into your AWS Account

Creating your Cloud9 Environment:

In the upper-right hand corner of your AWS Management Console, select US East (Ohio) us-east-2 as your Region
In the upper-left hand corner of your AWS Management Console, click on Services. This is bring up a list of AWS Services, search for Cloud9.
Click on Create Environment

Step 1 - Name environment:

Name: Telescope-Dev (whatever you want)

Description (optional): AWS Cloud9 development environment for Telescope

Step 2 - Configure settings:

Environment type: Create a new EC2 instance for environment (direct access)

Instance type: Other instance type: t2.medium (4 GiB RAM + 2 vCPU)

Platform: Ubuntu Server 18.04 LTS

Step 3 - Review and click Create Environment

It will take a few minutes for AWS to create your new C9 environment

Opening the ports on our EC2 instance:

Firstly, we'll need the MAC address of our EC2 instance

$ curl -s http://169.254.169.254/latest/meta-data/mac

06:c5:aa:63:ee:f4

Using your EC2 instance's MAC address, we can get a list of Security Groups

$ curl -s http://169.254.169.254/latest/meta-data/network/interfaces/macs/<your_mac>/security-group-ids

sg-0c63c6f026a2b9288

Find out what your IP address is using http://checkip.amazonaws.com/
You will need to authorize your IP address access to ports 3000, 8000, and 8443

aws ec2 authorize-security-group-ingress --group-id <sg-id> \
--port 3000 \
--protocol tcp \
--cidr <my-ip>/32

aws ec2 authorize-security-group-ingress --group-id <sg-id> \
--port 8000 \
--protocol tcp \
--cidr <my-ip>/32

aws ec2 authorize-security-group-ingress --group-id <sg-id> \
--port 8443 \
--protocol tcp \
--cidr <my-ip>/32

Resize your Amazon EBS volume

Check first using df -h in the terminal

Filesystem      Size  Used Avail Use% Mounted on
/dev/xvda1      9.7G  9.3G  371M  97% /

When you first create an EC2 instance, it has an EBS Volume of 10GB. To increase it to 20GB, create a new file called resize.sh in ~/environment directory and copy the following script:

#!/bin/bash

# Specify the desired volume size in GiB as a command-line argument. If not specified, default to 20 GiB.
SIZE=${1:-20}

# Get the ID of the environment host Amazon EC2 instance.
INSTANCEID=$(curl http://169.254.169.254/latest/meta-data/instance-id)

# Get the ID of the Amazon EBS volume associated with the instance.
VOLUMEID=$(aws ec2 describe-instances \
  --instance-id $INSTANCEID \
  --query "Reservations[0].Instances[0].BlockDeviceMappings[0].Ebs.VolumeId" \
  --output text)

# Resize the EBS volume.
aws ec2 modify-volume --volume-id $VOLUMEID --size $SIZE

# Wait for the resize to finish.
while [ \
  "$(aws ec2 describe-volumes-modifications \
    --volume-id $VOLUMEID \
    --filters Name=modification-state,Values="optimizing","completed" \
    --query "length(VolumesModifications)"\
    --output text)" != "1" ]; do
sleep 1
done

# Check if we're on an NVMe filesystem
if [ $(readlink -f /dev/xvda) = "/dev/xvda" ]
then
  # Rewrite the partition table so that the partition takes up all the space that it can.
  sudo growpart /dev/xvda 1

  # Expand the size of the file system.
  # Check if we are on AL2
  STR=$(cat /etc/os-release)
  SUB="VERSION_ID=\"2\""
  if [[ "$STR" == *"$SUB"* ]]
  then
    sudo xfs_growfs -d /
  else
    sudo resize2fs /dev/xvda1
  fi

else
  # Rewrite the partition table so that the partition takes up all the space that it can.
  sudo growpart /dev/nvme0n1 1

  # Expand the size of the file system.
  # Check if we're on AL2
  STR=$(cat /etc/os-release)
  SUB="VERSION_ID=\"2\""
  if [[ "$STR" == *"$SUB"* ]]
  then
    sudo xfs_growfs -d /
  else
    sudo resize2fs /dev/nvme0n1p1
  fi
fi

Disclaimer: AWS Free-Tier includes 30GB of Storage, 2 million I/Os, and 1GB of snapshot storage with Amazon Elastic Block Store (EBS) free for 12 months.

In the terminal, execute the script by running

sh resize.sh

Verify size change with df -h again

Filesystem      Size  Used Avail Use% Mounted on
/dev/xvda1       20G  9.3G   11G  48% /

Install Docker-Compose

By default, Docker is installed on AWS EC2's Ubuntu but Docker-Compose is not, so we have to install it ourselves.

Run to download the current stable version of Docker-Compose:

sudo curl -L "https://github.com/docker/compose/releases/download/1.29.2/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose

Apply executable permissions to the downloaded file:

sudo chmod +x /usr/local/bin/docker-compose

Check installation using:

$ docker-compose --version

docker-compose version 1.29.2, build 5becea4c

Setting up the Telescope repository in Cloud9:

In the terminal, clone the Telescope repository and name the remote upstream by entering

git clone -o upstream https://github.com/Seneca-CDOT/telescope.git

Change to the telescope directory

cd telescope

Set all the necessary environment variables in your env.remote file to contain your EC2 instance's public IPv4 address by executing the aws-ip.sh script

sh ./tools/aws-ip.sh

If you did everything correctly, you've completed the environment setup using AWS Cloud9! Yay!

Now to get started with development...

Install all depenencies

npm install

Start all Telescope services. This will take some time to complete

docker-compose --env-file .env up -d

Start the Telescope development server on Port 3000

PORT=3000 npm start

Find your EC2 instance's public IPv4

$ curl -s http://169.254.169.254/latest/meta-data/public-ipv4

35.174.16.133

Open <public-ip>:8000 browser tab to see Telescope running on a AWS Cloud9 environment!
Open <public-ip>:3000/feeds in another browser tab to see all the feeds in the backend
Open <public-ip>:8443/v1/<microservice-port> in another browser tab to see the microservices. For example 35.174.16.133:8443/v1/posts

Frequently Asked Questions (FAQ)

What's in `aws-ip.sh`?

ipv4=$(curl http://169.254.169.254/latest/meta-data/public-ipv4)

sed -r \
  -e  "s@(.+=)http://localhost:8000(/[^ ]*)*@\1http://$ipv4:3000\2@g" \
  -e  "s@(.+=)http://localhost:3000(/[^ ]*)*@\1http://$ipv4:8000\2@g" \
  -e  "s@(.+=)http://localhost([^:]*)@\1http://$ipv4:8443\2@g" \
  -e  "s@development\.yml@gitpod\.yml@" \
  config/env.development > .env

How do I stop my docker containers?

npm run services:stop

How do I delete my docker containers?

docker system prune -af --volumes

I think I have multiple services using the same port, how I can check?

To see a list of all running services and what ports they're binding to

sudo lsof -i -P -n | grep LIST

I can't open :8000 running, what could I be doing wrong?

If you have a VPN on, turn it off and get your IP address by visiting http://checkip.amazonaws.com/ then allow your IP address to access the ports 3000 and 8000.
AWS may change your EC2 instance IP address when you stop or restart your EC2 instance. One solution is to purchase an Elastic IP address to reserve the particular public IP address. However, you can just clean out the env.remote and .env files and run the ./tools/aws-ip.sh script again to set your new EC2 IP address in the appropriate environment variables. Just remember to use the new EC2 IP address in the browser as well.

Resources

AWS Certified Developer - Associate 2020

DEV Community: Cindy Le

3 Healthy Hobbies for Software Developers

1. Brazilian Jiu-Jitsu (BJJ)

2. Rock Climbing

Belaying with a Partner

Lead Climbing

3. Running/Jogging

Conclusion

Configure third-party domain name and HTTPS for CloudFront distribution

Chunk 1: Building the frontend

Setting up the Namecheap DNS

Add an Alternative domain name (CNAME) to CloudFront

Use Route 53 as the DNS Service to manage your DNS records

Use CloudFront to serve a static website hosted on Amazon S3

Chunk 1: Building the frontend

Create the CloudFront Distribution

Troubleshooting

Configure a static Next.js website on Amazon S3

Chunk 1: Building the frontend

Getting Started with Next.js

Host the Next.js website on Amazon S3

Remote Development with Visual Studio Code on AWS EC2

Telescope Tech Stack

Telescope Microservices

Prerequisites:

Create your virtual machine (AWS EC2):

Associate an Elastic IP address to your EC2 instance

Connect using SSH

Obtain your AWS Credentials and SSH Key

Setting up your AWS credentials

Verify that everything in the aws-userdata.sh script was installed correctly

Authenticate as your GitHub account with the GitHub CLI

Opening up the Telescope repository in AWS EC2:

If you did everything correctly, you've completed the environment setup!

Now to get started with development...

Frequently Asked Questions (FAQ)

How do I stop my docker containers?

How do I delete my docker containers?

I can't open <EC2-ip>:8000 running, what could I be doing wrong?

How do I turn off my EC2 instance if I'm actively not using it?

How to Dockerize a Docusaurus v2 application

Getting started with Docusaurus

Working with Docker container in development

Working with Docker container in production

My '20% time' spent on Telescope

Adding Job Type Filtering

ExamPro Markdown Lab Part 3

Filter by Job Type: All, Full-Time, Part-Time Feature

Update the [page_index].js file

Adding Pagination

ExamPro Markdown Lab Part 2

Adding Pagination Feature

Config file

Pagination Component

Creating the Basic Job Listing

ExamPro Markdown Lab Part 1

Technology Stack

Application Screenshots

Getting Started

Setting Up Next.js

Setting Up TailwindCSS

Setting Up Prettier and Husky Hooks (optional)

Install gray-matter and marked

Removing unnecessary file and code

Setting up jsconfig.json

Using provided components and stylesheets

Markdown Implementation

Job Postings

JobPostings Component (Page component that shows list of all jobs)

Markdown Component (For parsing markdown)

JobPage Component (Individual job posting)

Remote Development using SSH with Visual Studio Code on an AWS EC2 instance

Telescope Tech Stack

Telescope Microservices

Prerequisites:

Create your virtual machine (AWS EC2):

Connect using SSH

Setting up your AWS credentials

Installing Docker and Docker-Compose

Install Docker Engine - Community Edition

I can't open `<EC2-ip>:8000` running, what could I be doing wrong?

Update the `[page_index].js` file

Setting up `jsconfig.json`

I get `Permission denied` error when I run `docker-compose --env-file .env up -d`

What's in `aws-ip.sh`?