Deployment Guide
Relevant source files
The following files were used as context for generating this wiki page:
This guide provides instructions for building and deploying the frontend application of the landing-emrgent project. The frontend is a React application bootstrapped with Create React App and customized using CRACO (Create React App Configuration Override) to integrate tools like Tailwind CSS.
The deployment process involves generating a production-ready, optimized build of static files. This build can then be hosted on any static file server or hosting platform. This document covers the build process, the structure of the build output, and key configuration files involved.
Frontend Build Process
The core of the deployment process is creating a production build. This is managed through npm scripts defined in the package.json file. The project uses CRACO to modify the underlying Webpack configuration without needing to eject.
Sources: frontend/README.md:23-29, frontend/package.json:71-74, 84
Build Steps
The following diagram illustrates the high-level workflow for creating a production build.
This diagram shows the sequence of commands to generate the deployable static assets.
Sources: frontend/README.md:9-29, frontend/package.json:71-74
NPM Scripts
The primary scripts for development and deployment are defined in package.json.
| Script | Command | Description |
|---|---|---|
start | craco start | Runs the app in development mode at http://localhost:3000. The page reloads on changes. |
build | craco build | Builds the app for production into the build folder. It bundles React in production mode and optimizes the build for best performance. |
test | craco test | Launches the test runner in interactive watch mode. |
Sources: frontend/package.json:71-74, frontend/README.md:9-29
The key command for deployment is npm run build. This command:
- Invokes CRACO to apply custom configurations.
- Uses
react-scriptsto bundle all JavaScript, CSS, and other assets. - Minifies the code and includes hashes in filenames for cache-busting.
- Outputs the final static files to a
builddirectory.
Sources: frontend/README.md:23-29
Build Output
After running npm run build, a build directory is created in the frontend root. This directory contains all the static files needed to run the application.
Sources: frontend/README.md:23-24
Entry Point
The main entry point for the deployed application is build/index.html. This file is generated from the template located at frontend/public/index.html. During the build process, placeholder variables like %PUBLIC_URL% are replaced, and the bundled JavaScript and CSS files are automatically injected into the HTML.
The application itself is mounted into the DOM element with the ID root.
<!-- frontend/public/index.html -->
...
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
The build step will place the bundled scripts into the <body> tag.
-->
...
</body>
Sources: frontend/public/index.html:33-38
Configuration
The build process is influenced by several configuration files that define how the application is bundled and styled.
CRACO Configuration
While a craco.config.js file is not present in the provided context, its usage is declared in package.json via the scripts and devDependencies. CRACO is used to layer additional build configurations (like Tailwind CSS) on top of the standard Create React App setup.
Sources: frontend/package.json:71-74, 84
Tailwind CSS Configuration
Styling is managed by Tailwind CSS. The configuration file frontend/tailwind.config.js specifies which files should be scanned for Tailwind utility classes to be included in the final CSS bundle. This process, known as "purging," ensures the production CSS is as small as possible.
// frontend/tailwind.config.js
module.exports = {
darkMode: ["class"],
content: [
"./src/**/*.{js,jsx,ts,tsx}",
"./public/index.html"
],
// ...
};
Sources: frontend/tailwind.config.js:2-6
The project also uses PostCSS and Autoprefixer, which are standard dependencies for a Tailwind CSS setup and are listed as devDependencies.
Sources: frontend/package.json:85, 90
The base styles and Tailwind layers (@tailwind base, @tailwind components, @tailwind utilities) are imported in frontend/src/index.css.
Sources: frontend/src/index.css:1-3
Serving the Application
The build directory is self-contained and ready to be deployed. It can be served by any web server or static hosting service. The npm start command is strictly for development and should not be used for a production environment.
Sources: frontend/README.md:9-11, 27-29
The following diagram shows the request flow for a deployed application.
This diagram illustrates how a user's browser loads the static files from a web server to run the React application.
Sources: frontend/public/index.html:33-41, frontend/README.md:23-29
Summary
Deploying the landing-emrgent frontend is a straightforward process centered around the npm run build command. This command leverages Create React App, CRACO, and Tailwind CSS to produce an optimized set of static files in the build directory. This directory can then be uploaded to any static hosting provider to make the application live.