Al crear un proyecto con Ionic CLI obtenemos una lista de carpetas y archivos que forman parte de nuestra aplicación. Obviamente, cada parte tiene su función, aunque hasta el momento no hayamos llegado a explorarla.

En este artículo veremos cuál es la anatomía de un proyecto en Ionic, comentando las distintas carpetas que nos encontramos, su función y contenido. Nuestro objetivo es tener una visión general del proyecto, por lo que en otros artículos del Manual de Ionic 2 entraremos en mayores detalles.

Vamos a verlos por importancia, no por el orden con el que los puedas encontrar en tu listado de directorio.

Carpeta src

En esta carpeta es donde realizamos la mayor parte del trabajo con Ionic, son archivos fuente con el código original que escribirás al desarrollar tu aplicación, o con código que viene dado al iniciar el proyecto con "ionic start". "src" contiene código que se tendrá que transformar para poder ejecutarse o producir los archivos finales que se irán a las stores.

El 98% de tu proyecto lo vas a pasar dentro de esta carpeta. En ella de entrada ya encontramos bastantes archivos clasificados en otras tantas carpetas. Tenemos por ejemplo el directorio "pages", donde se irán colocando las páginas (pantallas) de tu aplicación, así como los assets (archivos de imágenes y otro tipo de materiales externos que vas a usar en las páginas), o el componente app, que es la raíz de nuestra aplicación.

Encontrarás una serie de archivos sueltos, como el index.html, que es el punto de arranque de la aplicación web. Encontrarás también el archivo service-worker.js, que es el service worker (de las Progressive Web Apps) que usarás si deseas publicar tu proyecto de Ionic 2 como una app para la web. O el manifest.json, también para definir una Progressive Web App.

Carpeta www

En la carpeta "www" están los archivos que se producen cuando realiza toda la parte de la transpilación del TypeScript, el compilado de los archivos Sass, el linting del código, etc. En ese proceso, todos los archivos de "src", se transforman y se vuelcan en la carpeta "www". Esos archivos producidos en "www" son los archivos de una aplicación web, con Angular, que se podrán visualizar correctamente en el navegador.

Durante la mayor parte del proceso de desarrollo vamos trabajando con el proyecto de Ionic y vamos visualizando los resultados en el navegador. En resumen, en www están los archivos que se están visualizando desde el navegador al hacer el ionic serve, o los archivos que se tomarán cuando vayas a producir tu app para cada plataforma.

En esta carpeta no deberías editar nada, puesto que los cambios se machacarán la próxima vez que se sirva el proyecto para visualizarse a través del navegador, o al hacer el build. Realmente tienes que editar lo que desees en la carpeta "src". En este sentido un error típico es editar cualquier archivo, como el index.html, de la carpeta www y cuando vas a visualizar los cambios encuentras que no se ha modificado nada. Es debido a que el índex.html de la carpeta "src" es el que se toma como punto de partida para producir el index.html de www y en la operación de build (o al hacer "ionic serve") tus cambios se habrán machacado.

Podrás observar que en la carpeta www no hay ningún archivo TypeScript (extensión ts), ya que se ha transpirado para producir los archivos Javascript (.js), que realmente entiende el navegador. De manera parecida, los CSS ya no tendrán código Sass.

Las siguientes carpetas también son importantes, aunque ya no serán usadas en tu trabajo diario de desarrollo.

Carpeta plugins

En esta carpeta se sitúan todos los plugins nativos con los que vamos a trabajar en la aplicación, ya sean de Cordova o del propio Ionic, o de terceros. De momento en un proyecto recién iniciado podrás observar que ya se encuentran varios plugins básicos. Otros se irán instalando a medida que vayamos necesitando.

Trabajaremos más adelante sobre esta carpeta cuando lleguemos a la parte del desarrollo nativo.

Carpeta platforms

En este directorio encontramos los archivos de cada plataforma a la que vamos a dar soporte en nuestra app. Por ejemplo, si damos soporte a Android tendremos el subdirectorio "android" y si damos soporte a iOS encontraremos la carpeta "ios".

Más adelante también explicaremos cómo dar soporte a diversas plataformas, aunque eso es una tarea más para realizar cuando hayamos terminado de construir nuestra app en local y queramos subirla a las stores.

Directorio resources

La carpeta "resources" es importante a la hora de configurar iconos de la aplicación, o el icono de la pantalla splash (que es la imagen que aparece mientras tu app se está cargando).

En esa carpeta tenemos que colocar iconos que deben cumplir unos requisitos, dado que se van a producir también internamente en diversos tamaños de manera automática por Ionic, para generar todas las variantes de iconos que necesita cada sistema operativo de destino. Soporta archivos en png o incluso psd. En otro momento también daremos más detalles sobre todo este proceso de producción de los iconos.

Directorio hooks

Esta carpeta contiene una especie de disparadores que se ejecutarán ante determinadas situaciones. Generalmente vienen de Cordova y los puedes usar para la más variada gama de operaciones. Son como scripts que puedes crear y que se ejecutarán automáticamente al pasar cosas, por ejemplo, antes de compilar un proyecto, después, etc.

Ionic 2 usa alguno de estos hooks, por ejemplo al momento de compilar quita todo el código CSS que pertenece a otras de las plataformas. Esto lo hace para aligerar el proyecto, ya que a la hora de desarrollar Ionic produce el CSS de Android, iOS y Windows, pero no necesitas todo ese CSS si lo que estás produciendo es el apk para Android, por ejemplo.

Carpeta node_modules

Esta carpeta realmente la debes de conocer de otros proyectos para otros sistemas web o NodeJS. Son las dependencias de npm que vienen definidas en el package.json e instaladas en local dentro de tu proyecto. Si no lo tienes claro, es mejor que consultes el Manual de NodeJS para saber más acerca de las dependencias npm.

Conclusión

De momento hasta aquí tienes bastante información sobre la arquitectura de carpetas de una app desarrollada con Ionic 2. Con esto hemos obtenido una vista de pájaro de todo lo que hay en un proyecto, que iremos complementando con más explicaciones en breve.