Documentation Index
Fetch the complete documentation index at: https://mintlify.com/jantoniogc/CursoReact-Clima/llms.txt
Use this file to discover all available pages before exploring further.
Because npm run build produces a static site — only HTML, JavaScript, and CSS files — you can deploy Clima React App to any platform that serves static files. No server-side runtime is required. The three most common free options are Vercel, Netlify, and GitHub Pages.
Vercel
Netlify
GitHub Pages
Install the Vercel CLI and deploy in one command:npm install -g vercel
vercel --prod
npm run build on its build servers. The contents of the build/ directory are served from Vercel’s global edge network. No additional configuration is needed. Option 1 — drag and dropDrag your local build/ folder onto app.netlify.com/drop. Netlify creates a live URL immediately.Option 2 — Netlify CLInpm install -g netlify-cli
netlify deploy --prod --dir=build
--dir=build flag tells the CLI which folder to publish. Netlify serves those files from its CDN automatically. Add a homepage field to package.json
Replace {username} and {repo-name} with your GitHub username and repository name:"homepage": "https://{username}.github.io/{repo-name}"
Install gh-pages
npm install --save-dev gh-pages
Add deploy scripts to package.json
Add predeploy and deploy entries inside the "scripts" object:"predeploy": "npm run build",
"deploy": "gh-pages -d build"
predeploy runs automatically before deploy, so the build/ directory is always up to date. Deploy
This builds the app and pushes the build/ contents to the gh-pages branch of your repository. GitHub Pages serves that branch at the URL you set in homepage. Environment variables and the API key
To avoid hardcoding the OpenWeatherMap API key in source code, Create React App supports .env files. Create a .env file in the project root with:REACT_APP_API_KEY=your_key_here
src/App.js as process.env.REACT_APP_API_KEY. Variables must be prefixed with REACT_APP_ to be included in the browser bundle. Never commit .env files to version control. Add .env to your .gitignore and use your hosting platform’s environment variable settings (Vercel dashboard, Netlify environment variables, or GitHub Actions secrets) to inject the key at build time.
Materialize CSS CDN dependency
The app’s public/index.html loads Materialize CSS and its JavaScript from the Cloudflare CDN:
<!-- CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
cdnjs.cloudflare.com. All three hosting platforms listed above (Vercel, Netlify, GitHub Pages) serve pages to browsers that fetch these assets directly, so no special configuration is needed in typical deployments.
If you need to operate in an air-gapped or offline environment, install Materialize via npm and import it in your JavaScript instead of relying on the CDN:
npm install materialize-css
import 'materialize-css/dist/css/materialize.min.css';
import M from 'materialize-css';
<link> and <script> tags from public/index.html.