npm run build is a command used in JavaScript development to create a production-ready build of the application. It is typically defined as a script in the package.json file.
The build script typically includes various tasks such as compiling and bundling JavaScript code, optimizing assets (such as CSS and images), transpiling code to be compatible with older browsers, and any other necessary processing steps needed to prepare the application for deployment.
Running npm run build will execute all these tasks in the defined order and generate optimized, minified, and ready-to-deploy files in a designated build folder. These files can then be uploaded to a web server or hosting service to make the application available to users.
In this topic, we illustrate how to use npm run build to create an optimized version of the Google Gemini Web Chat source code making it ready for production and deployment. The output of the build process are Javascript, CSS, and HTML files that are stored in the dist directory. Thanks to Franklin Méndez for developing the Google's Gemini Web Chat and for insights on how to deploy the npm build!
The complete process to making the application ready for production with npm build is as follows (illustrated using Ubuntu Linux 23.04):
Install nodejs and npm
- $sudo apt install nodejs
By default the npm package is installed with nodejs, if not install npm:
- $sudo apt install npm
Check versions (18 or higher versions of Node is required):
- nodejs --version
- v18.13.0
- npm --version
- 9.2.0
Install TypeScript (otherwise you will get the error more or less similar to npm build error: sh: 1: tsc: not found when your run build):
- sudo npm install -g typescript
- tsc --version
- Version 5.3.3
Run npm build
Download the Google Gemini Web Chat from here.
Unzip/untar the folder and edit the file vite.config.ts by adding base: './',:
- import { defineConfig } from 'vite'
- import react from '@vitejs/plugin-react'
- // https://vitejs.dev/config/
- export default defineConfig({
- base: './',
- plugins: [react()],
- })
Use Terminal to move into the main directory and run the npm build:
- $~/google-gemini-ui-main$ npm run build
- > google-gemini-ui@0.0.0 build
- > tsc && vite build
- vite v5.0.12 building for production...
- ✓ 251 modules transformed.
- dist/index.html 1.45 kB │ gzip: 0.80 kB
- dist/assets/index-gyr9F5vl.css 7.39 kB │ gzip: 1.97 kB
- dist/assets/index-F_QJ3WdT.js 344.86 kB │ gzip: 105.97 kB
- ✓ built in 1.43s
Possible Errors and How to Troubleshoot Them
Possible Error 1
When running npm build, you may encounter the error message:
* /bin/npm
/usr/bin/npm
The command could not be located because '/bin:/usr/bin' is not included in the PATH environment variable.
npm: command not found
If so, open the file that sets environment variables for your shell. Depending on the shell you are using, the file could be one of the following:
For Bash: ~/.bashrc or ~/.bash_profile (For Linux systems such as Ubuntu)
For Zsh: ~/.zshrc or ~/.zsh_profile
Use a text editor of your choice, let us say Vim/Vi to edit the file:
- $sudo vim ~/.bashrc
- export PATH="/bin:/usr/bin:$PATH"
This adds the missing directories to the PATH variable and appends the existing PATH to it.
Possible Error 2
Again, you may encounter these errors (the error message is very long, hence the output is truncated):
src/App.tsx:1:29 - error TS2307: Cannot find module 'react-redux' or its corresponding type declarations.
1 import { useSelector } from 'react-redux'
~~~~~~~~~~~~~
src/App.tsx:12:5 - error TS7026: JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists.
12 <main className={`app-wrapper ${theme === 'light' ? 'light' : 'dark'}`}>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
src/App.tsx:12:5 - error TS2307: Cannot find module 'react/jsx-runtime' or its corresponding type declarations.
12 <main className={`app-wrapper ${theme === 'light' ? 'light' : 'dark'}`}>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
13 {API_KEY ?
To address these errors, make sure to install the react module and its type definitions by opening your terminal in your project's root directory and running the following commands:
- $~/google-gemini-ui-main$ npm install react react-dom
- WARN deprecated @types/redux-persist@4.3.1: This is a stub types definition for redux-persist (https://github.com/rt2zz/redux-persist). redux-persist provides its own type definitions, so you don't need @types/redux-persist installed!
- added 327 packages, and audited 328 packages in 2m
- 111 packages are looking for funding
- run `npm fund` for details
- found 0 vulnerabilities
- $~/google-gemini-ui-main$ npm install --save-dev @types/react @types/react-dom
- up to date, audited 328 packages in 5s
- 111 packages are looking for funding
- run `npm fund` for details
- found 0 vulnerabilities
Finally, run npm build if you did not succeed previously:
- $npm run build
Now, you can use Google Generative AI - Gemini here at TSSFL Technology Stack:
llm