admin dashboard starter

Kit de painel de administração mais fácil na galáxia!

Nosso objetivo é simplificar o desenvolvimento do spa - enviar seu painel de administração hoje. O foco está no padrão de pilha/arquitetura/design, e não na estética. O design é mantido mínimo para manter isso simples e facilitar a implementação de seu próprio design.

Também estamos cobrindo a parte do design - portando as principais estruturas de administração para a nossa tecnologia de entrada para iniciantes do Admin Dashboard. Aqui está uma lista completa (quanto mais estrelas, mais trabalho que colocamos):

• Tabler
• Adminlte
• Administrador
• Painel de material

Construído com esbelto e sapper. Rollup constrói o projeto. Implante com a hospedagem Firebase, agora, surto ou diretamente para seus servidores.

Em suma, você pode estar implantando seu painel de administrador ao vivo hoje.

Características

• Sistema de componentes fácil de usar. Os componentes são HTML simples, CSS, JS.
• Roteamento baseado em pasta.
• Sistema de autenticação robusto. Conecte o FireBase, Passport.js ou Auth0, facilmente.
• Testes e desenvolvimento baseados em componentes. Renderizar componentes únicos - trabalho e iterar mais rápido. Sistema de teste de unidade robusto/teste de componente configurado.
• Fontes de dados. Conecte facilmente seus próprios dados - a partir de um banco de dados, arquivo ou servidor remoto.
• Testes de integração com Cypress.
• Alterne entre os ambientes dev e Prod da linha de comando.
• Implantar da linha de comando para os serviços populares.

Executando o projeto

No entanto, você obtém o código, você pode instalar dependências e executar o projeto no modo de desenvolvimento com:

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

Abra o localhost: 3000 e comece a clicar.

Consulte o Sapper.SVELTE.DEV para obter ajuda para começar.

Estrutura

Sapper espera encontrar dois diretórios na raiz do seu projeto - src e static .

src

O diretório SRC contém os pontos de entrada para o seu aplicativo- client.js , server.js e (opcionalmente) um service-worker.js -junto com um arquivo template.html e um diretório routes .

src/rotas

Este é o coração do seu aplicativo Sapper. Existem dois tipos de rotas - páginas e rotas de servidores .

As páginas são componentes esbeltos gravados em arquivos .svelte . Quando um usuário visita o aplicativo pela primeira vez, ele será servido uma versão renderizada pelo servidor da rota em questão, além de algum JavaScript que 'hidrata' a página e inicializa um roteador do lado do cliente. A partir desse momento, navegar para outras páginas é tratado inteiramente ao cliente por uma sensação rápida e semelhante a um aplicativo. (Sapper pré -carregará e cache o código para essas páginas subsequentes, para que a navegação seja instantânea.)

As rotas de servidor são módulos gravados em arquivos .js , que exportam funções correspondentes aos métodos HTTP. Cada função recebe objetos request e response expressos como argumentos, além de uma next função. Isso é útil para criar uma API JSON, por exemplo.

Existem três regras simples para nomear os arquivos que definem suas rotas:

• Um arquivo chamado src/routes/about.svelte corresponde à rota/sobre o /about . Um arquivo chamado src/routes/blog/[slug].svelte corresponde à rota /blog/:slug ; nesse caso, params.slug está disponível para a rota
• O arquivo src/routes/index.svelte (ou src/routes/index.js ) corresponde à raiz do seu aplicativo. src/routes/about/index.svelte é tratado da mesma forma que src/routes/about.svelte .
• Arquivos e diretórios com um sublinhado líder não criam rotas. Isso permite que você coloque módulos e componentes auxiliares com as rotas que dependem deles - por exemplo, você pode ter um arquivo chamado src/routes/_helpers/datetime.js e não criaria a /_helpers/datetime Route

estático

O diretório estático contém ativos estáticos que devem estar disponíveis. Estes são servidos usando Sirv.

No seu arquivo de serviço worker.js, você pode importá-los como files do manifesto gerado ...

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

... para que você possa cache -os (embora você possa optar por não, por exemplo, se não deseja cache arquivos muito grandes).

Bundler Config

O Sapper usa o Rollup ou o Webpack para fornecer as importações dinâmicas de divisão e dinâmico, além de compilar seus componentes esbeltos. Com o Webpack, ele também fornece recarregamento do módulo quente. Enquanto você não fizer nada, você pode editar os arquivos de configuração para adicionar os plug -ins que desejar.

Modo de produção e implantação

Para iniciar uma versão de produção do seu aplicativo, execute npm run build && npm start . Isso desativará a recarga ao vivo e ativará os plugins apropriados.

Você pode implantar seu aplicativo em qualquer ambiente que suporte o nó 8 ou superior. Como exemplo, para implantar agora, execute estes comandos:

npm install -g now
now

Usando componentes externos

Ao usar componentes esbeltos instalados a partir do NPM, como @sveltejs/svelte-virtual-list, o esbelto precisa da fonte de componente original (em vez de qualquer JavaScript pré-compilado que seja enviado com o componente). Isso permite que o componente seja renderizado no lado do servidor e também mantém o aplicativo do lado do cliente menor.

Por esse motivo, é essencial que o empurrador não trate o pacote como uma dependência externa . Você pode modificar a opção external no server em rollup.config.js ou a opção externals em webpack.config.js ou simplesmente instalar o pacote em devDependencies em vez de dependencies , o que fará com que ela seja agrupada (e, portanto, compilada) com Seu aplicativo:

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

Bugs e feedback

Por favor, seja vocal no rastreador de edição do DBH.