vikejs / bati Goto Github PK

To ensure and build trust that our recommendations are accurate, it could be neat to engage in conversations with users. We may need to eventually limit the conversations to tool maintainers to avoid noise.

Example: #24.

Idea: using GitHub issues as upvote platform.

Not seeing your favorite tool? Manually integrate it and/or upvote it here.

Here is the command to generate the project. Hope you can check that 😆

pnpm create @batijs/app --solid --telefunc --h3 --vercel my-app

1. When build project, we have some warning

9:25:34 AM [vike][Warning] You're executing prerender() but the config prerender isn't set to true
▲ [WARNING] "../../../../dist/server/importBuild.cjs" should be marked as external for use with "require.resolve" [require-resolve-not-external]

    node_modules/@brillout/vite-plugin-import-build/dist/autoImporter.js:8:53:
      8 │ ...esolve("../../../../dist/server/importBuild....
        ╵           ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

▲ [WARNING] Ignoring this import because "node_modules/solid-js/dist/server.js" was marked as having no side effects [ignored-bare-import]

    dist/server/entries/pages_error.mjs:4:7:
      4 │ import "solid-js";
        ╵        ~~~~~~~~~~

  "sideEffects" is false in the enclosing "package.json"
  file:

    node_modules/solid-js/package.json:20:2:
      20 │   "sideEffects": false,
         ╵   ~~~~~~~~~~~~~

▲ [WARNING] Ignoring this import because "node_modules/solid-js/dist/server.js" was marked as having no side effects [ignored-bare-import]

    dist/server/entries/pages_star-wars_-id.mjs:6:7:
      6 │ import "solid-js";
        ╵        ~~~~~~~~~~

  "sideEffects" is false in the enclosing "package.json"
  file:

    node_modules/solid-js/package.json:20:2:
      20 │   "sideEffects": false,
         ╵   ~~~~~~~~~~~~~

3 warnings

  .vercel/output/functions/ssr_.func/index.js  506.9kb

2. In production after building the project with the command vite preview --> We cannot add todos list anymore 🤔

[vike][request(21)] HTTP response /_telefunc 404

Hope your team can check this <3 Thanks for the great of this project <3! @magne4000

When I run pnpm create @batijs/app, I get:

node:internal/modules/cjs/loader:995
  const err = new Error(message);
              ^

Error: Cannot find module 'espree'
Require stack:
- C:\Users\user\AppData\Local\pnpm\store\v3\tmp\dlx-20084\node_modules\.pnpm\@[email protected]\node_modules\@batijs\core\dist\index.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:995:15)
    at Function.resolve (node:internal/modules/cjs/helpers:109:19)
    at file:///C:/Users/user/AppData/Local/pnpm/store/v3/tmp/dlx-20084/node_modules/.pnpm/@[email protected]/node_modules/@batijs/core/dist/index.js:160:956
    at file:///C:/Users/user/AppData/Local/pnpm/store/v3/tmp/dlx-20084/node_modules/.pnpm/@[email protected]/node_modules/@batijs/core/dist/index.js:9:595
    at file:///C:/Users/user/AppData/Local/pnpm/store/v3/tmp/dlx-20084/node_modules/.pnpm/@[email protected]/node_modules/@batijs/core/dist/index.js:163:6059
    at file:///C:/Users/user/AppData/Local/pnpm/store/v3/tmp/dlx-20084/node_modules/.pnpm/@[email protected]/node_modules/@batijs/core/dist/index.js:9:595
    at file:///C:/Users/user/AppData/Local/pnpm/store/v3/tmp/dlx-20084/node_modules/.pnpm/@[email protected]/node_modules/@batijs/core/dist/index.js:163:6161
    at file:///C:/Users/user/AppData/Local/pnpm/store/v3/tmp/dlx-20084/node_modules/.pnpm/@[email protected]/node_modules/@batijs/core/dist/index.js:9:595
    at file:///C:/Users/user/AppData/Local/pnpm/store/v3/tmp/dlx-20084/node_modules/.pnpm/@[email protected]/node_modules/@batijs/core/dist/index.js:1062:2023
    at ModuleJob.run (node:internal/modules/esm/module_job:193:25) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'C:\\Users\\user\\AppData\\Local\\pnpm\\store\\v3\\tmp\\dlx-20084\\node_modules\\.pnpm\\@[email protected]\\node_modules\\@batijs\\core\\dist\\index.js'
  ]
}

Node version: v18.12.1
Npm version: 8.19.2

Add i18next

_{React with 👍 to upvote this ticket.}

Add styled components

_{React with 👍 to upvote this ticket.}

Add Compiled.

A familiar and performant compile time CSS-in-JS library for React

_{React with 👍 to upvote this ticket.}

Add Flightcontrol

_{React with 👍 to upvote this ticket.}

In the following, Bati's offical recommendation.

The recommendation follows an open discussion: everyone (especially UI framework maintainers) can engage in a conversation with us if they believe our recommendation to not be accurate.

All three are great choices and there are plenty of companies proving that you can build a successful business with each.

A lot of the choice is about personal preference: we recommend reading the offical website and documentation of React, Vue, and Solid and see what resonates most with you. (If all three seem just fine to you and none of them sticks out, then you can fallback with the conservative choice of picking the most widespread one which currently is React.)

Vike works with any UI framework, which means that you can use several UI frameworks for the same website. For example, you can use Vue or Solid while using this one React library that only works with React. (That's why we say that "Vike has the largest ecossystem" as you can cherry-pick from the ecosystem of any UI framework.)

Instead of getting stuck with decision paralysis, we recommend to decide and get started quickly and, as you scale, see for yourself whether you like your initial choice, and progressively switch UI frameworks if you change your mind.

React:

• Pro: Largest ecosystem.
• Pro: JSX templates (personal preference: it's a "con" for some people).
• Pro: Innovative.
  • React introduced many novelties, most notably unidirectional UIs, JSX, Hooks, and Server Components.
• Con: Sometimes difficult to use.
  • Its reactivity system is based on immutable objects which makes React inherently difficult to use (for example, you'll need to use memo to keep your app performant).
  • Sometimes complex, for example UI tearing is complex in a leaky way: libraries cannot always fully abtract that complexity away.
  • It has to be shown whether RSC will manage to provide an easy DX. Today, using RSC is difficult to use.
  • It has a lot of paper cuts, such as unhelpful error messages, no built-in TypeScript types, or libraries with broken ESM which need manual fixing.

Vue:

• Pro: Large ecosystem.
• Pro: Simple.
• Pro: HTML-like templates (personal preference: it's a "con" for some people).
• Pro: Cohesive ecosystem of basic tools.

Solid:

• Pro: Simple.
  • Its reactivity system is based on observable objects, which makes it considerably simpler to use and more performant.
• Pro: Highly performant.
• Pro: JSX templates (personal preference: it's a "con" for some people).
• Pro: Responsive maintainers and bugs are fixed promptly.
• Con: Its ecosystem is growing but still not as large as React/Vue's ecosystem.

Hey, Just wanted to throw in a request for supporting ElysiaJS and bun. All good if not but Elysia is WinterCG and seems to be a popular pick for bun users. I'm working on getting this setup on my own in the meantime.

For folks who don't speak a language that includes â in their writing, having to write "Bâti" is a blocker.

Suggestion: we keep "Bâti" in the logo but we use "Bati" otherwise.

hi can we use unocss instead of tailwindcss ?

Describe the bug
After starting a new project with the command pnpm create @batijs/app --react, installing dependencies and running dev mode the console shows an error
[vike][config] Failed to transpile /pages/+config.ts because:
✘ [ERROR] Could not resolve "vike-react/config" [plugin vike-esbuild]

To Reproduce
Steps to reproduce the behavior, run the following commands in order:
pnpm create @batijs/app --react
cd my-app
pnpm i && pnpm run dev

Expected behavior
Run dev mode without any errors

Screenshots

Additional context
Using macOS Ventura 13.6.6, also I have updated node, pnpm, typescript and all libs versions to match the versions on stackblitz demo (which I know works), still the problem persists. I also tried installing the dependencies from the stackblitz lockfile.

Describe the bug
Almost all of the settings on the landing page use checkboxes that have exclusive values. Those appear as checkboxes and have <input type="checkbox"> in HTML while semantically they work as radio.

Expected behavior
Checkboxes should be used whenever they are not depend on others state. Radio buttons should be used when there's exclusive state and only one option can be selected.

Additional context
Also focusing on one checkbox doesn't allow me to switch to another option while this behaviour is described in WCAG

I think vike should use own environment first. vike-node looks promising, and batijs should adopt it instead for better DX

Describe the bug
I'm creating a new project with
pnpm create bati --react --tailwindcss --trpc --hono --drizzle --cloudflare
after create the DB and check that everything works on run pnpm run dev
I'm trying to run pnpm run preview but fails with this and other errors.

> wrangler pages dev


 ⛅️ wrangler 3.69.1 (update available 3.70.0)
-------------------------------------------------------

✘ [ERROR] Could not resolve "fs"

    ../../node_modules/.pnpm/[email protected]/node_modules/better-sqlite3/lib/database.js:2:19:
      2 │ const fs = require('fs');
        ╵                    ~~~~

  The package "fs" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.


✘ [ERROR] Could not resolve "path"

    ../../node_modules/.pnpm/[email protected]/node_modules/better-sqlite3/lib/database.js:3:21:
      3 │ const path = require('path');
        ╵                      ~~~~~~

To Reproduce

pnpm create bati --react --tailwindcss --trpc --hono --drizzle --cloudflare
pnpm drizzle:generate
pnpm drizzle:migrate
pnpm drizzle:seed
pnpm run preview

Expected behavior
preview should work out of the box.
if D1 setup is required, the instructions should be part of the read me.
https://orm.drizzle.team/docs/get-started-sqlite#cloudflare-d1

Additional context
I just try to follow the drizzle instruction, but I don't know how to make this works.
db.ts has this

import Database from "better-sqlite3";
import { drizzle } from "drizzle-orm/better-sqlite3";
import * as schema from "./schema";

const sqlite = new Database("sqlite.db");
export const db = drizzle(sqlite, { schema });

and export the db object, but in drizzle example, we have a request that has an env attribute that contains the DB.

export default {
  async fetch(request: Request, env: Env) {
    const db = drizzle(env.<BINDING_NAME>);
    const result = await db.select().from(users).all()
    return Response.json(result);
  },
};

so I can not easly export that db object to be used in the rest of the app.

Since there's already this awesome graphical user interface, it would be really cool if I could pick Yarn 4.3+ over pnpm (as I use it everywhere).

Fun fact: pnpm uses huge chunks of the yarn berry code base under the hood ^^

Shared files are files that can be imported by 0, 1 or multiple other files. Currently, those files are put in dedicated shared-* folders. They are created on file system if the bati.flags condition in package.json is true.

It's a bit cumbersome to maintain, and for complex flags combinations, it will become more and more difficult to not break things (i.e. ensuring that these files are not created when they shouldn't be).

The goal of this RFC will be to ensure that some files are only generated on file system if at least one other regular file imports it. It mostly impact shared files, but can be used anywhere in boilerplates.

How to tag a file as "dependency"

Possible solutions (TODO: pick one):

1. files starting with comment: /* BATI dependency */
   • could be adapted in the future to support other tags: /* BATI dependency,tag1,tag2 */
2. files with names containing [dependency], like handler[dependency].ts
   • could be adapted in the future to support other tags: handler[dependency,tag1,tag2].ts

we could use nodemon with custom --exec with tsx in dev command, any plan for making it this way? i made the nodemon to watch only the server directory since only in there i would change any server-related code.

i tried using ts-node, but it seems giving TS Error, using tsx is much more easier.

Describe the bug
I use an express app to have the api on the server itself it returns a 404, it's like it doesn't find the path with vercel

To Reproduce
Just use this preset or whatever with vercel and express and check the deploy, looks great but the other endpoints are dead
pnpm create @batijs/app --react --tailwindcss --telefunc --express --vercel --eslint

Expected behavior
The other endponts other than "*" returns will return 202 or whatever if it defined in the server

Screenshots

add Biome as linter

_{React with 👍 to upvote this ticket.}

Hi @magne4000.

Please take a look and compare the context & pageContextInit of both h3 & express.
You can see in the screenshot below that with h3 the context is context : { context: Context }, while others like express, fastify, it's context: Context

Add Shopify.

_{React with 👍 to upvote this ticket.}

Hey guys! How do I use pinia with Batijs? I'm using Vuejs

Is it possible to add deno as a runner?

Discussed in https://github.com/batijs/bati/discussions/305

Hello, firstly thanks for the amazing work, its awesome. I noticed that bati creates a scaffold that does not have any pageTransitions because of which the page looks like stuck and does not gives any visual feedback. It will be great if it has a basic default transition.

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

This repository currently has no open or pending branches.

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

Describe the bug
A clear and concise description of what the bug is.

Website down

To Reproduce
Steps to reproduce the behavior:

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Additional context
Add any other context about the problem here.

Add PandaCSS.

_{React with 👍 to upvote this ticket.}

Firebase Hosting with

• Firebase Auth
• Firestore + Storage (noSQL, bucket)
• Functions
• The Emulator

Add BigCommerce.

_{React with 👍 to upvote this ticket.}

Check:

pnpm create @batijs/app --react --tailwindcss --authjs --express --eslint --prettier
cd my-app/
pnpm install

Output excerpt:

 WARN  6 deprecated subdependencies found: @babel/[email protected], @babel/[email protected], @babel/[email protected], @babel/[email protected], @babel/[email protected], @babel/[email protected]

Then

pnpm preview

and

curl localhost:3000

Output excerpt:

Server listening on http://localhost:3000
Error: [@brillout/[email protected]][Wrong Usage] Cannot find server entry. (Re-)build your app and try again. If you still get this error, then you may need to manually import the server entry, see https://github.com/brillout/vite-plugin-server-entry#manual-import
    at importServerEntry (/home/fl/tmp/my-app/node_modules/.pnpm/@[email protected]/node_modules/@brillout/vite-plugin-server-entry/dist/importServerEntry/index.js:51:29)
    at async loadImportBuild (file:///home/fl/tmp/my-app/node_modules/.pnpm/[email protected][email protected]/node_modules/vike/dist/esm/node/runtime/globalContext/loadImportBuild.js:13:9)
    at async initGlobalContext (file:///home/fl/tmp/my-app/node_modules/.pnpm/[email protected][email protected]/node_modules/vike/dist/esm/node/runtime/globalContext.js:75:30)
    at async renderPageAndPrepare (file:///home/fl/tmp/my-app/node_modules/.pnpm/[email protected][email protected]/node_modules/vike/dist/esm/node/runtime/renderPage.js:66:9)
    at async renderPage_wrapper (file:///home/fl/tmp/my-app/node_modules/.pnpm/[email protected][email protected]/node_modules/vike/dist/esm/node/runtime/renderPage.js:26:24)
    at async renderPage (file:///home/fl/tmp/my-app/node_modules/.pnpm/[email protected][email protected]/node_modules/vike/dist/esm/node/runtime/renderPage.js:46:50)
    at <anonymous> (/home/fl/tmp/my-app/express-entry.ts:75:25)

Can you please take a look into this?

If the preview script NODE_ENV=production tsx ./express-entry.ts would work, is it also suited to run in production? In VPS this is "server:prod": "cross-env NODE_ENV=production npm run server", is there any advantage using the former?

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Location: renovate.json
Error type: Invalid JSON (parsing failed)
Message: Syntax error: expecting ':' near gy: "in-ra

I think some preset buttons could be nice:

Plain Vike
_{For trying out Vike, or manually assembling your stack.}

E-commerce
_{E-commerce website powered by Shopify.}

Frontend only
_{If a backend isn't needed, or a backend already exists.}

Full-stack
_{Frontend + Server + Database.}

Add Inlang Paraglide-js.

Personally I think inlang paraglide-js is by far the most modern, optimal and generic way of implementing internationalization, and I thought it would be awesome to have it on board.
Having a template working with the latest Vike and Solid-JS would be really awesome and alleviate the efforts to implement URL based internationalization.

In fact, inlang itself uses Vike and Solid JS as their website's stack, and it's publicly available in their monorepo

_{React with 👍 to upvote this ticket.}

Currently those tests run with a @batijs/cli version with devDependencies, which eclipses some issues (#104).
Using something like yalc could be a good idea (but yalc itself doesn't seem to be maintained)

the starwars data in boilerplate is fetched from external data from other server, i hope it could be modified to be a simpler one that just fetching data from the project route itself.

Add Eslint.

_{React with 👍 to upvote this ticket.}

Describe the bug
404s are not detected. The is404 prop in the _error/+Page.tsx is always undefined. The Vue template has this right though, using the usePageContext: https://github.com/batijs/bati/blob/a51feb8d66ded70ecc4f82a5201a172c7fef40cf/boilerplates/vue/files/pages/_error/%2BPage.vue#L10

To Reproduce

• Create an app with React
• Visit a non existent page
• Says '500 Internal Server Error'

Expected behavior

• Should say '404 Page Not Found'

Additional context
This can even be observed on the batijs website: https://batijs.github.io/not-a-page

I created a new vite react using Bati with express, tailwind, vite and react.

When I serve the dev or preview I get this message in console about userAgent:

[[email protected]][Warning] HTML streaming (https://vike.dev/streaming) disabled because User Agent is unknown: make sure to provide pageContext.userAgent (typically with renderPage({ userAgent: req.headers['user-agent'] }), see https://vike.dev/renderPage) (so that HTML streaming can be disabled for bots such as Google Bot).

When I add userAgent in vike-handler.ts:

const pageContextInit = { ...context, urlOriginal: request.url, userAgent: request.headers.get('user-agent') };
  const pageContext = await renderPage(pageContextInit);

I get the error message:

Error: [[email protected]][Wrong Usage] Cannot inject following chunk after stream has ended:

What would be the correct way to do this? This is a default fresh install with Bati so maybe this can be improved?

Thanks

Describe the bug
When running a bati command in a local environment with a preset that includes express, the file "vike-handler.ts" is missing in the "./server" folder. Where it's present on the stackblitz corresponding example.
npm create @batijs/app --react --tailwindcss --express

To Reproduce
Just execute npm create @batijs/app --react --tailwindcss --express in a locale environment (Windows 11)

Add Svelte.

_{React with 👍 to upvote this ticket.}

how about adding Cloudflare workers to Hosting?

https://workers.cloudflare.com/

_{React with 👍 to upvote this ticket.}

Add Fastify.

_{React with 👍 to upvote this ticket.}

Is your website internal?

Yes => auto-select SPA. (FYI :ssr config.)

Does the content of your website change only occasionally?

Yes => auto-select Pre-rendering and GitHub Pages / Netlify.

Do you need a database?

Auto-select accordingly.

A neat thing is that it would enable us to show warnings if the user's selection doesn't make sense and/or isn't recommended.

Add Nitrojs.

_{React with 👍 to upvote this ticket.}

Describe the bug

On Stackblitz from https://batijs.dev:

~/projects/p8kcpu--run
❯ pnpm run dev

> [email protected] dev /home/projects/p8kcpu--run
> vite

failed to load config from /home/projects/p8kcpu--run/vite.config.ts
error when starting dev server:
Error: Could not locate the bindings file. Tried:
 → /home/projects/p8kcpu--run/node_modules/.pnpm/[email protected]/node_modules/better-sqlite3/build/better_sqlite3.node
 → /home/projects/p8kcpu--run/node_modules/.pnpm/[email protected]/node_modules/better-sqlite3/build/Debug/better_sqlite3.node
 → /home/projects/p8kcpu--run/node_modules/.pnpm/[email protected]/node_modules/better-sqlite3/build/Release/better_sqlite3.node
 → /home/projects/p8kcpu--run/node_modules/.pnpm/[email protected]/node_modules/better-sqlite3/out/Debug/better_sqlite3.node
 → /home/projects/p8kcpu--run/node_modules/.pnpm/[email protected]/node_modules/better-sqlite3/Debug/better_sqlite3.node
 → /home/projects/p8kcpu--run/node_modules/.pnpm/[email protected]/node_modules/better-sqlite3/out/Release/better_sqlite3.node
 → /home/projects/p8kcpu--run/node_modules/.pnpm/[email protected]/node_modules/better-sqlite3/Release/better_sqlite3.node
 → /home/projects/p8kcpu--run/node_modules/.pnpm/[email protected]/node_modules/better-sqlite3/build/default/better_sqlite3.node
 → /home/projects/p8kcpu--run/node_modules/.pnpm/[email protected]/node_modules/better-sqlite3/compiled/18.20.3/linux/x64/better_sqlite3.node
 → /home/projects/p8kcpu--run/node_modules/.pnpm/[email protected]/node_modules/better-sqlite3/addon-build/release/install-root/better_sqlite3.node
 → /home/projects/p8kcpu--run/node_modules/.pnpm/[email protected]/node_modules/better-sqlite3/addon-build/debug/install-root/better_sqlite3.node
 → /home/projects/p8kcpu--run/node_modules/.pnpm/[email protected]/node_modules/better-sqlite3/addon-build/default/install-root/better_sqlite3.node
 → /home/projects/p8kcpu--run/node_modules/.pnpm/[email protected]/node_modules/better-sqlite3/lib/binding/node-v108-linux-x64/better_sqlite3.node
    at resolveConfig (file:///home/projects/p8kcpu--run/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-CzJTQ5q7.js:66484:24)
    at _createServer (file:///home/projects/p8kcpu--run/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-CzJTQ5q7.js:63097:18)
    at CAC.eval (file:///home/projects/p8kcpu--run/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/cli.js:750:20)
 ELIFECYCLE  Command failed with exit code 1.

To Reproduce

pnpm create @batijs/app --solid --tailwindcss --auth0 --trpc --hono --drizzle --cloudflare --biome

--> Try on Stackblitz

Expected behavior
Working setup

Add vanilla-extract
_{React with 👍 to upvote this ticket.}