bisonapp

Le Jamstack complet de pile dans la boîte

Bison est un référentiel de démarrage créé à partir d'applications du monde réel chez Echobind. Il représente la «pile Web Greenfield» de notre équipe que nous utilisons lors de la création d'applications Web pour les clients.

Nous nous améliorons toujours et nous nous félicitons des suggestions de la communauté!

Technologie

• Next.js
• Manuscrit
• API TRPC pour la sécurité de type de bout en bout
• Prisma avec postgres
• Vent arrière
• REACT HOW FORM
• Playwright pour les tests E2E
• React Bibliothèque de tests et plaisanterie pour les tests de demande d'unité et d'API

Caractéristiques

• Modèles Hygen personnalisables pour générer de nouveaux fichiers
• Pages de connexion / d'inscription entièrement câblées avec validation côté client et côté serveur.
• Eslint préconfiguré avec les meilleures pratiques Echobind
• Importer un alias de chemin vers le dossier du projet racine ( @/ ) pour éviter la nécessité de chemins d'importation relatifs longs.
• Mettre en place des composants sur ui.shadcn.com

Conventions

• Ne copiez pas / collez des fichiers, utilisez des générateurs et des modèles Hygen. Besoin de mettre à jour le générateur à mesure que votre projet évolue? Ils sont tous dans le dossier _templates .
• N'écrivez pas manuellement les types pour les procédures TRPC. Inférer les types de la définition du routeur.
• Toutes les pages de frontend sont statiques par défaut. Si vous avez besoin de quelque chose de rendu de serveur, ajoutez simplement getServerSideProps comme vous le feriez dans n'importe quelle prochaine application.
• Au lieu de créer des classes CSS de composants (comme .btn ou .input ) ou de l'installation d'une bibliothèque de composants, les composants de l'interface utilisateur doivent être copier / collés dans le dossier /components/ui et ajustés au besoin. ui.shadcn.com est la source recommandée pour ces composants.

Compromis

• Pour réduire la complexité, Bison évite les espaces de travail du fil et sépare les dossiers de niveau supérieur. Pensez à votre application comme un monolithe traditionnel, mais avec un frontend et une API séparés. Cela signifie que les dossiers peuvent être un peu plus entremêlés que vous êtes habitué.

Alternatives

Quelques autres projets qui mûrissent rapidement dans l'espace Jamstack complet.

Redwoodjs Redwood est un cadre très prometteur que nous regardons. Nous avons pris le concept de "cellules" directement à partir de Redwood (bien que notre version prenne un peu plus de code!)

Blitz.js Blitz est également très prometteur. Blitz est construit sur Next.js (que nous aimons!) Et adopte une approche très différente en essayant de supprimer la couche API à l'aide des conventions fournies par Next.js.

Nous pouvons emprunter des concepts à Redwood et Blitz au fil du temps ou même passer à un alors qu'ils continuent de mûrir.

Considérez le bison comme un peu plus proche du métal et préconfiguré pour un DX et une efficacité maximaux. La bonne nouvelle est que si vous n'êtes pas d'accord avec l'un des choix que nous avons faits, rien ne vous est caché. Vous êtes invités à adapter le "framework" pour répondre à vos besoins.

---

Commencer

Créez un nouveau dépôt à partir du modèle de bison.

Utilisation du fil:

yarn create bison-app MyApp

Utilisation de NPX:

npx create-bison-app MyApp

Configurer la base de données

Veuillez vous référer à: configurer Postgres.

Exécutez l'application localement

De la racine, exécutez yarn dev . Cela exécute next dev pour exécuter les fonctions Frontend et sans serveur localement.

Étapes suivantes

Une fois l'application en cours d'exécution localement, vous voudrez configurer le déploiement.

Docs

• Flux de travail de développement recommandé
• Déploiement

Vous avez une idée d'améliorer le bison? Faites-le nous savoir!

---

À propos d'Echobind

Echobind est une agence numérique à service complet qui crée des applications Web et mobiles pour les clients dans une variété d'industries.

Nous sommes des experts dans React, React Native, Node, GraphQL et Rails.

Si vous construisez une nouvelle application, votre équipe s'attaque à un problème difficile, ou si vous avez juste besoin d'aide pour surmonter la ligne d'arrivée, nous serions ravis de travailler avec vous. Dites bonjour et dites-nous sur quoi vous travaillez!