admin dashboard starter

¡Kit de panel de administración más fácil en la galaxia!

Nuestro objetivo es simplificar el desarrollo de spa: envíe su tablero de administración hoy. El enfoque está en el patrón de pila/arquitectura/diseño, y no en la estética. El diseño se mantiene mínimo para mantener esto simple y facilitar la implementación de su propio diseño.

También estamos cubriendo la parte de diseño: portar los principales marcos de administración a nuestra tecnología de inicio del tablero de administración. Aquí hay una lista completa (cuantas más estrellas, más trabajo ponemos):

• Taquería
• Administrador
• Administrador
• Tablero

Construido con esbelto y sagador. Rollup construye el proyecto. Implemente con el alojamiento de Firebase, ahora, sobresaliendo o directamente a sus servidores.

En general, podría estar implementando su tablero de administración en vivo hoy.

Características

• Sistema de componentes fácil de usar. Los componentes son html liso, CSS, JS.
• Enrutamiento basado en carpetas.
• Sistema de autenticación robusto. Conecte Firebase, Passport.js o Auth0, fácilmente.
• Prueba y desarrollo basados ​​en componentes. Renderiza componentes individuales: trabaje e itera más rápido. Configuración del sistema de prueba de unidades unitarias/componentes.
• Fuentes de datos. Conecte fácilmente sus propios datos: desde una base de datos, archivo o servidor remoto.
• Pruebas de integración con ciprés.
• Cambie entre entornos Dev y ProD desde la línea de comandos.
• Implementar desde la línea de comando a los servicios populares.

Ejecutando el proyecto

Sin embargo, obtiene el código, puede instalar dependencias y ejecutar el proyecto en modo de desarrollo con:

 cd admin-dashboard-starter
npm install # or yarn
npm run dev

Abra Localhost: 3000 y comience a hacer clic.

Consulte a sapper.svelte.dev para obtener ayuda para comenzar.

Estructura

Sapper espera encontrar dos directorios en la raíz de su proyecto: src y static .

SRC

El directorio SRC contiene los puntos de entrada para su aplicación: client.js , server.js y (opcionalmente) un service-worker.js ) junto con un archivo template.html y un directorio routes .

src/rutas

Este es el corazón de la aplicación de su ssapper. Hay dos tipos de rutas: páginas y rutas de servidor .

Las páginas son componentes eslvé escritos en archivos .svelte . Cuando un usuario visita por primera vez la aplicación, se le dará a una versión de la ruta renderizada del servidor en cuestión, además de algunos JavaScript que 'hidrata' la página e inicializa un enrutador del lado del cliente. A partir de ese momento, navegar a otras páginas se maneja completamente en el cliente para una sensación rápida y similar a una aplicación. (Sapper precarga y almacenará en caché el código para estas páginas posteriores, de modo que la navegación sea instantánea).

Las rutas del servidor son módulos escritos en archivos .js , que exportan funciones correspondientes a los métodos HTTP. Cada función recibe objetos request y response expresos como argumentos, más una next función. Esto es útil para crear una API JSON, por ejemplo.

Hay tres reglas simples para nombrar los archivos que definen sus rutas:

• Un archivo llamado src/routes/about.svelte corresponde a la ruta /about de. Un archivo llamado src/routes/blog/[slug].svelte corresponde a la ruta /blog/:slug , en cuyo caso params.slug está disponible para la ruta
• El archivo src/routes/index.svelte (o src/routes/index.js ) corresponde a la raíz de su aplicación. src/routes/about/index.svelte se trata igual que src/routes/about.svelte .
• Los archivos y directorios con un guión inferior no crean rutas. Esto le permite colocarse módulos y componentes de ayuda con las rutas que dependen de ellas; por ejemplo, podría tener un archivo llamado src/routes/_helpers/datetime.js y no crearía una ruta A /_helpers/datetime

estático

El directorio estático contiene cualquier activo estático que debería estar disponible. Estos se sirven con SIRV.

En su archivo de servicio-worker.js, puede importarlos como files desde el manifiesto generado ...

 import { files } from '@sapper/service-worker' ;

... para que pueda almacenarlos en caché (aunque puede elegir no hacerlo, por ejemplo, si no desea almacenar en caché de archivos muy grandes).

Configuración de Bundler

Sapper utiliza Rollup o Webpack para proporcionar importaciones dinámicas y divididas en código, así como compilar sus componentes SVELTE. Con Webpack, también proporciona recarga de módulos en caliente. Siempre que no haga nada tonto, puede editar los archivos de configuración para agregar cualquier complemento que desee.

Modo de producción y implementación

Para iniciar una versión de producción de su aplicación, ejecute npm run build && npm start . Esto deshabilitará la recarga en vivo y activará los complementos Bundler apropiados.

Puede implementar su aplicación en cualquier entorno que admita el nodo 8 o superior. Como ejemplo, para implementar hasta ahora, ejecute estos comandos:

npm install -g now
now

Uso de componentes externos

Cuando se usa componentes SVELTE instalados desde NPM, como @sveltejs/esvelte-virtual-list, Svelte necesita la fuente de componentes original (en lugar de cualquier JavaScript precompilado que se envíe con el componente). Esto permite que el componente se presente del lado del servidor, y también mantiene su aplicación del lado del cliente más pequeña.

Debido a eso, es esencial que el Bundler no trate el paquete como una dependencia externa . Puede modificar la opción external en server en rollup.config.js o la opción externals en webpack.config.js, o simplemente instalar el paquete en devDependencies en lugar de dependencies , lo que hará que se agrupe (y por lo tanto compilado) con) Tu aplicación:

npm install -D @sveltejs/svelte-virtual-list

Errores y comentarios

Sea vocal en el rastreador de problemas de DBH.