arrow_back Volver
Inicio keyboard_arrow_right Artículos keyboard_arrow_right Artículo

Cómo crear un proyecto en Ionic

Petriz Celaya

Productor y Tutor en Código Facilito

av_timer 5 Min. de lectura

remove_red_eye 59452 visitas

calendar_today 25 Octubre 2019

Crear un proyecto en Ionic es muy sencillo, solo debemos asegurarnos de que lo hayamos instalado correctamente.

Si tienes dudas acerca de la instalación te invíto a ver el Post Anterior.

Debemos de asegurarnos tener la version mas reciente del CLI de Ionic, esto lo verificamos con el comando:

ionic -v

Esto nos permite saber que versión del CLI estamos usando.

Creando el Proyecto

Para poder crear un nuevo proyecto debemos de tener en cuenta en donde lo queremos almacenar, para esto es muy importante movernos dentro de nuestra terminal o CMD, usaremos comandos comandos básicos así que no te preocupes, te dejo algunos comandos que debes de tener en cuenta.

Comandos Descripción Sistema Operativo
ls Listar Elementos MacOS / Distros GNU/Linux
dir Listar Elementos Windows
cd Cambio de Directorios Todos
clear Limpiar Terminal MacOS / Distros GNU/Linux
cls Limpiar Terminal Windows
pwd Ruta Absoluta Actual MacOS / Distros GNU/Linux
chdir Ruta Absoluta Actual Windows

Una vez hayamos pensado en donde queremos almacenar nuestro proyecto, debemos de saber donde nos encontramos dentro de nuestra terminal, regularmente siempre nos ubica en nuestra carpeta personal o la del usuario que inició sesión, si queremos asegurarnos en donde nos encontramos debemos de usar el comando pwd o en su defecto chdir dependiendo el sistema operativo en donde nos encontremos, si después de presionar enter nos muestra algunas carpetas conocidas como Escritorio o Desktop o Documentos o Descargas entonces nos encontramos en nuestra carpera personal, y ahí quedará de nosotros elegir en donde queremos almacenar el proyecto.

Para este ejemplo elegiré crear mi proyecto en el Escritorio, para esto debo de usar el comando para cambiar de directorio "cd" seguido del nombre de la carpeta a donde nos dirigimos "Escritorio" quedaría así:

cd Escritorio

NOTA: debemos de cuidar que el nombre de la carpeta esté bien escrita, respetando mayúsculas, o de igual manera podemos apoyarnos del Tabulador para autocompletar lo que estemos escribiendo.

Muy bien ya nos encotramos en la carpeta, es momento de crear el proyecto, para esto usaremos el comando:

ionic start 

Si usamos únicamente este comando el CLI nos brindará los pasos que debemos de seguir, como ingresar el nombre de nuestro proyecto, si queremos usar un template al momento de iniciar nuestro proyecto, y también el Framework que deseaos usar con Ionic.

Si ya tenemos en mente el nombre de nuestro proyecto podemos hacer la ejecución en una sola línea simplemente agregando otros parametros como lo indico a continuación:

ionic start nombredelProyecto tabs

Con esto le indicamos al CLI de Ionic que vamos a crear un proyecto con el nombre "nombredelProyecto" y agregará el template de "tabs".

Los Templates disponibles son:

Templates Descripción
blank Crea un Proyecto sin Template.
tabs Crea un proyecto con tres vistas donde puedes navegar entre ellas muy fácil.
sidemenu Crea un proyecto con un menú lateral

Posterior a esto nos pedirá elegir el Framework que deseamos usar, en este caso podemos elegir entre Angular o React, si queremos saltarnos este paso y ejecutar todo desde una sola linea a nuestro comando anterior le debemos de agregar una bandera "--type=NombredelFramework" junto al nombre del Framework.

ionic start nombredelProyecto tabs --type=angular

Algunas veces nos aparecerá un mensaje que nos indicará que hay una actualización disponible para nuestro CLI, podemos actualizarla, esto corregirá ciertos bugs o detalles que tenga el CLI, la actualización siempre incluye una bandera "-g", eso significa que debemos de ejecutar los comandos como super usuario.

Ejecución del proyecto

Para poder ejecutar el proyecto debemos de dirigirnos a la carpeta del proyecto que acabamos de generar, esto lo hacemos con el comando de cambio de directorio:

cd nombredelProyecto

Una vez dentro del proyecto podemos lanzar el servidor, esto lo hacemos con el comando serve del CLI de Ionic:

ionic serve

Esperamos a que lance el proyecto al navegador, el puerto por default es el 8100 y con esto ya tendríamos todo para comenzar a codear.

si quieres bajar o cerrar el servidor local lo puedes hacer con el comando:

ctrl + c

**Si presentas el Error:EACCES at npm install with sudo:

La solucón mas efectiva es Re-instalar el NodeJS

Aumenta tu productividad con GitHub Copilot

  • done Curso GRATUITO
  • done Regístrate antes del 31 de Marzo
  • done Obtén una ventaja competitiva
  • done Aprovecha la IA a tu favor
Más información