Let’s quickly introduce our main heros of this article.<\/p>\n\n\n\n
Vite <\/strong>is a no-bundle ESM dev server that works a bit differently – it doesn’t bundle anything unlike e.g. Webpack<\/strong>. Because of this Vite<\/strong>‘s sever starts almost instantly and offers pretty much instant page hot reloading.<\/p>\n\n\n Pnpm <\/strong>is an alternative to npm and yarn. Usually our project use simillar packages so why install them separately each time? Pnpm <\/strong>takes advantage of that and keeps only one copy of a package. It allows us to install dependencies much faster.<\/p>\n\n\n\n Obviously there’s much more depth in both of those technologies, but that’s not our focus here. So now it’s time for some refactoring, let’s get to it!<\/p>\n\n\n\n Making a big change to the project like switching out tooling will always break something but our goal is to make the changes bare minimum.<\/p>\n\n\n\n Because we’ll no longer be using Create React App<\/strong> we need to eject by running eject <\/strong>script. It will stop hiding what it’s got installed under the hood and instead eject those things into your project’s package.json<\/strong> for everyone to see.<\/p>\n\n\n\n But first let’s do what’s obvious, we need to remove node_modules <\/strong>and package-lock.json<\/strong>, because pnpm <\/strong>creates it’s own lock file and we cannot reuse previous dependencies.<\/p>\n\n\n\n Then our next best bet is to add two plugins with pnpm <\/strong>(or in package.json<\/strong>) by running below command.<\/p>\n\n\n\n We also need to update scripts in our package.json with following commands:<\/p>\n\n\n\n Now we need to do small changes to our code structure – we need to keep index.html at the root of our project, not in the public directory.<\/p>\n\n\n Last thing that we need to take care of is vite.config.ts which is home to all settings regarding Vite<\/strong>. Bare minimum for a React <\/strong>application is to add reactRefresh <\/strong>plugin, but of course we can configure a plethora of elements here such as proxies, dev server settings and path resolving (which will be important later).<\/p>\n\n\n\n So it’s not that difficult, right? Only So basically our server won’t start unless we fix those issues.<\/p>\n\n\n\n But let’s tackle the simplest issues for now. First of all let’s remove scripts <\/strong>and config <\/strong>folders, we won’t need them anyway. Next, we can’t have jsx in .js<\/strong> or .ts<\/strong> file end of story. Vite <\/strong>won’t allow it so we have no choice but to change them. Depending on your case it may be a few files or every single file in your codebase.<\/p>\n\n\n\n Because we aren’t using Webpack <\/strong>eco system anymore we need to use different loader for svgs. I’ll be using vite-plugin-svgr<\/a>. It’s npm <\/strong>page provides all necessary info on how to configure it for your project, so I’ll skip that part.<\/p>\n\n\n\n However biggest problem that we have are our import paths. Webpack <\/strong>was fine with paths like And then our path should change to There also might be different other things broken depending on what your project actually uses so it’s not a full guide to every issue.<\/p>\n\n\n\n But what about pnpm you might ask and that’s correct, we need to change one thing in our CI <\/strong>config (in our case Gitlab<\/strong>) to make package cache work. Basically we need to update 2 entries. We need to add a path .pnpm-store<\/strong> to cache and install pnpm<\/strong> globally on our image because that’s not something that is provided (read more about robust CI\/CD pipelines for Node projects<\/a>).<\/p>\n\n\n\n In short – yes, very much so. Our CI <\/strong>pipeline got reduced by about 2 minutes and because of the hot reload feature of Vite <\/strong>development got much smoother as a result. There were a few hiccups along the way but it wasn’t anything that couldn’t be handled with few Google searches \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":" Why bother? Life is too short to waste it on tedious tasks such as installing dependencies or waiting for the Webpack to finish bundling your whole app even though you’ve made a small label change. That’s when modern frontend technologies come in. I’ll be focusing on the migration of an typical old setup (~2019) with […]<\/p>\n","protected":false},"author":3,"featured_media":837,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_case_study_excerpt":"","footnotes":""},"categories":[68,3],"tags":[47,69,412,414,416,418],"class_list":["post-812","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","category-software-development","tag-ci","tag-javascript","tag-pnpm-en","tag-react-en","tag-vite-en","tag-webpack-en"],"_links":{"self":[{"href":"https:\/\/nubisoft.io\/blog\/wp-json\/wp\/v2\/posts\/812","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nubisoft.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nubisoft.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nubisoft.io\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/nubisoft.io\/blog\/wp-json\/wp\/v2\/comments?post=812"}],"version-history":[{"count":21,"href":"https:\/\/nubisoft.io\/blog\/wp-json\/wp\/v2\/posts\/812\/revisions"}],"predecessor-version":[{"id":1266,"href":"https:\/\/nubisoft.io\/blog\/wp-json\/wp\/v2\/posts\/812\/revisions\/1266"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nubisoft.io\/blog\/wp-json\/wp\/v2\/media\/837"}],"wp:attachment":[{"href":"https:\/\/nubisoft.io\/blog\/wp-json\/wp\/v2\/media?parent=812"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nubisoft.io\/blog\/wp-json\/wp\/v2\/categories?post=812"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nubisoft.io\/blog\/wp-json\/wp\/v2\/tags?post=812"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}![\"\"](\"https:\/\/nubisoft.io\/blog\/wp-content\/uploads\/2022\/01\/esm.3070012d-1024x641.png\")
It was never meant to be simple<\/h2>\n\n\n\n
pnpm i vite @vitejs\/plugin-react<\/pre>\n\n\n\n
\n
\"start\": \"vite\", \n\"preview\": \"vite preview\", \n\"build\": \"tsc && vite build\"<\/pre>\n\n\n\n
![\"\"](\"https:\/\/nubisoft.io\/blog\/wp-content\/uploads\/2022\/01\/image.png\")
<\/figure>\n<\/div>\n\n\nexport default defineConfig({\n plugins: [\n reactRefresh(),\n ],\n});<\/pre>\n\n\n\npnpm start<\/code> and we can get back to development, right? Not really let’s list everything that is wrong with our project now:<\/p>\n\n\n\n\n
import Component from 'components\/Component'<\/code>, but Vite <\/strong>is not. Unfortunately path resolver in Vite <\/strong>will not accept non-prefixed paths so that means we need to update those paths. First we need to add a resolver to vite.config.ts<\/strong>.<\/p>\n\n\n\n resolve: {\n alias: {\n '@': path.resolve(__dirname, 'src'),\n },\n },<\/pre>\n\n\n\nimport Component from '@\/components\/Component'<\/code>. I’ve spend quite a lot of time on this problem, but we won’t get away with that change.<\/p>\n\n\n\ncache:\n key: node_modules\n paths:\n - .pnpm-store\n\nbuild UI:\n stage: build\n image: node:14.16.0-buster\n before_script:\n - curl -f https:\/\/get.pnpm.io\/v6.16.js | node - add --global pnpm@6\n - pnpm config set store-dir .pnpm-store\n script:\n - pnpm install\n - pnpm lint\n - pnpm build\n artifacts:\n expire_in: 1d\n paths:\n - .\/build<\/pre>\n\n\n\n
Was it worth it?<\/h2>\n\n\n\n