Introducción a Angular y Fundamentos
Aprende Angular 17
Creando tu primer proyecto en Angular
Implementando estilos
Mostrando elementos
Property Binding en Angular
Event Binding: click y doble click
Event binding: keydown
Modelo de reactividad con Signals
Creando un Signal en Angular
Estructuras de control en Angular
Directivas de control
Uso de ngFor
ngFor para objetos
Update Tasks
Uso de ngIf
Uso de ngSwitch y ngSwitchDefault
Controlando un input
Manejo de formularios en Angular
Alistando tu aplicación para producción
Estilos al modo Angular
Clases en Angular
Editing mode
Estados compuestos con computed
Usando effect para localStorage
Uso de ngbuild
Despliegue con Firebase Hosting
Nueva sintaxis en Angular
Directivas @For, @switch
Migrando a la nueva sintaxis de Angular v17
Componentes Reutilizables y Comunicación
Construyendo un e-commerce en Angular
Componentes en Angular
Mostrando los componentes
Angular DevTools
Uso de Inputs en Angular
Uso de Outputs en Angular
Componentes para Producto
Ciclo de vida de los componentes
Ciclo de vida de componentes
Ciclo de vida de componentes: ngOnChanges
Ciclo de vida de componentes: ngOnInit
Detectando cambios en los inputs
Evitando memory leaks con ngDestroy
Audio player con ngAfterViewInit
Creando la página "about us" o "conócenos"
Mejorando la interfaz del producto
Creando componente de productos
Creando el Header
Creando el carrito de compras
Comunicación padre e hijo
Calculando el total con ngOnChanges
El problema del prop drilling
Reactividad con signals en servicios
Entendiendo la inyección de dependencias
Integración y Datos
Obteniendo datos una REST API
Importaciones cortas en Typescript
Pipes en Angular
Construyendo tu propio pipe
Utilizando librerías de JavaScript en Angular
Conociendo las directivas
Deployando un proyecto en Vercel
Enrutamiento y Navegación
Ruta 404
Uso del RouterLink
Vistas anidadas
Uso del RouterLinkActive
Detalle de cada producto
Obteniendo datos del producto
Galería de imagenes
Detalle de la galería
Perfeccionando tu e-commerce
Mostrando categorias desde la API
Url Params
LazyLoading y Code Splitting
Aplicando LazyLoading
Prefetching
Usando la nueva sintaxis de Angular 17
Lanzando tu aplicación a producción
You don't have access to this class
Keep learning! Join and start boosting your career
If you already have an account,
How to deploy an Angular application in Vercel?
The success of an application depends not only on its development, but also on how and where you deploy it. Vercel presents itself as a robust and professional option to deploy your Angular applications. With the right tools and a proper configuration, you can take your project from the local environment to production with ease. Here's how to do it step by step.
How to create a Vercel account?
To get started, it is essential that you first create a Vercel account. This platform allows you to integrate your own domains and manage your projects professionally. Follow these steps to set up your account:
- Sign up for Vercel: Visit the Vercel website and create a new account. Be sure to complete the verification through the email you will be sent.
- Access the dashboard: Once you have created your credentials and verified your account, access the Vercel dashboard to explore options and configure future projects.
How to install the Vercel CLI?
The next step is to install the Vercel CLI, a vital tool for deploying your infrastructure:
-
Installing the package: Copy the following command in your terminal to install the Vercel CLI. This is a crucial step and is easily done from the command line.
npm install -g vercel -
Project verification: Before proceeding, make sure you are working inside your Angular project directory. Use
pwdto confirm your location in the terminal.
How to deploy your Angular application?
Once you are inside your project and the CLI is installed, perform the deployment following these simple steps:
-
Run the Vercel command: Start the process by running the following command in the terminal:
vercelThis will prompt you to log in. Log in with your Vercel account and follow the verification instructions sent to your email.
-
Configure the project: During configuration, Vercel will ask you for several details about the project:
- Project name: Assign a name, for example, "Store".
- Code directory: Indicates that the code is located in the root of the project.
- Angular environment options: Vercel will automatically detect that you are working with Angular and will propose specific configurations such as
ngBuildfor build andnpm installfor dependencies.
-
Automatic deployment: If the configurations are correct, confirm and let Vercel handle the rest. In a few minutes, your application will be deployed to the Vercel cloud and provide you with a URL to access.
What are the benefits of the Vercel dashboard?
Once the deployment is complete, the Vercel dashboard offers several tools to manage and optimize your application:
- Project configurations: Access advanced configurations and customize the deployment according to your needs.
- Log and storage monitoring: Monitor performance and storage, which is essential for identifying and resolving problems.
- Custom domain options: Integrate your own domain for a more professional identity within the cloud.
Vercel not only eases the technical process of deployment, but also provides a complete environment to manage and scale your applications. Take advantage of these tools to take your Angular application to the next level and stay on the cutting edge of web development. Keep exploring and expanding your skills, success is just a deployment away!
Contributions 9
Questions 0
Want to see more contributions, questions and answers from the community?