Skip to content

README.md

Latest commit

 

History

History
84 lines (64 loc) · 2.48 KB

README.md

File metadata and controls

84 lines (64 loc) · 2.48 KB
Raw

drogon svelte 5 rollup

an example of drogon framework using svelte 5 as the frontend (pre-built)

but why?

  1. drogon
  2. svelte
  3. use your svelte knowledge (it might not all of 'em)
  4. fully drogon csp is hard to work with & other reasons with .csp
  5. reducing some hardware resource usage on frontend with node based project
  6. well, why not

pros:

  • session (and server side) controlled by backend (drogon)
  • your javascript, css, & all static files mostly just for the end-user

cons:

  • a little bit complex for configuration (on c++ side, perhaps)
  • no (browser) hot reload during development, reload page manually


informations

step to configure, build, & run:

# run cmake configure and build
cmake -S . -B build;
cmake --build build;

# build the frontend
npm i;
npm run build::views;

# checkout and run
cd ./.out;
./backend_www;

for frontend development, read package.json for more scripts information


about directories

  • .config:
    • config project files
  • .vscode:
    • some related to vscode and cmake
    • file ended with .debug suffix is a for debug template, copy and rename to original name without .debug if you need it
  • assets:
    • this dir is your assets to sync
    • the default output dir will be static
    • sometimes your web public directory doesn't need to involve with git, you can the output directory inside assets-sync.js:
  • sources:
    • all the working source code goes here

things to consider

  • server side render is from .csp file where the drogon handle it
  • you still can use svelte head tag, but the first request render is handled by backend
  • see www_svelte.csp to look which value need to be pass from drogon controller, it will be controled by IDrogonCtlHelper most of the time
  • you can combine it with drogon filter & drogon middleware
  • if you missing something when interact data with svelte component, check which data you pass from backend with drogon::HttpViewData

end of readme