We migrated our landing page woovi.com from Gatsby to Next.js. Gatsby was a good idea back then, but Next.js evolved better and faster. We need to modify our landing page faster to add new products, articles and experimentation, so the migration to Next.js was worth it.
Migrating the Landing page
Our landing page has many pages and articles, and we want to make sure we migrated everything from the old Gatsby to the new Next.js.
Our landing pages are in a monorepo, and instead of modifying the existing Gatsby landing page (woovi package), we created a new package woovi-next where we are going to do the migration.
This migration pattern can be called Tick Tock or parallel implementation, where both implementation coexist until the new ones reaches the feature parity, and we can discontinue the old one.
This is the safest way to migrate anything, and let you compare the old with the new.
Making it sure we migrated all the pages
Both Gatsby and Next.js uses a pages folder structure to declare each route/endpoint/page. So the easiest way to check if we migrated all the pages is to check if the pages folder are "equal". Two folders are equal if they have the same files, and folder recursively.
Here is the script that checks that both pages have the same structure.
export const compareDirectories = async (dir1: string, dir2: string) => {
const dir1Contents = fs.readdirSync(dir1, { withFileTypes: true });
for (const item of dir1Contents) {
const itemPath1 = `${dir1}/${item.name}`;
const itemPath2 = `${dir2}/${item.name}`;
if (!fs.existsSync(itemPath1) || !fs.existsSync(itemPath2)) {
missing++;
// eslint-disable-next-line
console.log(
`File or directory not found: ${
!fs.existsSync(itemPath1) ? itemPath1 : itemPath2
}`,
);
continue;
}
const stats1 = fs.statSync(itemPath1);
const stats2 = fs.statSync(itemPath2);
if (stats1.isDirectory() && stats2.isDirectory()) {
// recursively compare subdirectories
const subDirsEqual = compareDirectories(itemPath1, itemPath2);
if (!subDirsEqual) {
continue;
}
} else if (stats1.isFile() && stats2.isFile()) {
continue;
} else {
// eslint-disable-next-line
console.log(
`Item types don't match: ${itemPath1} (${
stats1.isDirectory() ? 'directory' : 'file'
}) vs ${itemPath2} (${stats2.isDirectory() ? 'directory' : 'file'})`,
);
// item types don't match
continue;
}
}
// all items in the directories are equal
return true;
};
This is how to use the function:
const cwd = process.cwd();
const gatsbyPages = path.join(cwd, './packages/woovi/src/pages');
const nextPages = path.join(cwd, './packages/woovi-next/src/pages');
await compareDirectories(gatsbyPages, nextPages);
Here is the output of our script during our migration:
File or directory not found: packages/woovi-next/src/pages/ecommerce/images
File or directory not found: packages/woovi-next/src/pages/plugin
File or directory not found: packages/woovi-next/src/pages/pricing
File or directory not found: packages/woovi-next/src/pages/pricing-old
File or directory not found: packages/woovi-next/src/pages/qrcode/scanner
File or directory not found: packages/woovi-next/src/pages/sales
File or directory not found: packages/woovi-next/src/pages/virtual-account
In Summary
You can write scripts and automations to help you migrate a website and avoid missing some page.
Instead of using a sitemap or something more complex, just comparing two folders was enough to achieve our goal.
We are going to write more about our automation for our landing page in the next articles.
Woovi
Woovi is a Startup that enables shoppers to pay as they like. To make this possible, Woovi provides instant payment solutions for merchants to accept orders.
If you want to work with us, we are hiring!
Photo by Sumner Mahaffey on Unsplash
Top comments (0)