El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

En aquesta secció, aprendrem com desplegar el nostre projecte JavaScript en un entorn de producció. El desplegament és una etapa crucial del desenvolupament de programari, ja que implica posar el nostre projecte a disposició dels usuaris finals. Veurem diferents mètodes i eines per desplegar aplicacions web, així com bones pràctiques per assegurar-nos que el nostre projecte funcioni correctament en producció.

Preparació per al Desplegament

1.1. Minificació i Obfuscació del Codi

La minificació i obfuscació del codi són processos que redueixen la mida dels fitxers JavaScript i fan que el codi sigui més difícil de llegir per a humans. Això ajuda a millorar el rendiment de l'aplicació i a protegir el codi font.

Exemple de Minificació amb UglifyJS

npm install -g uglify-js
uglifyjs src/app.js -o dist/app.min.js

1.2. Optimització d'Imatges

Les imatges poden ocupar molt espai i afectar el temps de càrrega de la pàgina. Utilitza eines com ImageOptim o imagemin per optimitzar les imatges.

Exemple d'ús d'imagemin

npm install -g imagemin-cli
imagemin src/images/* --out-dir=dist/images

1.3. Configuració de Variables d'Entorn

Les variables d'entorn permeten configurar diferents entorns (desenvolupament, prova, producció) sense canviar el codi font.

Exemple de Configuració amb dotenv

npm install dotenv

// src/config.js
require('dotenv').config();
const config = {
  apiUrl: process.env.API_URL,
  apiKey: process.env.API_KEY,
};
module.exports = config;

# .env
API_URL=https://api.example.com
API_KEY=your_api_key

Desplegament en Servidors Web

2.1. Desplegament en Netlify

Netlify és una plataforma popular per desplegar aplicacions web estàtiques.

Passos per Desplegar en Netlify

Crea un compte a Netlify.
Connecta el teu repositori GitHub.
Configura els paràmetres de construcció:
- Build Command: npm run build
- Publish Directory: dist
Desplega l'aplicació.

2.2. Desplegament en Vercel

Vercel és una altra plataforma popular per desplegar aplicacions web.

Passos per Desplegar en Vercel

Crea un compte a Vercel.
Connecta el teu repositori GitHub.
Configura els paràmetres de construcció:
- Build Command: npm run build
- Output Directory: dist
Desplega l'aplicació.

2.3. Desplegament en Heroku

Heroku és una plataforma com a servei (PaaS) que suporta aplicacions web dinàmiques.

Passos per Desplegar en Heroku

Crea un compte a Heroku.
Instal·la la CLI de Heroku:
```
npm install -g heroku
```
Inicia sessió a Heroku:
```
heroku login
```
Crea una nova aplicació:
```
heroku create
```
Desplega l'aplicació:
```
git push heroku main
```

Bones Pràctiques per al Desplegament

3.1. Monitorització i Logs

És important monitoritzar l'aplicació i revisar els logs per detectar i solucionar problemes.

Exemple d'ús de LogRocket

npm install logrocket

import LogRocket from 'logrocket';
LogRocket.init('your-app-id');

3.2. Còpies de Seguretat

Assegura't de tenir còpies de seguretat regulars de la base de dades i altres dades importants.

3.3. Escalabilitat

Configura el teu entorn de producció per escalar segons la demanda, utilitzant serveis com AWS, Google Cloud, o Azure.

Resum

En aquesta secció, hem après com preparar el nostre projecte per al desplegament, incloent la minificació del codi, l'optimització d'imatges i la configuració de variables d'entorn. També hem vist com desplegar aplicacions en diferents plataformes com Netlify, Vercel i Heroku. Finalment, hem revisat algunes bones pràctiques per assegurar-nos que el nostre projecte funcioni correctament en producció. Amb aquests coneixements, estàs preparat per desplegar el teu projecte JavaScript i posar-lo a disposició dels usuaris finals.

Desplegament del Projecte

Preparació per al Desplegament

1.1. Minificació i Obfuscació del Codi

Exemple de Minificació amb UglifyJS

1.2. Optimització d'Imatges

Exemple d'ús d'imagemin

1.3. Configuració de Variables d'Entorn

Exemple de Configuració amb dotenv

Desplegament en Servidors Web

2.1. Desplegament en Netlify

Passos per Desplegar en Netlify

2.2. Desplegament en Vercel

Passos per Desplegar en Vercel

2.3. Desplegament en Heroku

Passos per Desplegar en Heroku

Bones Pràctiques per al Desplegament

3.1. Monitorització i Logs

Exemple d'ús de LogRocket

3.2. Còpies de Seguretat

3.3. Escalabilitat

Resum

JavaScript: De Principiant a Avançat

Mòdul 1: Introducció a JavaScript

Mòdul 2: Estructures de Control

Mòdul 3: Funcions

Mòdul 4: Objectes i Arrays

Mòdul 5: Objectes i Funcions Avançades

Mòdul 6: El Model d'Objectes del Document (DOM)

Mòdul 7: APIs del Navegador i Temes Avançats

Mòdul 8: Proves i Depuració

Mòdul 9: Rendiment i Optimització

Mòdul 10: Frameworks i Llibreries de JavaScript

Mòdul 11: Projecte Final