< Emilio Gozo />

Migrating to Astro

My portfolio website was based on Software Developer Folio template by Saad Pasta written in React. However, at that time, Vue has taken center stage and become my go-to framework. It's not just a fleeting fancy; I'm genuinely enjoying working with Vue.

I've contemplated rewriting everything in Vue, but the decision to stick with React was a strategic one - a deliberate choice to not only stay current with the tech landscape but also to use the opportunity to revisit and enrich my React knowledge.

What really made me decide was the desire to unlock the advantages of Server-Side Rendering (SSR) and Static Site Generation (SSG). Some benefits include SEO optimization, reduced client-side processing, improved initial page load, and more. While both React and Vue support SSR, developers often turn to dedicated frameworks like Next.js for React and Nuxt.js for Vue to seamlessly integrate these capabilities into their projects. However, what if you crave the flexibility of using different frameworks within a single project? Picture a header component in React, a side navigation in Vue, a button component written in Svelte, and a pagination written in Solid - a blend of diverse technologies. This isn't a challenge with Astro!

Astro feels tailor-made for me: I have an existing portfolio built in React, and I've been eager to integrate SSR/SSG functionalities. With Astro, I not only get the benefits of these features, but I also have the freedom to develop new components and libraries in my framework of choice - be it Vue, Svelte, Solid, or others, breaking free from the constraints of a single framework like React.

Installation

Starting a project with Astro is simple.

1. Run the setup wizard

Using pnpm for example:

pnpm create astro@latest

This will walk you through every step of setting up the new Astro project.

2. Add integrations

Astro comes with a variety of built-in integrations, primarily designed for seamless incorporation of popular UI frameworks like React, Vue, and more, as well as SSR adapters including Node, Netlify, Vercel, and others. Beyond the built-in options, the community has contributed additional integrations, and the flexibility extends to creating your own custom integrations.

In my case, I need the integrations to (1) run React components and (2) deploy to Netlify:

pnpm astro add react
pnpm astro add netlify

Components

Components can refer to native Astro components or UI framework components supported by Astro. You can distinguish the type of component based on its file extension: .astro, .jsx, .vue, and so on. For developers familiar with React and Vue, transitioning to Astro's components is seamless due to their striking similarities in implementation.

In my scenario, I aimed to reuse all components from my existing React-based template. The process was straightforward – I copied everything to the /src/components path and installed the necessary dependencies.

cp -rp <old>/src/components/* <new>/src/components

Pages & Layouts

These aspects should be familiar to seasoned React and Vue developers. Pages, in the context of Astro, are files residing in the /src/pages/ subdirectory of your project. They play a crucial role in handling routing, data loading, and defining the overall page layout for every page in your website.

Astro employs a routing strategy known as file-based routing. In this approach, each file in the /src/pages/ directory becomes an endpoint on your site, with its path determining the corresponding page.

Layouts, on the other hand, are Astro components designed to provide a reusable UI structure, akin to a page template. While there is nothing special about a layout component, it is idiomatic to organize them in a separate folder, such as /src/layouts/.

Considering my old template was a Single Page Application (SPA), I simply placed everything in the /src/pages/index.astro file:

---
import { fetchProfile } from '../lib/github'

import DefaultLayout from '../layouts/Default.astro'

import Greeting from '../sections/Greeting'
import Profile from '../sections/Profile'
import Projects from '../sections/Projects'
import Skills from '../sections/Skills'

const ghProfile = await fetchProfile()
---

<DefaultLayout title="Emilio Gozo" openGraph={{ image: `${import.meta.env.URL}/portfolio-greeting.png` }}>
  <Greeting />
  <Skills />
  {ghProfile && <Projects prof={ghProfile} />}
  {ghProfile && <Profile prof={ghProfile} />}
</DefaultLayout>

Conclusion

And there you have it – the journey of transforming my React Single Page Application (SPA) portfolio into a dynamic Astro-powered website with Server-Side Rendering (SSR) and Static Site Generation (SSG) capabilities. Now, I have the flexibility to easily add more pages as needed. Take, for instance, this very blog page – a testament to the expanded possibilities Astro has brought to my digital space.

Stay tuned for future blog posts where I dive deeper into the various facets of this revamped website, sharing insights, tips, and perhaps a sneak peek into the behind-the-scenes of my development adventures. Until then, happy coding and exploring the ever-evolving landscape of web technologies!

© Emilio Gozo