Jesus Ordosgoitty's blog

Migrating a Create-React-App monorepo to Vite

Jesús O. — Thu, 17 Aug 2023 18:08:43 GMT

I got several years developing React.js applications using creat-react-app as everyone did and never worried too much about tooling until it started to feel like a burden.

My first touch with Vite was with a friend of mine building a Vue frontend, but it wasn't until a few months ago I was presented with a coworker repo with React.js and it caught up with me the fast bundling and easy-to-start as with CRA.

So, after testing with a quick migration of a previous smaller project, I thought it was time to take this big monorepo to the next level.

Context

I had a two-years old monorepo built with CRA and managed with yarn workspaces. The repo structure was pretty simple, just a /packages directory, each one with a project (in this case, /admin and /app )and also a /lib directory which contains all shared components and utility files.

/
-- ./ github
-- / packages
---- / admin
------ / public
-------- index.html
------ / src
------ .env
------ config-overrides.js
------ package.json
---- / app
---- / lib
------ /components
------ /assets
------ /api
-- package.json
-- README.md
-- yarn.lock

Using customize-cra and react-app-rewired packages allowed me to customize the dev compiling process in my config-overrides.js.

Initial setup

The first thing I did was to install Vite and related packages using yarn in my root directory:

yarn add -W vite @vitejs/plugin-react

Second, create a vite.config.js in each project's root directory:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig(() => {
  return {
    build: {
      outDir: 'build',
    },
    plugins: [react()],
  };
});

This code is implementing Vite's React Plugin to define a building setup. I decided to keep build as my directory for bundled assets as its already defined in my Github actions.

Next, I needed to modify my index.html to match Vite requirements. I started by moving my index.html from /public of each one of my project's root and added a script tag with my JS entry point as my src attribute.

<html lang="en">
  <head>
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>Admintitle>
  head>
  <body>
        <noscript>You need to enable JavaScript to run this app.noscript>
        <div id="root">
            <div class="loader-container">
                <div class="loader">Loading...div>
            div>
        div>
+       <script type="module" src="/src/index.jsx">script>
  body>
html>

I am accustomed to JSX files, and also have a small utility to rename all file name extensions so it wasn't a problem for me to rename all files from .js to .jsx.

Then I replaced every instance of react-app-rewired with Vite custom commands on my npm scripts for every project in the /projects directory. For example:

Custom configurations

At the first server start, I saw on my console a strange error I have never seen before: Uncaught SyntaxError: ambiguous indirect export: default. This time I forgot I had a bunch of SVG assets inside the lib directory.

Solution was simple: for each vite's config file I added support for SVG files with vite-plugin-svgr:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
+ import svgr from 'vite-plugin-svgr';

export default defineConfig(() => {
  return {
    build: {
        outDir: 'build',
    },
    plugins: [
        react(),
+        svgr({ svgrOptions: { icon: true } }),
    ],
  };
});

Another important step during the migration was to replace all process.env in all sites of the project with import.meta.env, and as I was using environment variables on each project, also I had to replace REACT_APP with VITE. In the following example, my configs.js file inside the shared directory.

Also, in order to point static files served by Vite in /public directory, I removed all occurrences of %PUBLIC_URL% in index.html file.

Finally, removed all previous packages used before.

yarn remove -W react-scripts customize-cra react-app-rewired

Final thoughts

Migrating from create-react-app to Vite was a pretty straightforward process and there are plenty of guides out there, but with a monorepo I thought things were going to be different. Surprisingly it wasn't and the steps were as simple as in a normal repository. Here is the final structure of the repository. Note that there is no config-overrides.js as it is unnecessary now.

/
-- ./ github
-- / packages
---- / admin
------ / public
------ / src
------ .env
------ index.html
------ vite.config.js
------ package.json
---- / app
---- / lib
------ /components
------ /assets
------ /api
-- package.json
-- README.md
-- yarn.lock

If you found this post useful and would like to stay updated on my work, feel free to connect with me on any of my social profiles.

Share and comment your thoughts on it for more content like this. Thanks!

Building a Timestamp Microservice

Jesús O. — Tue, 07 Aug 2018 16:14:56 GMT

Around two months ago I was determined to learn backend development, and so I deep my toe in it with some help of Programming for the Web with JavaScript course. It’s a very good course, though at that time I quickly began to get uninterested in videos and quizzes. Now, my college is beginning to ask for real programming projects involving backend and database solutions, and I felt that leaving that course was not the best idea. Anyway, I thought this fCC project may be a good first hands-on experience with backend development. And it was.

It basically consist of an api which will request a date under the form of unix timestamp or a normal English date; you send it one and returns a calculated form of the other back to you. As you’ll need to set up a server, create a module that accepts an api request (as /api/timestamp/) and returns an appropriate JSON object including the date in both formats: This project is one of the best to learn how a web server AND an API works “under the hood”.

First thing’s first — App architecture

I tried to follow some nice tutorials I found of this topic (all of them are in the notes section) and as I wanted to keep the structure a bit “professional” I create the following:

.
├── routes                  
│   └── routes.js           
├── services                 
│   └── timestamp.js
├── public
│   ├── favicon              
│   ├── styles          
│       └── main.css
├── views                    
│   └── index.html
├── package.json           
├── README.md         
└── app.js

The views — or the front page

No templates, jsx, libraries, etc. Just a simple ol’ html file.

html>
<html>
    <head>
        <title>Timestamp microservicetitle>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <meta name="viewport" content="width=device-width;initial-scale=1.0">
        <link rel="icon" type="image/png" size="32x32" href="favicon/favicon-32x32.png">
        <link href="[https://fonts.googleapis.com/css?family=Open+Sans](https://fonts.googleapis.com/css?family=Open+Sans)" rel="stylesheet">
        <link rel="stylesheet" href="styles/main.css">
    head>
    <body>
        <section class="container">
            <h1>Timestamp microserviceh1>
            <h2>Example usageh2>
            <ul>
                <li>
                    <a href="/api/timestamp/2018-08-02">jesuodz-timestamp.glitch.me/api/timestamp/2018-08-02a>
                li>
                <li>
                    <a href="/api/timestamp/1533227498">jesuodz-timestamp.glitch.me/api/timestamp/1533227498a>
                li>
                <li>
                    <a href="/api/timestamp/">jesuodz-timestamp.glitch.me/api/timestamp/a>
                li>
            ul>
            <h2>Outputh2>
            <div class="output-example">
                <code>
                    {"unix":1533168000,"utc":"Thu, 02 Aug 2018 00:00:00 GMT"}
                    <br>
                    {"unix":1533227498,"utc":"Thu, 02 Aug 2018 16:31:38 GMT"}
                    <br>
                    {"unix":1533240424,"utc":"Thu, 02 Aug 2018 20:07:04 GMT"}
                code>
            div>
        section>
    body>
html>

The service

This is the section of our app that will do our calculations. I’m using moment.js and the module pattern to build a neat module.

const moment = require('moment');
const timestamp = { parser : null };

let processed = {
    "unix": "error",
    "utc": "Invalid value"
};

const formatUTC = function(momentObj) {
    return momentObj.format('ddd, DD MMM YYYY HH:mm:ss') + ' GMT';
}

timestamp.parser = (request, response) => {
    const value = request.params.query;

// Handle an empty date string
    if (Object.keys(request.params).length == 0) {    
        let now = moment().utc();
        processed.unix = now.unix();
        processed.utc = formatUTC(now);
        response.send(processed);
        return;
    }

if (isNaN(+value) && moment(value, 'YYYY-MM-DD', true).isValid()) {
        processed.unix = moment.utc(value).unix();
        processed.utc = formatUTC(moment(value));
    } else if (!isNaN(+value)) {
        processed.unix = +value;
        processed.utc = formatUTC(moment.utc(moment.unix(+value)));
    } else {
        response.json({"error" : "Invalid value"});
        return;
    }

response.send(processed);
}

module.exports = timestamp;

Remember that conversions from and to unix timestamp are always made in local timezone but fCC user stories said that them should be made in UTC timezone. Moment makes that easier to deal with.

The routes

const router = require('express').Router();
const timestamp = require('../service/timestamp.js');

// Handle routes
router.route('/api/timestamp/').get(timestamp.parser);
router.route('/api/timestamp/:query').get(timestamp.parser);

// Main page
router.get('/', (request, response) => {
    response.sendFile('index.html', { root: './views/' });
});

module.exports = router;

At this moment, routing is the most difficult concept to understand for me. It looks counterproductive to me I can’t redirect all-non api requests to the front page, and the only fix I found was to add another handler for those request in the server file.

The server

Okay, every express tutorial must explain what app.listen(); do but, you know this is not a tutorial and there are plenty of them out there, so I’m keeping things simple and I’ll what are the peeks of this block of code: first I’m importing the routes (all the routing stuff deserve their own file), then I use express.static('public') to serve all static content like css and favicons.

After that, we handle all routes with app.use so our server knows where to send “/api” request and “/” goes to the home page. Also I said before all requests are processed here as 404 errors, here is defined as app.use('*', function); .

const express = require('express');
const app = express();
const routes = require('./routes/index.js');

// Serve public files
app.use(express.static('public'));

// Handle routes
app.use('/api/', routes);
app.use('/', routes);
app.use('*', (request, response) => {
    response.send("404 — File not found");
});

// Create and start the server
const port = process.env.PORT || '3000'; 
app.listen(port, () => {
    console.log(`Listening on localhost:${port}`);
});

Lastly, we fired up the server setting it with any or the default port (process.env.PORT || '3000'); ).

Some notes aside

This project was a very good introduction to building a node/express app. Although I still don’t know clearly how routing works, I think it’s still a success (maybe?).

Live demo / Source code
Structure of a Node.js API Project: I totally copy the structure of this article 😅.
Writing Modular Javascript: It’s also a good tutorial, though I think it’s better for frontend projects though.

Before you leave

If you would love to read even more content like this, feel free to visit me on Twitter a place I usually share my life and thoughts, or just have a look at my website.

I'd love to count you as my ever-growing group of awesome friends! :)

See you the next time!

I lost my #100DaysOfCode streak… and my computer

Jesús O. — Thu, 22 Feb 2018 00:20:49 GMT

A week ago, the motherboard of my computer stopped working. And to make it worse, the capacitors of the screen were failing since December, and in the same day they died. So at that moment I only had my keyboard and a borrowed mouse.

That left me with a bitter feeling. You never know when machines will fail, I always told myself. So I did many backups and alternative plans but suddenly, I found a point in my systems that could fail (the computer) and I don’t have the resources to buy another.

And it broke. Every plan or system I build did not matter after I lost it. That’s what I was thinking around a week ago, after making a really good progress coding and in college.

So, after three or four hours complaining and fretting, I thought of all those self-improvement and self-help articles and books I read and how much they suck. Unconsciously, I calm down a bit and then I made lists of “things to do” of the house. I followed the list and cleaned my room and part of the house, put everything I should have thrown in the trash and organized almost everything.

Many written documents of that genre can be summarized in simple steps as:

Calm down
Realize of your current situation
Plan
And act.

Look for mentors, resources, knowledge, or start learning, programming, reading, writing, marketizing, they are all part of those two last steps. You’re the only one who can make them happen.

On Monday I received another computer. A borrowed one, again. But it doesn’t matter because one day I will have my own, won with my effort. I just need to follow the plan.

Before you leave

If you would love to read even more content like this, feel free to visit me on Twitter a place I usually share my life and thoughts, or just have a look at my website.

I'd love to count you as my ever-growing group of awesome friends! :)

See you the next time!

My 2018 Coding Journey | #100DaysOfCode

Jesús O. — Thu, 18 Jan 2018 23:39:59 GMT

Ending last year, I decided to take part in a round 100 Days Of Code Challenge. To know more about the challenge read this blog post by Quincy Larson or this article by Alexander Kallaway, which also explains in detail the foundations of the associated movement.

My plan is to fill the gaps of knowledge in software development and computer science, while building projects along the way. Also, as part of my public commitment I’ll be sharing my progress in github and will also be posting on Medium, at least once a week.

My background

I started learning HTML, CSS and Javascript in 2014 with tutorials in Codeacademy. At that time, programming seemed so simple with the lessons but horrifly complicated when creating projects. So, I unconsciously decided to stop learning and just do nothing.

Later on 2015, I’ve got interested again and learned python with an entire specialization in Coursera. The simplicity of the language caugth my attention and, even though the professor was really good explaining each lesson, my lack of effort made me lose the way and I stopped my learning again. But this time was different because it wasn’t just learning, it was practicing and sharpening the skills I got on previous courses. I didn’t have enough confidence in myself and in the path I had chosen so I simply left it without explanation.

Moving forward in mid 2016 I went back to learning web developmente with Free Code Camp and at the same time I entered in college in the faculty of Computer Science from Universidad de Oriente. That time I felt I wasn’t so bad in software development: it looked like my plan was going on well because much of the topics covered in class I already knew so it was easy to pass the year. Very wrong. Even with a slow pace in May of past year I throw aside all my projects and I didn’t pass one subject as well.

Last months of 2017 were critical for me and my whole country. College was open but working at half paced. I had time to think about what are my problems, what I really care and what I should focus on.

Entering #100DaysOfCode. Again

I’ve taken this challenge before, and my longest streak was something like 22 days before giving up. Like three times, and once was already this year. But this time I’m not going away and no matter what are the problems I will be facing.

My goal is to grasp as much about web development and computer science in general, and do other stuff along the way as improve my english and college grades. My complete plan is on github and if everything goes well, I’ll expect to get at least a freelance job.

This is the part of the story that becomes a little personal

I am somewhat terrified for the amount of work I decided to do and problems I didn’t choose to get. Things are going very bad here in Venezuela and it’s not going to improve in the short term, and combined with my mental problems this becomes a perfect time bomb I don’t want to exploit. I’ve noticed that programming is my only source of stability in this chaos. Maybe it’s impossible to complete my study plan but it’s something I want to do, I need to do and have to because as hard as it might sound, no one will ever do it for me. And in a way, it is fine.

As there’re factors and situations that determine the kind of opportunities one receive from life, there are also moments when one must make decisions and do the right things to change ones future reality. I don’t even know if someone will ever read this. I only want to look back at this post and said “Oh my… English was so bad and I was so dramatic!”. Of course, this isn’t only a blog post, it’s a public commitment for my current self, a reminder to recall what I really want to become and a motivation to keep coding until this post turn in a congratulations letter from my past.

So, here I go!

Before you leave

If you would love to read even more content like this, feel free to visit me on Twitter a place I usually share my life and thoughts, or just have a look at my website.

I'd love to count you as my ever-growing group of awesome friends! :)

See you the next time!