Hoy en día existen muchos proyectos Frontend que tienen una serie de ficheros que son comunes en muchas webs y aplicaciones, a continuación una selección de algunos importantes:

  • package.json: Este fichero contiene la info del proyecto como su título, descripción, mantenedores, etc. También contiene una sección de scripts que puedes ejecutar mediante npm run nombre_script. Normalmente existe un script llamado serve o dev para arrancar el proyecto en modo desarrollo y otro de build para compilar el proyecto para ser desplegado en producción.
  • package-lock.json: Este fichero es generado, no lo tienes que tocar para nada. Contiene la versión de las dependencias y subdepedencias que se han descargado al hacer npm install
  • .editorconfig: En este fichero se establece la configuración de identado o saltos de línea para que el editor de textos o IDE que estés usando lo sepa. Este fichero puede ir en cada proyecto o de forma global en tu ordenador para que afecte a todos los proyectos.
  • .gitignore: En este fichero se colocan los ficheros y carpetas que no queremos que se suban al repo de Git. Importante no quitar de este fichero node_modules, o subiremos muchos megas de dependencias al repo.
  • .npmrc: La config de NPM, no suele ser demasiado común. Aquí se suele configurar credenciales, certificados, config para el remoto, etc.
  • tsconfig.js: La configuración de Typescript. Esta config le dice al compilador de Typescript cómo se quiere que se compilen los ficheros, por ejemplo la carpeta de salida, el target (por ejemplo para que el código de salida se pueda ejecutar en navegadores antiguos), etc. Más info en el artículo de Configuración de Typescript.
  • .eslintignore: En este fichero puedes indicar qué otros ficheros o carpetas debería ignorar el linter de Eslint.
  • .eslint.cjs: La config del linter de Eslint. Normalmente en este fichero tienes que indicar mediante plugins el lenguaje o framework que quieres usar, por ejemplo Vue, Svelte, Angular o el que sea. Desde este fichero puedes modificar las reglas que quieres que aplique el linter.
  • .prettierignore: Lo mismo que .eslintignore pero para Prettier.
  • .prettierrc: Parecido también a .eslint.cjs pero para Prettier.
  • babel.config.json o .babelrc: Dependiendo de si tu proyecto usa Babel para el transpilado de Javascript, puede que tengas este fichero con la config que va a usar Babel para hacer su tarea. Aquí puedes indicar outputs, targets, rutas que puede usar, rutas a ignorar, etc.
  • .env o .env.local, .env.production: Estos ficheros contienen las variables de entorno que necesita el proyecto. El proyecto usará un fichero o otro dependiendo de si está configurado en modo producción o no. Es recomendable que por ejemplo el fichero .env.production no esté subido al repo, ya que contiene información de producción.
  • Dockerfile y .dockerignore: Contiene la información para docker para poder levantar la web o aplicación dentro de un sistema de contenedores de Docker.
  • postcss.config.js: Si estás usando PostCSS en tu proyecto es posible que veas este fichero, contiene los plugins y la config que usas para transformar los estilos CSS con PostCSS.