Skip to main content

​
Overview

The Bİ DOLU İÇECEK application is built using Create React App (react-scripts), which provides an optimized production build with automatic code splitting, minification, and performance optimizations.

​
Build Process

1

Install Dependencies

Before building, ensure all dependencies are installed:
npm install
2

Run the Build Command

Execute the build script from package.json:
npm run build
This command runs react-scripts build, which:
  • Compiles React components and JSX
  • Bundles JavaScript files
  • Processes CSS with PostCSS and Tailwind CSS
  • Optimizes images and assets
  • Generates production-ready files
3

Verify Build Output

After a successful build, you’ll find the production files in the build/ directory:
build/
├── static/
│   ├── css/        # Minified CSS files
│   ├── js/         # Bundled and minified JavaScript
│   └── media/      # Optimized images and assets
├── index.html      # Entry point HTML file
├── favicon.ico     # Site favicon
└── manifest.json   # PWA manifest

​
Build Output Details

​
JavaScript Bundles

The build process creates optimized JavaScript bundles:
  • main.[hash].js - Your application code
  • [number].[hash].chunk.js - Code-split chunks for lazy loading
  • runtime-main.[hash].js - Webpack runtime logic
File names include content hashes (e.g., main.abc123.js) to enable long-term caching. When files change, their hashes change, automatically busting the cache.

​
CSS Files

Tailwind CSS and custom styles are processed and bundled:
  • Minified and optimized
  • Unused styles removed (tree-shaking)
  • PostCSS transformations applied
  • Autoprefixer for browser compatibility

​
Asset Optimization

  • Images under 10KB are inlined as Data URIs
  • Larger images are copied to build/static/media/
  • File names include content hashes for caching

​
Testing the Build Locally

1

Install a Static Server

Use serve or any static file server:
npm install -g serve
2

Serve the Build Directory

Run the server pointing to the build folder:
npx serve -s build
The -s flag enables single-page application mode, redirecting all requests to index.html.
3

Access the Application

Open your browser to the URL shown (typically http://localhost:3000):
┌────────────────────────────────────────┐
│                                        │
│   Serving!                             │
│                                        │
│   Local:  http://localhost:3000        │
│                                        │
└────────────────────────────────────────┘
The development server (npm start) and production build behave differently. Always test the production build before deploying to ensure everything works correctly.

​
Build Optimization

​
Production Optimizations

The build process automatically applies:
  1. Code Minification - JavaScript and CSS are minified
  2. Dead Code Elimination - Unused code is removed
  3. Code Splitting - Lazy loading for better performance
  4. Asset Optimization - Images and files are optimized
  5. Source Maps - Generated for debugging (optional)

​
Environment Variables

Environment variables are embedded at build time: 
# Set environment variables before building
REACT_APP_API_URL=https://api.example.com npm run build
Only variables starting with REACT_APP_ are accessible in your code. They are embedded during build time and cannot be changed without rebuilding.

​
Browser Support

The application targets browsers defined in package.json: Production:
  • >0.2% market share
  • Not dead browsers
  • Not Opera Mini
Development:
  • Last Chrome version
  • Last Firefox version
  • Last Safari version

​
Build Performance Tips

1

Clean Build

Remove the previous build before creating a new one:
rm -rf build && npm run build
2

Analyze Bundle Size

Check what’s included in your bundles:
npm run build
# Review the file sizes in the console output
3

Optimize Dependencies

Keep dependencies minimal:
npm ls
# Review and remove unused packages

​
Build Troubleshooting

​
Common Issues

Build Fails with Memory Error: 
# Increase Node.js memory limit
NODE_OPTIONS=--max-old-space-size=4096 npm run build
CSS Not Loading:
  • Ensure PostCSS and Tailwind are properly configured
  • Check for CSS import errors in components
Assets Not Found:
  • Use relative paths or the public/ folder
  • Ensure images are imported correctly in components
Never commit the build/ directory to version control. Add it to .gitignore and build fresh for each deployment.

​
Next Steps

After building successfully, you’re ready to deploy:

Build docs developers (and LLMs) love

Get started for freeTalk to us