DEV Community: Midhun Krishnan R

To set env variables using terminal for playwright

Midhun Krishnan R — Thu, 06 Mar 2025 10:08:41 +0000

To run end-to-end test using PlayWright

$env:VITE_USER_NAME = "admin"
$env:VITE_PASSWORD = "123"
pnpm exec playwright test

To run end-to-end test using PlayWright in ui mode

$env:VITE_USER_NAME = "admin"
$env:VITE_PASSWORD = "123"
pnpm exec playwright test --ui

The best way to programatically reload in JS or React JS

Midhun Krishnan R — Mon, 03 Mar 2025 06:36:30 +0000

You all know that the window.location.reload(true) is now deprecated. It would show a lint error showing Expected 0 arguments, but got 1.

So that an alternative to window.location.reload(true) is:

window.location.replace(window.location.href)

How to stash a commit

Midhun Krishnan R — Mon, 17 Feb 2025 11:04:44 +0000

If you've not pushed either commit to your remote repository, you could use interactive rebasing to 'reorder' your commits and stash the (new) most recent commit's changes only.

Assuming you have the tip of your current branch (commit 111 in your example) checked out, execute the following:

git rebase -i HEAD~2

This will open your default editor, listing most recent 2 commits and provide you with some instructions. Be very cautious as to what you do here, as you are going to effectively 'rewrite' the history of your repository, and can potentially lose work if you aren't careful (make a backup of the whole repository first if necessary). I've estimated commit hashes/titles below for example

pick 222 commit to be stashed
pick 111 commit to be pushed to remote

# Rebase 111..222 onto 333
#
# Commands:
#  p, pick = use commit
#  r, reword = use commit, but edit the commit message
#  e, edit = use commit, but stop for amending
#  s, squash = use commit, but meld into previous commit
#  f, fixup = like "squash", but discard this commit's log message
#  x, exec = run command (the rest of the line) using shell
#
# These lines can be re-ordered; they are executed from top to bottom.
#
# If you remove a line here THAT COMMIT WILL BE LOST.
#
# However, if you remove everything, the rebase will be aborted.
#
# Note that empty commits are commented out

Reorder the two commits (they are listed oldest => newest) like this:

pick 111 commit to be pushed to remote
pick 222 commit to be stashed
Save and exit, at which point git will do some processing to rewrite the two commits you have changed. Assuming no issues, you should have reversed the order of your two changesets. This can be confirmed with git log --oneline -5 which will output newest-first.

At this point, you can simply do a soft-reset on the most recent commit, and stash your working changes:

git reset --soft HEAD~1
git stash

It's important to mention that this option is only really viable if you have not previously pushed any of these changes to your remote, otherwise it can cause issues for everyone using the repository.

To access terminal profile of VS Code and add commands to be run initially

Midhun Krishnan R — Thu, 19 Dec 2024 05:25:20 +0000

For windows,

Run this command in terminal,

code $PROFILE

In the opened "Microsoft.PowerShell_profile.ps1", you can add the commands to be run always,
For example:

nvs auto on

(by running this command, if the node version is specified in .nvmrc of the project. Then that node version would be taken)

Installing your react.js local package registry to your project

Midhun Krishnan R — Sat, 14 Dec 2024 08:58:17 +0000

If you are following a micro frontend architecture for your react project. You would have kept your ui-components in a different repo. (e.g: ui-elements).

If you wanted to install that micro frontend repo to your parent repo. Then follow these steps:

Go to your repo which needed to be installed (e.g: ui-elements) and run build command:

npm build

Now copy the address to the repo. It would be something like:
D:/<some-folder>/ui-elements
Go to the repo where the package to be installed (e.g: parent-app)
Go to your package.json file, give the package name in dependency and in the place of version you give "D://ui-elements"
Now run:

npm i

Your package is now installed.

Recommended Settings for VS Code for react js developers

Midhun Krishnan R — Wed, 11 Dec 2024 06:19:07 +0000

These are some recommended settings for VS Code for react js developers.
Some of them are commented, if you love to use it you can uncomment those.

{
  "editor.quickSuggestions": {
    "other": true,
    "comments": true,
    "strings": true
  },
  "editor.suggestOnTriggerCharacters": true,
  "editor.tabCompletion": "on",
  "editor.wordBasedSuggestions": "matchingDocuments",
  "javascript.suggest.autoImports": true,
  "typescript.suggest.autoImports": true,
  "eslint.enable": true,
  "prettier.requireConfig": false,
  "files.associations": {
    "*.js": "javascriptreact",
    "*.jsx": "javascriptreact"
  },
  "typescript.validate.enable": true,
  "javascript.validate.enable": true,
  "emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "javascriptreact": "html"
  },
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "javascript.updateImportsOnFileMove.enabled": "always",
  "explorer.confirmDragAndDrop": false,
  "explorer.confirmDelete": false,
  "editor.accessibilitySupport": "off",
  "workbench.iconTheme": "material-icon-theme",
  "window.zoomLevel": 0,
  "[javascript]": {
    "javascript.preferences.renameMatchingJsxTags": true,
    "editor.maxTokenizationLineLength": 2500
  },
  "extensions.ignoreRecommendations": true,
  "typescript.updateImportsOnFileMove.enabled": "always",
  "settingsSync.ignoredSettings": [],
  "workbench.settings.applyToAllProfiles": [],

  // Additional Suggestions:
  "editor.fontSize": 14,
  "editor.fontFamily": "Fira Code, Consolas, 'Courier New', monospace",
  "editor.fontLigatures": true,
  "editor.tabSize": 2,
  "editor.formatOnSave": true,
  // "prettier.singleQuote": true,
  "prettier.trailingComma": "all",
  // "prettier.arrowParens": "avoid",
  // "prettier.printWidth": 100,
  "editor.minimap.enabled": false,
  "editor.cursorSmoothCaretAnimation": "on",
  "editor.cursorBlinking": "smooth",
  "editor.renderWhitespace": "selection",
  "editor.showFoldingControls": "always",
  "editor.wordWrap": "on",
  "files.trimTrailingWhitespace": true,
  "git.autofetch": true,
  "git.enableSmartCommit": true,
  "terminal.integrated.rendererType": "dom",
  "terminal.integrated.cursorStyle": "line",
  "terminal.integrated.fontFamily": "'Inconsolata for Powerline', monospace",
  // "workbench.editor.enablePreview": false, // this settings will open pages if just selected it
  "workbench.editor.tabSizing": "shrink",
  "workbench.startupEditor": "none",
  "workbench.statusBar.visible": true,
  // "window.menuBarVisibility": "toggle",
  "breadcrumbs.enabled": true,
  "search.showLineNumbers": true,
  "editor.guides.indentation": true,
  // "workbench.colorTheme": "GitHub Dark Default",
  "json.schemas": [],
  // "files.autoSave": "afterDelay",
  "supermaven.enable": {
    "*": true
  },
  // "security.promptForLocalFileProtocolHandling": false,
  "terminal.integrated.defaultProfile.windows": "PowerShell",
  "tailwindCSS.experimental.classRegex": [
    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
    ["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
  ],
  "redhat.telemetry.enabled": false,
  "security.promptForLocalFileProtocolHandling": false,
  "vscodeGoogleTranslate.preferredLanguage": "Spanish"
}

Simplified Guide to Registering a Private Package Registry to GitLab Using a CI/CD Pipeline for Vite React.js Projects

Midhun Krishnan R — Thu, 05 Sep 2024 07:07:10 +0000

Authenticating via the `.npmrc` File

To authenticate your project with GitLab's package registry, create or edit the .npmrc file in the root directory of your project, where your package.json is located. Add the following lines:

@scope:registry=https://your_domain_name/api/v4/projects/${CI_PROJECT_ID}/packages/npm/
//your_domain_name/api/v4/projects/${CI_PROJECT_ID}/packages/npm/:_authToken=${CI_JOB_TOKEN}

Explanation:

Replace @scope with the root-level group of the project to which you're publishing the package.
Replace your_domain_name with your GitLab domain, e.g., gitlab.com.
${CI_PROJECT_ID} is the project ID, that you need to be set in the CI runner.
"${CI_JOB_TOKEN}" is your job token, that you need to be set in the CI runner.

This configuration ensures that your package manager (e.g., npm or pnpm) authenticates correctly with the GitLab package registry using the CI/CD pipeline.

Publishing a package by using a CI/CD pipeline

To automate the package publishing process, add the following configuration to your .gitlab-ci.yml file:

image: node:latest  # You can replace 'latest' with a specific Node.js version if required
stages:
  - deploy

# Publish to package registry
publish-npm:publish-npm:
  stage: deploy
  before_script:
    - echo "Setting up Node environment..."
    - curl -fsSL https://fnm.vercel.app/install | bash
    - export FNM_PATH="/home/gitlab-runner/.local/share/fnm"
    - export PATH="$FNM_PATH:$PATH"
    - eval "$(fnm env)"
    - fnm install 20
    - fnm use 20
    - node -v
    - npm -v
    - npm install -g pnpm
    - pnpm install
  script:
    - echo "@scope:registry=https://your_domain_name/api/v4/projects/${CI_PROJECT_ID}/packages/npm/" > ~/.npmrc
    - echo "//your_domain_name/api/v4/projects/${CI_PROJECT_ID}/packages/npm/:_authToken=${CI_JOB_TOKEN}" >> ~/.npmrc
    - pnpm build
    - npm publish
  rules:
    - if: '$CI_COMMIT_BRANCH == "main" && $CI_PIPELINE_SOURCE == "push"'  # Run when MR is merged to main branch

Key Points:

Replace @scope with your project’s root-level group.
Replace your_domain_name with your domain name, for example, gitlab.com.

Necessary Changes in `package.json`

To prepare your package.json for publishing, ensure the following updates are made:

Remove private: true: This flag prevents the package from being published. It should be removed.
Use vite-plugin-lib-inject-css: This plugin ensures that CSS is injected into the build file, avoiding the need to import CSS separately after installing the package.
Add react and react-dom as peerDependencies: This ensures that your package doesn’t bundle its own versions of react and react-dom, allowing the host project to manage these dependencies.

Here's an example package.json configuration:

  "name": "@scope/package-name",
  "files": [
    "dist"
  ],
  "sideEffects": [
    "**/*.css"
  ],
  "main": "./dist/index.cjs",
  "module": "./dist/index.js",
  "exports": {
    ".": {
      "import": {
        "default": "./dist/index.js"
      },
      "require": {
        "default": "./dist/index.cjs"
      }
    },
    "./css": "./dist/style.css"
  },
  "publishConfig": {
    "registry": "https://your_domain_name/api/v4/projects/${CI_PROJECT_ID}/packages/npm/"
  },
  "devDependencies": {
    "vite-plugin-lib-inject-css": "^2.1.1",
  },
  "peerDependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  }

Necessary Changes in `vite.config.json`

Update your vite.config.js file to include the CSS injection plugin and configure the build process:

import { dirname, join, resolve } from "path";
import { libInjectCss } from "vite-plugin-lib-inject-css";

import { peerDependencies } from "./package.json";

plugins: [libInjectCss()],
build: {
    target: "esnext",
    minify: false,
    lib: {
      entry: resolve(__dirname, join("src", "components", "index.js")),
      fileName: "index",
      formats: ["es", "cjs"],
    },
    rollupOptions: {
      external: ["react/jsx-runtime", ...Object.keys(peerDependencies)],
    },
  },