solid-start
vite
solid-start | vite | |
---|---|---|
16 | 807 | |
4,890 | 65,591 | |
8.4% | 1.3% | |
9.8 | 9.8 | |
6 days ago | 1 day ago | |
TypeScript | TypeScript | |
MIT License | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
solid-start
-
This Month in Solid #2: Welcome to ClownTown, Start docs, and more ๐
You can read more about it here: github.com/solidjs/solid-start/releases/tag/v0.7.0
- This Month In Solid: SolidStart 0.6.0, Solid Docs Beta, and more ๐
-
Deploy a solid-start app on github pages
Solid-start is the long awaited meta-framework for Solid.js. Since it entered its second beta after a rewrite, there were a few breaking changes, so the previous article on this one's topic was no longer valid.
-
Does solid start support CSR or SSG if so how?
Solid Start a metaframework (think Next/SvelteKit/Remix) is still a work in progress: https://github.com/solidjs/solid-start
-
Using Solid Start with GitHub pages
You may or may not yet have heard about Solid Start, which is the much anticipated upcoming meta framework for Solid.js currently being in beta.
-
What I learned making and maintaining a custom Wordpress shop
I will present a solution for this in a future post using Solid-Start.
-
Workerdย : le moteur dโexรฉcution JavaScript / Wasm qui alimente les Workers de Cloudflareย โฆ
// An example Worker that serves static files from disk. This includes logic to do things like // set Content-Type based on file extension, look for `index.html` in directories, etc. // // This code supports several configuration options to control the serving logic, but, better // yet, because it's just JavaScript, you can freely edit it to suit your unique needs. export default { async fetch(req, env) { if (req.method != "GET" && req.method != "HEAD") { return new Response("Not Implemented", {status: 501}); } let url = new URL(req.url); let path = url.pathname; let origPath = path; let config = env.config || {}; if (path.endsWith("/") && !config.allowDirectoryListing) { path = path + "index.html"; } let content = await env.files.fetch("http://dummy" + path, {method: req.method}); if (content.status == 404) { if (config.hideHtmlExtension && !path.endsWith(".html")) { // Try with the `.html` extension. path = path + ".html"; content = await env.files.fetch("http://dummy" + path, {method: req.method}); } if (!content.ok && config.singlePageApp) { // For any file not found, serve the main page -- NOT as a 404. path = "/index.html"; content = await env.files.fetch("http://dummy" + path, {method: req.method}); } if (!content.ok) { // None of the fallbacks worked. // // Look for a 404 page. content = await env.files.fetch("http://dummy/404.html", {method: req.method}); if (content.ok) { // Return it with a 404 status code. return wrapContent(req, 404, "404.html", content.body, content.headers); } else { // Give up and return generic 404 message. return new Response("404 Not found", {status: 404}); } } } if (!content.ok) { // Some error other than 404? console.error("Fetching '" + path + "' returned unexpected status: " + content.status); return new Response("Internal Server Error", {status: 500}); } if (content.headers.get("Content-Type") == "application/json") { // This is a directory. if (path.endsWith("/")) { // This must be because `allowDirectoryListing` is `true`, so this is actually OK! let listingHtml = null; if (req.method != "HEAD") { let html = await makeListingHtml(origPath, await content.json(), env.files); return wrapContent(req, 200, "listing.html", html); } } else { // redirect to add '/' suffix. url.pathname = path + "/"; return Response.redirect(url); } } if (origPath.endsWith("/index.html")) { // The file exists, but was requested as "index.html", which we want to hide, so redirect // to remove it. url.pathname = origPath.slice(0, -"index.html".length); return Response.redirect(url); } if (config.hideHtmlExtension && origPath.endsWith(".html")) { // The file exists, but was requested with the `.html` extension, which we want to hide, so // redirect to remove it. url.pathname = origPath.slice(0, -".html".length); return Response.redirect(url); } return wrapContent(req, 200, path.split("/").pop(), content.body, content.headers); } } function wrapContent(req, status, filename, contentBody, contentHeaders) { let type = TYPES[filename.split(".").pop().toLowerCase()] || "application/octet-stream"; let headers = { "Content-Type": type }; if (type.endsWith(";charset=utf-8")) { let accept = req.headers.get("Accept-Encoding") || ""; if (accept.split(",").map(s => s.trim()).includes("gzip")) { // Apply gzip encoding on the fly. // TODO(someday): Support storing gziped copies of files on disk in advance so that gzip // doesn't need to be applied on the fly. headers["Content-Encoding"] = "gzip"; } } if (req.method == "HEAD" && contentHeaders) { // Carry over Content-Length header on HEAD requests. let len = contentHeaders.get("Content-Length"); if (len) { headers["Content-Length"] = len; } } return new Response(contentBody, {headers, status}); } let TYPES = { txt: "text/plain;charset=utf-8", html: "text/html;charset=utf-8", htm: "text/html;charset=utf-8", css: "text/css;charset=utf-8", js: "text/javascript;charset=utf-8", md: "text/markdown;charset=utf-8", sh: "application/x-shellscript;charset=utf-8", svg: "image/svg+xml;charset=utf-8", xml: "text/xml;charset=utf-8", png: "image/png", jpeg: "image/jpeg", jpg: "image/jpeg", jpe: "image/jpeg", gif: "image/gif", ttf: "font/ttf", woff: "font/woff", woff2: "font/woff2", eot: "application/vnd.ms-fontobject", // When serving files with the .gz extension, we do NOT want to use `Content-Encoding: gzip`, // because this will cause the user agent to unzip it, which is usually not what the user wants // when downloading a gzipped archive. gz: "application/gzip", bz: "application/x-bzip", bz2: "application/x-bzip2", xz: "application/x-xz", zst: "application/zst", } async function makeListingHtml(path, listing, dir) { if (!path.endsWith("/")) path += "/"; let htmlList = []; for (let file of listing) { let len, modified; if (file.type == "file" || file.type == "directory") { let meta = await dir.fetch("http://dummy" + path + file.name, {method: "HEAD"}); console.log(meta.status, "http://dummy" + path + file.name, meta.headers.get("Content-Length")); len = meta.headers.get("Content-Length"); modified = meta.headers.get("Last-Modified"); } len = len || `(${file.type})`; modified = modified || ""; htmlList.push( ` ` + `${encodeURIComponent(file.name)}">${file.name}` + `${modified}${len}`); } return ` Index of ${path} td { padding-right: 16px; text-align: right; } td:nth-of-type(1) { font-family: monospace; text-align: left; } th { text-align: left; } Index of ${path} ${htmlList.join("\n")} `} Enter fullscreen mode Exit fullscreen mode Et je lance lโexposition de mon contenu statique avec Workerd afin de mimer Cloudflare Pages :Cloudflare Pages root@workerd:~/gatsby-starter-netlify-cms# workerd serve config.capnp Enter fullscreen mode Exit fullscreen mode FilenameModifiedSize Et il apparaรฎt directement comme prรฉvu sur le port HTTP 80 โฆ root@workerd:~# netstat -tunlp Active Internet connections (only servers) Proto Recv-Q Send-Q Local Address Foreign Address State PID/Program name tcp 0 0 0.0.0.0:22 0.0.0.0:* LISTEN 858/sshd: /usr/sbin tcp 0 0 127.0.0.53:53 0.0.0.0:* LISTEN 13700/systemd-resol tcp6 0 0 :::22 :::* LISTEN 858/sshd: /usr/sbin tcp6 0 0 :::80 :::* LISTEN 38659/workerd udp 0 0 127.0.0.53:53 0.0.0.0:* 13700/systemd-resol udp 0 0 45.32.146.22:68 0.0.0.0:* 13695/systemd-netwo Enter fullscreen mode Exit fullscreen mode Avec une exposition globale et plus sรฉcurisรฉe par exemple via โฆ Cloudflare Tunnel : Preview Local Projects with Cloudflare Tunnel ยท Cloudflare Pages docs root@workerd:~/gatsby-starter-netlify-cms# cloudflared tunnel --url http://localhost:80 2022-12-04T23:36:19Z INF Thank you for trying Cloudflare Tunnel. Doing so, without a Cloudflare account, is a quick way to experiment and try it out. However, be aware that these account-less Tunnels have no uptime guarantee. If you intend to use Tunnels in production you should use a pre-created named tunnel by following: https://developers.cloudflare.com/cloudflare-one/connections/connect-apps 2022-12-04T23:36:19Z INF Requesting new quick Tunnel on trycloudflare.com... 2022-12-04T23:36:22Z INF +--------------------------------------------------------------------------------------------+ 2022-12-04T23:36:22Z INF | Your quick Tunnel has been created! Visit it at (it may take some time to be reachable): | 2022-12-04T23:36:22Z INF | https://springs-adipex-ceiling-notebooks.trycloudflare.com | 2022-12-04T23:36:22Z INF +--------------------------------------------------------------------------------------------+ Enter fullscreen mode Exit fullscreen mode Jโaurais pu รฉgalement utiliser Wrangler2 pour mimer Cloudflare Pages en lieu et place de Workerd : GitHub - cloudflare/wrangler2: โ ๏ธ The CLI for Cloudflare Workersยฎ Cloudflare Workers documentation ยท Cloudflare Workers docs root@workerd:~/gatsby-starter-netlify-cms# npm install wrangler -g root@workerd:~/gatsby-starter-netlify-cms# wrangler pages dev --help wrangler pages dev [directory] [-- command..] ๐งโ๐ป Develop your full-stack Pages application locally Positionals: directory The directory of static assets to serve [string] command The proxy command to run [string] Flags: -e, --env Environment to use for operations and .env files [string] -h, --help Show help [boolean] -v, --version Show version number [boolean] Options: --local Run on my machine [boolean] [default: true] --compatibility-date Date to use for compatibility checks [string] --compatibility-flags, --compatibility-flag Flags to use for compatibility checks [array] --ip The IP address to listen on [string] [default: "0.0.0.0"] --port The port to listen on (serve from) [number] [default: 8788] --inspector-port Port for devtools to connect to [number] --proxy The port to proxy (where the static assets are served) [number] --script-path The location of the single Worker script if not using functions [string] [default: "_worker.js"] -b, --binding Bind variable/secret (KEY=VALUE) [array] -k, --kv KV namespace to bind (--kv KV_BINDING) [array] --d1 D1 database to bind [array] -o, --do Durable Object to bind (--do NAME=CLASS) [array] --r2 R2 bucket to bind (--r2 R2_BINDING) [array] --live-reload Auto reload HTML pages when change is detected [boolean] [default: false] --local-protocol Protocol to listen to requests on, defaults to http. [choices: "http", "https"] --persist Enable persistence for local mode, using default path: .wrangler/state [boolean] --persist-to Specify directory to use for local persistence (implies --persist) [string] --log-level Specify logging level [choices: "debug", "info", "log", "warn", "error", "none"] ๐ง 'wrangler pages ' is a beta command. Please report any issues to https://github.com/cloudflare/wrangler2/issues/new/choose root@workerd:~/gatsby-starter-netlify-cms# wrangler pages dev ./public/ --ip "0.0.0.0" --port "80" --compatibility-date "2022-12-04" --local ๐ง 'wrangler pages ' is a beta command. Please report any issues to https://github.com/cloudflare/wrangler2/issues/new/choose No functions. Shimming... โญโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฎ โ [b] open a browser, [d] open Devtools, [c] clear console, [x] to exit โ โฐโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฏ [pages:wrn] Parsed 22 valid header rules. [pages:wrn] Service bindings are experimental. There may be breaking changes in the future. root@workerd:~# netstat -tunlp Active Internet connections (only servers) Proto Recv-Q Send-Q Local Address Foreign Address State PID/Program name tcp 0 0 0.0.0.0:22 0.0.0.0:* LISTEN 858/sshd: /usr/sbin tcp 0 0 0.0.0.0:80 0.0.0.0:* LISTEN 39444/node tcp 0 0 127.0.0.53:53 0.0.0.0:* LISTEN 13700/systemd-resol tcp6 0 0 :::22 :::* LISTEN 858/sshd: /usr/sbin tcp6 0 0 :::6284 :::* LISTEN 39428/node tcp6 0 0 :::9229 :::* LISTEN 39428/node udp 0 0 127.0.0.53:53 0.0.0.0:* 13700/systemd-resol udp 0 0 45.32.146.22:68 0.0.0.0:* 13695/systemd-netwo Enter fullscreen mode Exit fullscreen mode Le site web statique avec Gatsby est รฉgalement disponible en HTTP/80 : Pour simuler un environnement de production, installation de PM2 : PM2 - Home root@workerd:~/gatsby-starter-netlify-cms# npm install -g pm2@latest root@workerd:~/gatsby-starter-netlify-cms# pm2 ------------- __/\\\\\\\\\\\\\____ /\\\\ ____________/\\\\____ /\\\\\\\\\ _____ _\/\\\/////////\\\_\/\\\\\\ ________/\\\\\\__ /\\\///////\\\___ _\/\\\ _______\/\\\_\/\\\//\\\____ /\\\//\\\_\/// ______\//\\\__ _\/\\\\\\\\\\\\\/ __\/\\\\///\\\/\\\/_\/\\\___________ /\\\/___ _\/\\\///////// ____\/\\\__ \///\\\/ ___\/\\\________ /\\\// _____ _\/\\\ _____________\/\\\____ \/// _____\/\\\_____ /\\\// ________ _\/\\\ _____________\/\\\_____________ \/\\\ ___/\\\/___________ _\/\\\ _____________\/\\\_____________ \/\\\__/\\\\\\\\\\\\\\\_ _\/// ______________\///______________ \/// __\///////////////__ Runtime Edition PM2 is a Production Process Manager for Node.js applications with a built-in Load Balancer. Start and Daemonize any application: $ pm2 start app.js Load Balance 4 instances of api.js: $ pm2 start api.js -i 4 Monitor in production: $ pm2 monitor Make pm2 auto-boot at server restart: $ pm2 startup To go further checkout: http://pm2.io/ ------------- usage: pm2 [options] pm2 -h, --help all available commands and options pm2 examples display pm2 usage examples pm2 -h help on a specific command Access pm2 files in ~/.pm2 Enter fullscreen mode Exit fullscreen mode Puis lancement de Workerd en mode Cluster : PM2 - Cluster Mode root@workerd:~/gatsby-starter-netlify-cms# chmod +x start.sh root@workerd:~/gatsby-starter-netlify-cms# cat start.sh #!/bin/sh /usr/bin/workerd serve config.capnp root@workerd:~/gatsby-starter-netlify-cms# pm2 start start.sh -i max [PM2] Spawning PM2 daemon with pm2_home=/root/.pm2 [PM2] PM2 Successfully daemonized [PM2] Starting /root/gatsby-starter-netlify-cms/start.sh in fork_mode (0 instance) [PM2] Done. โโโโโโโฌโโโโโโโโโโโฌโโโโโโโโโโโโโโฌโโโโโโโโโโฌโโโโโโโโโโฌโโโโโโโโโโโฌโโโโโโโโโฌโโโโโโโฌโโโโโโโโโโโโฌโโโโโโโโโโโฌโโโโโโโโโโโฌโโโโโโโโโโโฌโโโโโโโโโโโ โ id โ name โ namespace โ version โ mode โ pid โ uptime โ โบ โ status โ cpu โ mem โ user โ watching โ โโโโโโโผโโโโโโโโโโโผโโโโโโโโโโโโโโผโโโโโโโโโโผโโโโโโโโโโผโโโโโโโโโโโผโโโโโโโโโผโโโโโโโผโโโโโโโโโโโโผโโโโโโโโโโโผโโโโโโโโโโโผโโโโโโโโโโโผโโโโโโโโโโโค โ 0 โ start โ default โ 1.1.3 โ fork โ 40261 โ 0s โ 0 โ online โ 0% โ 3.4mb โ root โ disabled โ โ 1 โ start โ default โ 1.1.3 โ fork โ 40263 โ 0s โ 0 โ online โ 0% โ 3.4mb โ root โ disabled โ โโโโโโโดโโโโโโโโโโโดโโโโโโโโโโโโโโดโโโโโโโโโโดโโโโโโโโโโดโโโโโโโโโโโดโโโโโโโโโดโโโโโโโดโโโโโโโโโโโโดโโโโโโโโโโโดโโโโโโโโโโโดโโโโโโโโโโโดโโโโโโโโโโโ Enter fullscreen mode Exit fullscreen mode PM2 peut gรฉnรฉrer des scripts de dรฉmarrage et les configurer afin de conserver votre liste de processus intacte lors des redรฉmarrages prรฉvus ou imprรฉvus de la machine : [PM2] Init System found: systemd Platform systemd Template [Unit] Description=PM2 process manager Documentation=https://pm2.keymetrics.io/ After=network.target [Service] Type=forking User=root LimitNOFILE=infinity LimitNPROC=infinity LimitCORE=infinity Environment=PATH=/root/.nvm/versions/node/v18.12.1/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin:/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin Environment=PM2_HOME=/root/.pm2 PIDFile=/root/.pm2/pm2.pid Restart=on-failure ExecStart=/root/.nvm/versions/node/v18.12.1/lib/node_modules/pm2/bin/pm2 resurrect ExecReload=/root/.nvm/versions/node/v18.12.1/lib/node_modules/pm2/bin/pm2 reload all ExecStop=/root/.nvm/versions/node/v18.12.1/lib/node_modules/pm2/bin/pm2 kill [Install] WantedBy=multi-user.target Target path /etc/systemd/system/pm2-root.service Command list ['systemctl enable pm2-root'] [PM2] Writing init configuration in /etc/systemd/system/pm2-root.service [PM2] Making script booting at startup... [PM2] [-] Executing: systemctl enable pm2-root... Created symlink /etc/systemd/system/multi-user.target.wants/pm2-root.service โ /etc/systemd/system/pm2-root.service. [PM2] [v] Command successfully executed. +---------------------------------------+ [PM2] Freeze a process list on reboot via: $ pm2 save [PM2] Remove init script via: $ pm2 unstartup systemd root@workerd:~/gatsby-starter-netlify-cms# pm2 save [PM2] Saving current process list... [PM2] Successfully saved in /root/.pm2/dump.pm2 root@workerd:~/gatsby-starter-netlify-cms# pm2 kill [PM2] Applying action deleteProcessId on app [all](ids: [0, 1]) [PM2] [all](1) โ [PM2] [start](0) โ [PM2] [v] All Applications Stopped [PM2] [v] PM2 Daemon Stopped root@workerd:~/gatsby-starter-netlify-cms# pm2 resurrect [PM2] Spawning PM2 daemon with pm2_home=/root/.pm2 [PM2] PM2 Successfully daemonized [PM2] Resurrecting [PM2] Restoring processes located in /root/.pm2/dump.pm2 [PM2] Process /root/gatsby-starter-netlify-cms/start.sh restored [PM2] Process /root/gatsby-starter-netlify-cms/start.sh restored โโโโโโโฌโโโโโโโโโโโฌโโโโโโโโโโโโโโฌโโโโโโโโโโฌโโโโโโโโโโฌโโโโโโโโโโโฌโโโโโโโโโฌโโโโโโโฌโโโโโโโโโโโโฌโโโโโโโโโโโฌโโโโโโโโโโโฌโโโโโโโโโโโฌโโโโโโโโโโโ โ id โ name โ namespace โ version โ mode โ pid โ uptime โ โบ โ status โ cpu โ mem โ user โ watching โ โโโโโโโผโโโโโโโโโโโผโโโโโโโโโโโโโโผโโโโโโโโโโผโโโโโโโโโโผโโโโโโโโโโโผโโโโโโโโโผโโโโโโโผโโโโโโโโโโโโผโโโโโโโโโโโผโโโโโโโโโโโผโโโโโโโโโโโผโโโโโโโโโโโค โ 0 โ start โ default โ 1.1.3 โ fork โ 41347 โ 0s โ 0 โ online โ 0% โ 3.5mb โ root โ disabled โ โ 1 โ start โ default โ 1.1.3 โ fork โ 41349 โ 0s โ 0 โ online โ 0% โ 3.4mb โ root โ disabled โ โโโโโโโดโโโโโโโโโโโดโโโโโโโโโโโโโโดโโโโโโโโโโดโโโโโโโโโโดโโโโโโโโโโโดโโโโโโโโโดโโโโโโโดโโโโโโโโโโโโดโโโโโโโโโโโดโโโโโโโโโโโดโโโโโโโโโโโดโโโโโโโโโโโ Enter fullscreen mode Exit fullscreen mode Dโailleurs ร ce propos, Cloudflare a apportรฉ au dรฉbut de cette annรฉe une expรฉrience de dรฉveloppement local avec les workers via Miniflare 2.0 : un simulateur local de Cloudflare Workers : ๐ฅ Miniflare ยท Miniflare GitHub - cloudflare/miniflare: ๐ฅ Fully-local simulator for Cloudflare Workers Et on apprend que : Avec le runtime Workers dรฉsormais en open-source, Miniflare 3 peut exploiter les mรชmes implรฉmentations qui sont dรฉployรฉes sur le rรฉseau de Cloudflare https://blog.cloudflare.com/miniflare-and-workerd/ Au cours des prochains mois, lโรฉquipe de Cloudflare Workers prรฉvoit dโamรฉliorer encore lโexpรฉrience de dรฉveloppement local en mettant lโaccent sur les tests automatisรฉs en รฉtudiant les moyens dโintรฉgrer les environnements Jest/Vitest de Miniflare 2 ร Workerd. Miniflare 3.0 est maintenant inclus dans Wrangler ! Je peux me baser sur les exemples fournis par Cloudflare avec la possibilitรฉ de servir des applications full stack cรดtรฉ serveur avec des fonctions dรฉdiรฉes ร Cloudflare Pages โฆ via encore une fois la derniรจre version de Wrangler. https://blog.cloudflare.com/pages-full-stack-frameworks/ Exemple avec Astro : Deploy your Astro Site to Cloudflare Pages root@workerd:~# npm create astro@latest Need to install the following packages: [email protected] Ok to proceed? (y) y โญโโโโโโฎ Houston: โ โ โก โ Let's build something great! โฐโโโโโโฏ astro v1.6.12 Launch sequence initiated. ? Where would you like to create your new project? โบ tremendous-transit โ Where would you like to create your new project? โฆ tremendous-transit โ How would you like to setup your new project? โบ a few best practices (recommended) โ โ โถ Copying project files...(node:39599) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time (Use `node --trace-warnings ...` to show where the warning was created) โ Template copied! โ Would you like to install npm dependencies? (recommended) โฆ yes โ Packages installed! โ Would you like to initialize a new git repository? (optional) โฆ no โผ Sounds good! You can come back and run git init later. โ How would you like to setup TypeScript? โบ Strict โ TypeScript settings applied! next Liftoff confirmed. Explore your project! Enter your project directory using cd ./tremendous-transit Run npm run dev to start the dev server. CTRL+C to stop. Add frameworks like react or tailwind using astro add. Stuck? Join us at https://astro.build/chat โญโโโโโโฎ Houston: โ โ โก โ Good luck out there, astronaut! โฐโโโโโโฏ root@workerd:~# cd tremendous-transit/ root@workerd:~/tremendous-transit# npx astro add cloudflare โ Resolving packages...(node:39679) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time (Use `node --trace-warnings ...` to show where the warning was created) โ Resolving packages... Astro will run the following command: If you skip this step, you can always run it yourself later โญโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฎ โ npm install @astrojs/cloudflare astro@^1.6.11 โ โฐโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฏ โ Continue? โฆ yes โ Installing dependencies... Astro will make the following changes to your config file: โญ astro.config.mjs โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฎ โ import { defineConfig } from 'astro/config'; โ โ โ โ // https://astro.build/config โ โ import cloudflare from "@astrojs/cloudflare"; โ โ โ โ // https://astro.build/config โ โ export default defineConfig({ โ โ output: "server", โ โ adapter: cloudflare() โ โ }); โ โฐโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฏ For complete deployment options, visit https://docs.astro.build/en/guides/deploy/ โ Continue? โฆ yes success Added the following integration to your project: - @astrojs/cloudflare Enter fullscreen mode Exit fullscreen mode Gรฉnรฉration du contenu statique : root@workerd:~/tremendous-transit# npm run build > @example/[email protected] build > astro build 10:37:27 PM [build] output target: server 10:37:27 PM [build] deploy adapter: @astrojs/cloudflare 10:37:27 PM [build] Collecting build info... 10:37:27 PM [build] Completed in 12ms. 10:37:27 PM [build] Building server entrypoints... 10:37:29 PM [build] Completed in 1.55s. finalizing server assets 10:37:29 PM [build] Rearranging server assets... 10:37:29 PM [build] Server built in 1.66s 10:37:29 PM [build] Complete! Enter fullscreen mode Exit fullscreen mode et lancement de la fonction dโexposition avec Wrangler@latest : root@workerd:~/tremendous-transit# npx wrangler@latest pages dev ./dist/ --ip "0.0.0.0" --port "80" --compatibility-date "2022-12-04" --local ๐ง 'wrangler pages ' is a beta command. Please report any issues to https://github.com/cloudflare/wrangler2/issues/new/choose โญโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฎ โ [b] open a browser, [d] open Devtools, [c] clear console, [x] to exit โ โฐโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฏ [pages:wrn] Service bindings are experimental. There may be breaking changes in the future. GET / 200 OK (32.55ms) GET /assets/index.0e7318e4.css 200 OK (9.77ms) GET /favicon.svg 200 OK (6.38ms) GET / 200 OK (15.53ms) GET /favicon.svg 200 OK (6.59ms) Enter fullscreen mode Exit fullscreen mode La mรชme chose avec le framework SolidStart : GitHub - solidjs/solid-start: SolidStart, the Solid app framework root@workerd:~# mkdir my-app root@workerd:~# cd my-app/ root@workerd:~/my-app# npm init solid Need to install the following packages: [email protected] Ok to proceed? (y) y create-solid version 0.1.2 Welcome to the SolidStart setup wizard! There are definitely bugs and some feature might not work yet. If you encounter an issue, have a look at https://github.com/solidjs/solid-start/issues and open a new one, if it is not already tracked. โ Which template do you want to use? โบ hackernews โ Server Side Rendering? โฆ yes โ Use TypeScript? โฆ yes found matching commit hash: 88a111f8fcf7fe810bf84814766ac4b40cdcac34 downloading https://github.com/solidjs/solid-start/archive/88a111f8fcf7fe810bf84814766ac4b40cdcac34.tar.gz to /root/.degit/github/solidjs/solid-start/88a111f8fcf7fe810bf84814766ac4b40cdcac34.tar.gz extracting /examples/hackernews from /root/.degit/github/solidjs/solid-start/88a111f8fcf7fe810bf84814766ac4b40cdcac34.tar.gz to /root/my-app/.solid-start cloned solidjs/solid-start#main to /root/my-app/.solid-start โ Copied project files Next steps: 1: npm install (or pnpm install, or yarn) 2: npm run dev -- --open To close the dev server, hit Ctrl-C root@workerd:~/my-app# npm install --save-dev solid-start-cloudflare-pages npm WARN deprecated [email protected]: Please use @jridgewell/sourcemap-codec instead added 414 packages, and audited 415 packages in 33s 36 packages are looking for funding run `npm fund` for details found 0 vulnerabilities root@workerd:~/my-app# npm install up to date, audited 415 packages in 1s 36 packages are looking for funding run `npm fund` for details found 0 vulnerabilities Enter fullscreen mode Exit fullscreen mode Mise ร jour du fichier de configuration pour prendre en compte encore une fois le plugin Cloudflare installรฉ prรฉalablement : root@workerd:~/my-app# cat vite.config.ts import solid from "solid-start/vite"; import { defineConfig } from "vite"; import cloudflare from "solid-start-cloudflare-pages"; export default defineConfig({ plugins: [solid({ adapter: cloudflare({}) })], }); Enter fullscreen mode Exit fullscreen mode Gรฉnรฉration du contenu statique : root@workerd:~/my-app# npm run build > build > solid-start build solid-start build version 0.2.7 (node:40114) ExperimentalWarning: The Ed25519 Web Crypto API algorithm is an experimental feature. This feature could change at any time (Use `node --trace-warnings ...` to show where the warning was created) adapter cloudflare-pages solid-start building client... vite v3.2.4 building for production... โ 59 modules transformed. dist/public/manifest.json 1.03 KiB dist/public/ssr-manifest.json 1.57 KiB dist/public/assets/_...stories_.85c7ccd5.js 2.92 KiB / gzip: 1.10 KiB dist/public/assets/entry-client.e7f092e1.js 38.02 KiB / gzip: 14.73 KiB dist/public/assets/_id_.53422822.js 2.17 KiB / gzip: 0.87 KiB dist/public/assets/_id_.d20e093b.js 1.55 KiB / gzip: 0.71 KiB dist/public/assets/entry-client.fba9e0c8.css 3.48 KiB / gzip: 1.15 KiB solid-start client built in: 2.270s solid-start building server... vite v3.2.4 building SSR bundle for production... โ 60 modules transformed. .solid/server/manifest.json 0.18 KiB .solid/server/entry-server.js 63.39 KiB solid-start server built in: 1.096s Enter fullscreen mode Exit fullscreen mode et exposition publique avec ce clone du site Hacker News โฆ root@workerd:~/my-app# npx wrangler@latest pages dev ./dist/public/ --ip "0.0.0.0" --port "80" --compatibility-date "2022-12-04" --local ๐ง 'wrangler pages ' is a beta command. Please report any issues to https://github.com/cloudflare/wrangler2/issues/new/choose Compiling worker to "/tmp/functionsWorker-0.3042531527544843.mjs"... Compiled Worker successfully. โญโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฎ โ [b] open a browser, [d] open Devtools, [c] clear console, [x] to exit โ โฐโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฏ [pages:wrn] Parsed 1 valid header rule. [pages:wrn] Service bindings are experimental. There may be breaking changes in the future. GET / 200 OK (380.60ms) GET /assets/_...stories_.85c7ccd5.js 200 OK (10.72ms) GET /assets/entry-client.e7f092e1.js 200 OK (7.27ms) GET /assets/entry-client.fba9e0c8.css 200 OK (5.62ms) GET /favicon.ico 200 OK (5.79ms) Enter fullscreen mode Exit fullscreen mode Pour conclure, Workerd mรชme en version Beta ร la rรฉdaction de cet article, comme on a pu le voir dans ce rapide aperรงu permet dโinclure ces cas dโusage avec notamment ceci : En tant que serveur dโapplications, hรฉberger vous-mรชme des applications conรงues pour Cloudflare Workers. En tant quโoutil de dรฉveloppement, dรฉvelopper et tester ce code localement. En tant que proxy HTTP programmable (direct ou inverse), intercepter, modifier et acheminer efficacement les requรชtes rรฉseau. En prenant bien รฉvidemment en compte cet avertissement dans son usage : Workerd nโest pas un sandbox durci Workerd tente dโisoler chaque Workers afin quโil ne puisse accรฉder quโaux ressources auxquelles il est configurรฉ. Cependant, Workerd ne contient pas ร lui seul une dรฉfense en profondeur appropriรฉe contre la possibilitรฉ de bogues dโimplรฉmentation. Lorsque vous utilisez workerd pour exรฉcuter du code potentiellement malveillant, vous devez lโexรฉcuter dans un bac ร sable sรฉcurisรฉ appropriรฉ, tel quโune machine virtuelle. Le service dโhรฉbergement Cloudflare Workers, en particulier, utilise de nombreuses couches supplรฉmentaires de dรฉfense en profondeur โฆ ร suivre !
-
Publishing .ts/tsx sources to npm (no transpiling or bundling!). Bad idea?
This issue is one reason it's a bad idea: https://github.com/solidjs/solid-start/issues/255
-
Thoughts on Solid Start's router?
The rise of meta-frameworks like SvelteKit/Remix/Astro/SolidStart/Qwikcity, as well as the major overhauls in patterns of big players such as Next/Nuxt. There seem to be some sort of convergence of ideas on some practices, while every framework throws some unique ideas around with the hopes they will stand the test of time.
-
a first look at solidstart
Vite is included for the build tool along with extra Solid packages for common functionality and a CLI for generating templated projects. These packages enable features such as routing, MetaTags, different rendering modes, TypeScript support, and deployment adapters. In addition to Node and static hosting, adapters currently exist for the following platforms:
vite
-
Type-Safe Env Vars in Remix - A modern approach with ArkType
The original post had a little bit of server code in the client bundle. Now that Remix uses Vite, it was easy to spot that.
-
Using Vite for React Applications
Vite
-
Create A YouTube Homepage Clone in Tailwind CSS and ReactJS
Initialize the Project Use Vite to create a new React app with this command:
- Migrando do CRA para Vite
-
Why and How to Migrate Your React App from CRA to Vite
In Vite, legacy browsers can be supported via the official @vitejs/plugin-legacy plugin, it also provides Browselist like configuration.
-
Switching to Vite from React-Scripts
I have a silly react project that Iโm working on that I made using create-react-app. By default, these kinds of projects build and run using react-scripts which uses webpack under the hood for building projects. Vite is generally known to be faster than Webpack โก so I was curious about how to swap them.
-
Converting couple thousands Js/Ts files that contains JSX content to jsx extension
Without a transpiler in the process, the jsx left as is: https://github.com/vitejs/vite/discussions/3448
-
Series - Converting Large Codebase Project to Vite
We wanted to change the bundler to vite for two main reasons:
-
How to Start & Setup a React project in 2024 (7 Different Ways Based on Use Cases)
You can see all create-vite templates for other libraries. You can also learn more about vite in its documentation website.
-
Svelte Series-2: How to install Svelte
After we have installed the Node environment, we can use Vite to install. Because the use of Vite has a higher version of Node.js requirements, so I recommend that you install a relatively new Node.js. currently I use the version for v18.15.0.
What are some alternatives?
astro - The web framework for content-driven websites. โญ๏ธ Star to support our work!
Next.js - The React Framework
awesome-solid-js - Curated resources on building sites with SolidJS, a brand new way(now 1.0) to build Javascript based interactive web applications. A very close looking cousin to React/JSX by syntax, and to Svelte by few important principles(compiler and fine-grained reactivity), it's a highly optimised way to deliver web applications with best-in-class performance.
parcel - The zero configuration build tool for the web. ๐ฆ๐
purescript-halogen - A declarative, type-safe UI library for PureScript.
esbuild - An extremely fast bundler for the web
valtio - ๐ Valtio makes proxy-state simple for React and Vanilla
swc - Rust-based platform for the Web
solidjs - A tiny (200 bytes) connector for Storeon and Solid.js
solid-router - A declarative router for solid-js
Rollup - Next-generation ES module bundler