feat(blog): building a blog environment using honox #11
Conversation
|
Hi Yossy, supercool! Yes lets continue in this PR and see what happens. Cella is still changing a lot so it might make sense to just work in a clean hono environment without cella for now. When we have a working proof of concept, we take the next step into making it work inside cella. |
|
Hi flipvh! Roger that! I'll continue this PR as is! |
|
About your question in the issue concerning hosting. Yes for hosting we currently use render.com. It hosts all that we need: db, static site, our api and our tus server for file uploading. However, I'd like to also try cloudflare and perhaps even fly.io. But didn't find time for that yet |
Understood! I'm not in a hurry at all, so take your time! Thanks for letting me know! 🙇♂️ |
|
I was looking around a bit at things at hand and found that shadcn/ui depends on react, so I was able to get it to work, although I had to configure it a bit to use HonoX! |
|
I was able to get the blog to display in SSR! I think this completes the environment setup area! Next I'm going to work on the UI area! It's a simple one! |
|
Hi @flipvh👋
Have you decided on a design for your blog yet? 👀 |
|
thnks for the reminder. I borrowed the style from a friend a bit (https://mave.io). The wrapper elements are basically the same as those used for the pages in /frontend/src/modules/marketing. For example https://cellajs.com/accessibility shows this. You can see the main wrapping component that is used for that page here: https://github.com/cellajs/cella/blob/main/frontend/src/modules/common/public-page.tsx See the attachments |
|
Hope that helps @yossydev! let me know if you need more or have questions! PS: did you manage to get cella running on your local machine? We are looking for feedback on how to make this more convenient or easy. Exciting! |
|
Hi @flipvh 👋 Thank you, I will try to get a copy of the article! Now that I have the UI, all I have to do is make it! It helps! I built the environment first and didn't touch the rest! 🙏 |
|
I'm working on an implementation, but I'm afraid that if I try to use the components in I'll also try to read some more code in |
|
Hi @flipvh 👋 I'm trying to launch > cella@0.1.0 docker /Users/yy/Desktop/cella
> docker-compose --env-file env/.env up
[+] Running 4/0
✔ Container db Created 0.0s
✔ Container frontend Created 0.0s
✔ Container tus Created 0.0s
✔ Container backend Created 0.0s
Attaching to backend, db, frontend, tus
db |
db | PostgreSQL Database directory appears to contain a database; Skipping initialization
db |
db | 2024-04-01 16:10:36.435 UTC [1] LOG: starting PostgreSQL 16.2 (Debian 16.2-1.pgdg120+2) on aarch64-unknown-linux-gnu, compiled by gcc (Debian 12.2.0-14) 12.2.0, 64-bit
db | 2024-04-01 16:10:36.435 UTC [1] LOG: listening on IPv4 address "0.0.0.0", port 5432
db | 2024-04-01 16:10:36.435 UTC [1] LOG: listening on IPv6 address "::", port 5432
db | 2024-04-01 16:10:36.438 UTC [1] LOG: listening on Unix socket "/var/run/postgresql/.s.PGSQL.5432"
db | 2024-04-01 16:10:36.444 UTC [29] LOG: database system was shut down at 2024-04-01 16:09:55 UTC
db | 2024-04-01 16:10:36.449 UTC [1] LOG: database system is ready to accept connections
tus |
tus | > tus@1.0.0 dev /app/tus
tus | > NODE_ENV=development tsup --watch --onSuccess "tsx dist/index.cjs"
tus |
frontend |
frontend | > frontend@0.0.1 dev /app/frontend
frontend | > NODE_ENV=development vite --mode development
frontend |
frontend | node:internal/modules/cjs/loader:1147
frontend | throw err;
frontend | ^
frontend |
frontend | Error: Cannot find module '/app/frontend/node_modules/vite/bin/vite.js'
frontend | at Module._resolveFilename (node:internal/modules/cjs/loader:1144:15)
frontend | at Module._load (node:internal/modules/cjs/loader:985:27)
frontend | at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:135:12)
frontend | at node:internal/main/run_main_module:28:49 {
frontend | code: 'MODULE_NOT_FOUND',
frontend | requireStack: []
frontend | }
frontend |
frontend | Node.js v20.11.1
frontend | ELIFECYCLE Command failed with exit code 1.
backend |
backend | > backend@0.0.1 migrate:script /app/backend
backend | > tsx dist/src/db/migrate.cjs
backend |
backend | node:internal/modules/cjs/loader:1147
backend | throw err;
backend | ^
backend |
backend | Error: Cannot find module '/app/backend/node_modules/tsx/dist/cli.mjs'
backend | at Module._resolveFilename (node:internal/modules/cjs/loader:1144:15)
backend | at Module._load (node:internal/modules/cjs/loader:985:27)
backend | at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:135:12)
backend | at node:internal/main/run_main_module:28:49 {
backend | code: 'MODULE_NOT_FOUND',
backend | requireStack: []
backend | }
backend |
backend | Node.js v20.11.1
backend | ELIFECYCLE Command failed with exit code 1.
frontend exited with code 0
tus | CLI Building entry: src/index.ts
tus | CLI Using tsconfig: tsconfig.json
tus | CLI tsup v8.0.2
tus | CLI Using tsup config: /app/tus/tsup.config.ts
tus | CLI Running in watch mode
tus | CLI Target: es2020
tus | CLI Cleaning output folder
tus | CJS Build start
tus | CJS dist/index.cjs 768.00 B
tus | CJS dist/index.cjs.map 1.08 KB
tus | CJS ⚡️ Build success in 25ms
tus | CLI Watching for changes in "."
tus | CLI Ignoring changes in "**/{.git,node_modules}/**" | "dist" |
|
Hi @yossydev let me check it out and thnks for your interest in cella. It would be great if you can help us out with cella itself too if you see opportunities there. Actually, we don't use Docker ourselves so its a bit easy to forget about checking if that flow still works. But I will do so now. I also plan to support a serverless Postgres solution ( like Neon or Supabase) so it becomes easier to just install without having to run postgres locally. |
|
Hi @flipvh 👋
I see! I understand! If there is anything I can do to help, I will contribute to cellajs as well! |
|
Hi @flipvh 👋 This is a consultation, but what about DI the logic of Currently, it depends on various libraries, especially the dependency on I feel like a little bit of test code would make it a better template. |
|
Hi @yossydev that sounds interesting. To be sure I understand correctly can you give small examples? Yes, testing is on our roadmap, we are indeed looking at storybook, vitest and playwright. We currently use pivotal tracker to manage issues/tickets, you can see a story about starting with testing here: https://www.pivotaltracker.com/story/show/186816158 And about storybook I am following this PR: shadcn-ui/ui#1561 Thanks!! |
|
OK, I'll put out a PR later! |
|
Hi @flipvh 👋 And once I've done that, I've got the look and feel of the home page! The code is not very maintainable, so I'll fix that later! Next, I want to make a blog detail page, but if Hono's Sorry for the late implementation!
↑ This is the top page UI we created! |
|
That looks like great progress. Well done! |
|
Nested Layout in react-renderer implemented in hono's middleware!(https://github.com/honojs/middleware/releases/tag/%40hono%2Freact-renderer%400.2.0) |
|
No rush @yossydev, but thanks for the update! |
I don't know how this repository operates, so you don't have to merge this PR right away!
You can use this PR to handle all of your blogging needs, or you can merge it first! I leave it up to you!
Overview
At first, I tried to build the environment.
I ran
npm create hono@latest,pnpm install && pnpm devand confirmed that http://localhost:5173/ is up and running!Consultation
Should I make it possible to run blog with docker?
Personally, I don't think it's particularly necessary to run it with docker, so I haven't made any special settings. If it is necessary, I will respond!
Related