Forem: Guille Acosta

How (and Why) to enforce conventional commits on your project?

Guille Acosta — Fri, 27 Jan 2023 18:42:10 +0000

After reading a lot of post and checking a few videos I come up with a configuration which will help you to enforce conventional commit messages on your repository.

But.. Why is it important to use conventional commits?

Automatically generating CHANGELOGs.

Automatically determining a semantic version bump (based on the types of commits landed).

Communicating the nature of changes to teammates, the public, and other stakeholders.

Triggering build and publish processes.

Making it easier for people to contribute to your projects, by allowing them to explore a more structured commit history.

Enforcing conventional commits

To accomplish this, we will use:

husky: for handling the git hooks in a easy (and shareable) way.
commitizen: for a cli wizard which will help us write conventional commits.
commitlint: as the name suggests, lint our commit messages.

Ok, hands on.

pre-requisites: 
- project where you have run `npm init` or you already have a package.json.
- project where you have run `git init` or you already have a repository configured.

install commitizen as a dev dependency and save the exact version.

npx commitizen init cz-conventional-changelog --save-dev --save-exact

same for commitlint

npm install -D @commitlint/{cli,config-conventional} --save-exact

now on a file called .commitlintrc.json  set the extends to the rules from config-conventional

{  "extends": ["@commitlint/config-conventional"]}

now run husky from npx and run npm install which will trigger the just appended script prepare which executes husky install:

npx husky-init && npm install

now you need to add your hooks to prevent a commit message which is not formatted as a conventional commit:

npx husky add .husky/commit-msg 'npx --no -- commitlint --edit "$1"'

NOTE: this hook could be useful as starts up the commitizen wizard every time you type git commit on the terminal but it changes the behaviour of the git commit command and opens an editor to save the commit message.

npx husky add .husky/prepare-commit-msg "exec < /dev/tty && node_modules/.bin/cz --hook || true"

Instead, I prefer to add a script on the package.json like this:

"scripts": {
    ...
    "cz": "cz"
  },

so you can run npm run cz to start the wizard or even create an alias to shorten this command.

Releasing

now that you already have a few commits, it's time to create releases and by using semver, you will be able to show those changes on the changelog as patches, minor or major ones.

first install standard-version as follows:

npm i --save-dev standard-version

then place this new scripts on your package.json:

  "scripts": {
    ...
    "release": "standard-version",
    "release:minor": "standard-version --release-as minor",
    "release:patch": "standard-version --release-as patch",
    "release:major": "standard-version --release-as major"
  },

now just for only time do a initial release this way:

npm run release -- --first-release

CONGRATS! now you have a wonderful auto-generated changelog.md based on your conventional commit messages.

From now on after you commit your changes you will be able to run npm run release:patch (minor or major) depending on your changes.

Happy coding!

TIL: setting up proxy server on vite

Guille Acosta — Thu, 29 Dec 2022 21:04:53 +0000

So, Today I learned how to setup a proxy server on vite. I was tired of seeing this kind of lines over an over:

axios.get('localhost:5001/api/products/1234')

so, first approach was to create a .env.local and set there a env variable like this:

VITE_API_BASE_URL="localhost:5001"

this way my initial code would look like:

const API_BASE_URL = import.meta.env.VITE_API_BASE_URL
axios.get(`${API_BASE_URL}/api/products/1234`)

but this approach add this new line each time I need to get the API_BASE_URL.

So I decided to setup a proxy server. This is useful not only for "making URLs shorter" but for overcoming CORS issues if your api is in a host other than "localhost".

export default defineConfig({
  plugins: ...,
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:5001',
        changeOrigin: true,
        secure: false,
      }
    }
  }
})

Loading target from .env

let's say you would like to change that target prop based on the environment you are running the application.

You can do it by checking the command or the mode, but I recommend load the .env file and using the VITE_API_BASE_URL we already defined.

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), '');

  return {
    plugins: ...,
    server: {
      proxy: {
        '/api': {
          target: env.VITE_API_BASE_URL,
          changeOrigin: true,
          secure: false,
        },

this way, the target will depend on the VITE_API_BASE_URL defined on the .env which should be different on production, staging or local.

Fixing "http proxy error ECONNRESET"

Even if the request are succeding (by checking the network inspector) there is an error logged by vite on the terminal.

http proxy error ECONNRESET at TLSWrap.onStreamRead

for every single request which gets proxied.

So the answer posted here does the trick.

You will need first to add https as a dev dependency by doing: npm i -D https

and then importing on the top of vite.config.js:

import http from "https";

and then adding the agent prop on the proxy key /api we just created:

server: {
      proxy: {
        '/api': {
          target: env.VITE_API_BASE_URL,
          changeOrigin: true,
          secure: false,
          agent: new http.Agent()
        },

Hope this helps somebody to save some minutes on your next project. Happy coding!

Official docs can be found here: vite server proxy options

Data Science 101: Install miniconda and rstudio on a Mac

Guille Acosta — Mon, 19 Sep 2022 15:02:44 +0000

So, you want to start your Data Science journey to become a Quant developer but you have a Mac and you're not sure how to configure your environment to install miniconda and rstudio? Stay tuned, this is your post.

Step 1: install Xcode Developer Tools by running sudo xcode-select --install (you need at least Xcode 11.4)

Step 2: download and install rstudio from its website but do not open it yet.

Step 3: donwload miniconda from its website and follow the wizard steps.

with miniconda installed now you have a new command to use: conda. The idea behind conda is to create isolated environments where you can install not only different pypi libraries (as venv or virtualenv does on Python) but also install different versions of Python (or R, etc). This way you can create a conda env with python 2.9 and other conda env with python 3.10 on it.

Now it's time to open the Terminal to create a new conda env for R but first, to get the latest version we need to set the right channel.

conda config --add channels conda-forge

then you need to set the priority level as follows:

conda config --set channel_priority strict

Note: to undo this changes you can check these answers

At the time I'm writing this post default channel does not have R version >= 4.0 you can check it by running conda search r-base

Now you are good to create a new env like this:

conda create -n r-env r -y

this way you are creating a conda env called r-env which by default got latest r installed and -y flag to accept the terms.

to activate this env you should run:

conda activate r-env

once you finish your job you can deactivate it by doing:
conda deactivate
and if you want to delete this env you can do it this way:
conda env remove -n r-env

Now you are good to open rstudio and start working from there.

Happy coding!

PS: if you are running R on a M1 Mac, check this page for more information.

How to use Prismic.io on React Native

Guille Acosta — Fri, 11 Feb 2022 15:40:38 +0000

Prismic is a Content Management System, also known as headless CMS or API CMS.

I was asked to integrate Prismic.io into a React Native project, so first thing I did was to check how it was implemented on the web project.

They were using prismic-javascript library which is deprecated already and no docs available either.

The recommended solution on Prismic site is to use prismic-client along with prismic-react for react projects, but no particular examples for react-native.

I followed prismic installation steps line to line but at the time of bundling the app (I'm using an ejected expo app) came up the first issue:

While trying to resolve module `imgix-url-builder` from file `/Path/to/project/node_modules/@prismicio/helpers/dist/index.js`, the package `/Path/to/project/node_modules/imgix-url-builder/package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`/Path/to/project/node_modules/imgix-url-builder/dist/index.cjs`. Indeed, none of these files exist:

So imgix-url-builder is not being resolved, and the solution is to add a source extension to the metro config like this:

const { getDefaultConfig } = require("expo/metro-config");

const defaultConfig = getDefaultConfig(__dirname);

defaultConfig.resolver.sourceExts.push("cjs");

module.exports = defaultConfig;

Then I tried to bundle again, which succeeded but at the time of execute any prismic hook such as usePrismicDocumentByID I was receiving an error like:

error: Not implemented
node_modules/react-native/Libraries/Blob/URL.js:86:10 in URLSearchParams#set
...

After googling a little bit I found that according to this post

React Native react-native/Libraries/Blob/URL.js doesn't import all the Web API functionality due to size concerns

And to fix this we need to add a polyfill for this particular issue.

First you need to npm i react-native-url-polyfill, then add this line to your index.js:

import "react-native-url-polyfill/auto";

After that, and restarting your server (just in case), you will be able to start using the prismic hooks from prismic-react library.

Remember that you won't be able to use any Component exported from this mentioned library as this are intended to be used on web only but not on React Native.

Hope this hacks helps you to use this lib on your RN projects!