Malo lava, let's build with Cursor —AI Code Editor

August 24, 2024

🇼🇸 Talofa! O lo’u igoa o Tausani Ah Chong, e sau mai le nu’u o Puipa’a ma Avao

📍 Central Tāmaki Makaurau, Aotearoa

💼 Intermediate Software Developer @ Vector ⚡️

👨‍👩‍👧‍👦 Proud dad of 2 kids

Follow me on Instagram! @tausani.376

GitHub: https://github.com/tausani-ah-chong

🇼🇸 Malo le soifua

Growing up in central Aukilagi our family house was in Grey Lynn. In the late 90's, I went to a full immersion (100% samoan speaking) a'oga amata (Pre school) called A'oga Fa'asamoa, located in Ponsonby — The first of its kind in NZ. Opened by the late Papali'i Dr Pita Taouma and wife Jan Taouma

Read info here!

Aaaanyways — My 2 kids currently attend the very same A'oga amata, where im also on the Commitee/Board as a Parent rep — My first question in my first Committee meeting was — "Who maintains the school website?"

Ended up finding out that it was a previous committee member Riki Apa who built it and was launched in 2004 — I saw a chance to modernise it 20 years later, as UI and UX hasn't changed since then

This below is the current website

https://www.aogafaasamoa.school.nz/

Tools for the build

So yo, off the bat I wanted to have a jam at trying out Cursor — The AI Code Editor

I also wanted to have a go at also:

Hosting on a AWS S3 bucket (I've only ever used Vercel to deploy)
GitHub Actions to deploy to S3

Cursor (IDE)

Before you start using Cursor, you'll need to configure what models you want to use.

You can sign up to Cursor Pro which has their own features I decided to just roll with the free features

You need to also supply you api keys

Built in chat feature

With Cursor the main feature is you don't have to open up a browser or another app to ask your questions or revise some code. You just can just stay inside your IDE to chat to the model of your choice.

You can either:

Chat in-line, with cmd + K or

Open chat panel cmd + L

In-line chat

Chat panel

I enjoyed the flow of creating with Cursor, it says it looks through your repo as context so keep that in mind if you decide to work on a repo that has personal or other information you don't want to link back to OpenAI or Anthropic.

Although even though it looked through the whole repo I still had to reply to some generated code and make sure to use tailwind to style for example, I would have expected that I didn't need to do that.

AWS S3

Pretty simple setup, but would be a lot simpler with a tool like Terraform, but for this I configured all in the console.

Create S3 bucket
Make it public
Enable static website hosting
Add bucket policy (permissions)

Create your S3 bucket

Name your S3

Its good to be quite specific

Un-check Block all public access

Check the box that you acknowledge. We will be using for static website hosting.

"AWS recommends that you turn on block all public access, unless public access is required for specific and verified use cases such as static website hosting."

In Properties tab scroll all the way down

Select Edit to configure Static website hosting

Enable Static website hosting and check Host a static website

You will need to double check the output of the static files from running a build command. It might be different per framework.

e.g. using Next

next build generates a /out dir and populates /out/index.html and /out/404.html files

You will now see a URL populate so you can view your website

Next go to Permissions tab and select Edit to configure Bucket policy

{
  "Version": "2012-10-17",
  "Id": "Policy1724460713351",
  "Statement": [
    {
      "Sid": "Stmt1724460711669",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:*",
      "Resource": "arn:aws:s3:::<your S3 bucket name>/*"
    }
  ]
}

Paste in the above policy.

I ran into getting a 403 from trying to hit the url if you don't do this step.

Now you're all set to upload your code.

I decided to use GitHub actions to upload whenever I push to main

GitHub Actions

Simple steps also:

Generate yaml file
Add AWS secrets

You could just create a /<your-app>/.github/workflows/main.yml file without going through the GitHub website but I'll show anyways

Select Actions tab

Select set up a workflow yourself

All you need to do is edit the main.yml

Run your specific commands to build your app

Run command that will upload all contents from /out directory to your S3 and delete other contents beforehand

Make sure you're AWS_REGION matches for where you created your bucket

Commit your changes

Next you'll need to populate your AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY Repository secrets, so the above GitHub Action will work

You can add in Settings tab, clicking on Actions under Secrets and variables

Now you're setup so any changes merged to main will now trigger to upload your artifacts to S3

Results

So yeah thats me! Keep in mind this was just a quick weekend quest lol so time was limited.

Here are some changes I wanted to focus on for the first cut:

Make use of full width of screen
Modernise the font and keep them consistent (There are a few different fonts used in Before)
Simplify the user experience
- Much like 90's, 2000's style of making the website so accessible, to the point where there are multiple links and entry points to navigate the website. It ends up clogging up the page and actually confuses the user
- Im hoping to keep the navigation in a single place at the top, and reduce the amount of information overload for each page

I may keep expanding on the site, but all in all the main learnings came from the journey of creating:

First time using Cursor

First time hosting on S3

First time using GitHub Actions

Thats the part Im mostly happy about, and anything after is just a bonus

Make sure to check out both sites below and let me know your thoughts if you enjoyed this!

Ia fa

Before

Link to website

After