admin dashboard starter

Kit de tableau de bord d'administration le plus facile dans la galaxie!

Notre objectif est de simplifier le développement de SPA - expédiez votre tableau de bord d'administration dès aujourd'hui. L'accent est mis sur le modèle de pile / architecture / design, et non sur l'esthétique. La conception est maintenue minimale afin de garder cela simple et de faciliter la mise en œuvre de votre propre conception.

Nous couvrons également la partie de conception - portant les principaux cadres d'administration de notre technicien de démarrage du tableau de bord d'administration. Voici une liste complète (plus il y a d'étoiles, plus nous mettons de travail):

• Tableur
• Administrer
• Administrateur
• Tableau de bord matériel

Construit avec Svelte et Sapeur. Rollup construit le projet. Déployez avec l'hébergement Firebase, maintenant, monte ou directement vers vos serveurs.

Dans l'ensemble, vous pourriez déployer votre tableau de bord d'administration en direct dès aujourd'hui.

Caractéristiques

• Système de composants faciles à utiliser. Les composants sont un HTML ordinaire, CSS, JS.
• Routage basé sur des dossiers.
• Système d'authentification robuste. Branchez facilement Firebase, Passport.js ou Auth0.
• Tests et développement basés sur les composants. Rendez les composants uniques - Travaillez et itérez plus rapidement. Configuration du système de test unitaire robuste / composant.
• Sources de données. Branchez facilement vos propres données - à partir d'une base de données, d'un fichier ou d'un serveur distant.
• Tests d'intégration avec Cypress.
• Basculez entre les environnements Dev et Prod à partir de la ligne de commande.
• Déployer de la ligne de commande aux services populaires.

Exécuter le projet

Cependant, vous obtenez le code, vous pouvez installer des dépendances et exécuter le projet en mode développement avec:

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

Ouvrez LocalHost: 3000 et commencez à cliquer.

Consultez Sapper.Svelte.dev pour aider à démarrer.

Structure

Sapeur prévoit de trouver deux répertoires à la racine de votre projet - src et static .

SRC

Le répertoire SRC contient les points d'entrée de votre application - client.js , server.js et (éventuellement) un service-worker.js - ainsi qu'un fichier template.html et un répertoire routes .

SRC / Routes

Ceci est le cœur de votre application SAPPER. Il existe deux types d'itinéraires - pages et routes de serveur .

Les pages sont des composants svelte écrits dans des fichiers .svelte . Lorsqu'un utilisateur visite pour la première fois l'application, il sera servi une version de serveur de l'itinéraire en question, plus un javascript qui «hydrate» la page et initialise un routeur côté client. À partir de ce moment, la navigation vers d'autres pages est entièrement gérée sur le client pour une sensation rapide et apparentée. (Le sapeur préchargera et mettra en cache le code pour ces pages suivantes, de sorte que la navigation est instantanée.)

Les routes du serveur sont des modules écrits dans des fichiers .js , que les fonctions d'exportation correspondant aux méthodes HTTP. Chaque fonction reçoit des objets request et response Express comme arguments, plus une fonction next . Ceci est utile pour créer une API JSON, par exemple.

Il existe trois règles simples pour nommer les fichiers qui définissent vos itinéraires:

• Un fichier appelé src/routes/about.svelte correspond à l'itinéraire /about . Un fichier appelé src/routes/blog/[slug].svelte correspond à la route /blog/:slug , auquel cas params.slug est disponible pour l'itinéraire
• Le fichier src/routes/index.svelte (ou src/routes/index.js ) correspond à la racine de votre application. src/routes/about/index.svelte est traité de la même manière que src/routes/about.svelte .
• Les fichiers et les répertoires avec un soulignement leader ne créent pas de routes. Cela vous permet de colocaliser des modules et des composants d'assistance avec les routes qui en dépendent - par exemple, vous pourriez avoir un fichier appelé src/routes/_helpers/datetime.js et cela ne créerait pas A /_helpers/datetime Route

statique

Le répertoire statique contient tous les actifs statiques qui devraient être disponibles. Ceux-ci sont servis en utilisant Sirv.

Dans votre fichier Service-Worker.js, vous pouvez les importer sous forme files à partir du manifeste généré ...

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

... afin que vous puissiez les mettre en cache (bien que vous puissiez choisir de ne pas le faire, par exemple si vous ne souhaitez pas mettre en cache de très grands fichiers).

Configuration de bundler

Sapeur utilise Rollup ou WebPack pour fournir des importations de couple de code et de dynamique, ainsi que pour compiler vos composants svelte. Avec WebPack, il fournit également un rechargement de modules chauds. Tant que vous ne faites rien de mouton, vous pouvez modifier les fichiers de configuration pour ajouter les plugins que vous souhaitez.

Mode de production et déploiement

Pour démarrer une version de production de votre application, exécutez npm run build && npm start . Cela désactivera le rechargement en direct et activra les plugins de bundler appropriés.

Vous pouvez déployer votre application dans n'importe quel environnement qui prend en charge le nœud 8 ou plus. À titre d'exemple, pour déployer maintenant, exécutez ces commandes:

npm install -g now
now

Utilisation de composants externes

Lorsque vous utilisez des composants Svelte installés à partir de NPM, tels que @ sveltejs / svelte-virtual-list, Svelte a besoin de la source du composant d'origine (plutôt que tout JavaScript précompilé qui est expédié avec le composant). Cela permet au composant d'être rendu côté serveur et maintient également votre application côté client plus petit.

Pour cette raison, il est essentiel que le Bundler ne traite pas le package comme une dépendance externe . Vous pouvez soit modifier l'option external sous server dans rollup.config.js ou l'option externals dans webpack.config.js, ou simplement installer le package sur devDependencies plutôt que sur dependencies , ce qui le fera être regroupé (et donc compilé) avec Votre application:

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

Bogues et commentaires

Veuillez être vocal sur le tracker du numéro DBH.