npm run build for Creating a Production-Ready Build of the Application with Real Example

[Eli]

Chat with Google Gemini or proceed to reading the post.

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

Code: [Select all] [Expand/Collapse]

1. $sudo apt install nodejs

By default the npm package is installed with nodejs, if not install npm:

Code: [Select all] [Expand/Collapse]

1. $sudo apt install npm

Check versions (18 or higher versions of Node is required):

Code: [Select all] [Expand/Collapse]

1. nodejs --version
2. v18.13.0

Code: [Select all] [Expand/Collapse]

1. npm --version
2. 9.2.0

Install TypeScript

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):

Code: [Select all] [Expand/Collapse]

1. sudo npm install -g typescript

You may also check version as follows:

Code: [Select all] [Expand/Collapse]

1. tsc --version
2. 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: './',:

Code: [Select all] [Expand/Collapse]

1. import { defineConfig } from 'vite'
2. import react from '@vitejs/plugin-react'
3.  
4. // https://vitejs.dev/config/
5. export default defineConfig({
6.   base: './',
7.   plugins: [react()],
8. })

Use Terminal to move into the main directory and run the npm build:

Code: [Select all] [Expand/Collapse]

1. $~/google-gemini-ui-main$ npm run build

The result of npm build looks like this:

Code: [Select all] [Expand/Collapse]

1. > google-gemini-ui@0.0.0 build
2. > tsc && vite build
3.  
4. vite v5.0.12 building for production...
5. ✓ 251 modules transformed.
6. dist/index.html                   1.45 kB │ gzip:   0.80 kB
7. dist/assets/index-gyr9F5vl.css    7.39 kB │ gzip:   1.97 kB
8. dist/assets/index-F_QJ3WdT.js   344.86 kB │ gzip: 105.97 kB
9. ✓ 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:

Code: [Select all] [Expand/Collapse]

1. $sudo vim ~/.bashrc

Then add the following line at the end of the file:

Code: [Select all] [Expand/Collapse]

1. export PATH="/bin:/usr/bin:$PATH"

Save the file and close (!wq).

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:

Code: [Select all] [Expand/Collapse]

1. $~/google-gemini-ui-main$ npm install react react-dom

This command will give an output similar to this:

Code: [Select all] [Expand/Collapse]

1. 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!
2.  
3. added 327 packages, and audited 328 packages in 2m
4.  
5. 111 packages are looking for funding
6.  run `npm fund` for details
7.  
8. found 0 vulnerabilities

Code: [Select all] [Expand/Collapse]

1. $~/google-gemini-ui-main$ npm install --save-dev @types/react @types/react-dom

The output of this command is:

Code: [Select all] [Expand/Collapse]

1. up to date, audited 328 packages in 5s
2.  
3. 111 packages are looking for funding
4.   run `npm fund` for details
5.  
6. found 0 vulnerabilities

Finally, run npm build if you did not succeed previously:

Code: [Select all] [Expand/Collapse]

1. $npm run build

Get the output of the npm build in the dist directory and upload to a live server for production and deployment.


Now, you can use Google Generative AI - Gemini here at TSSFL Technology Stack:

llm