Vite

目次 前提 事象 使用ファイル 疎通確認 対処 なぜ 参考URL おわりに 1. 前提 ↑ node コンテナ内で npm init vue@latest を実行 → hello-vue3 という名前で Vue3 プロジェクトを作成し、npm install & npm run dev 2. 事象 ↑ ブラウザで確認すると、「localhost からデータが送信されませんでした。ERR_EMPTY_RESPONSE」画面になる 3. 使用ファイル ↑ Dockerfile FROM node:18.12.1-bullseye WORKDIR /app RUN apt-get update do…

Vite Vanilla JS で静的サイトを作るテンプレートを作成していて index.html を移動させると色々大変だったのでメモを残しておく 作ったもの デフォルトの Vite プロジェクト $ npm create vite@latest ✔ Project name: … <Project Name> ✔ Select a framework: › Vanilla ✔ Select a variant: › TypeScript 👇 構成 /root |- /public |- /src | |- main.ts |- index.html |- tsconfig.json ゴール…

Vite + TypeScript + ESLint で作った環境で Multi-Page App の設定をしようとした際に __direname がエラーになってしまったのでメモ TypeScript Cannot find name '__dirname' Cannot find name '__dirname' のエラーが出る場合は Node の型が無いので @types/node をインストールする $ npm i -D @types/node tsconfig.json に "types": ["node"] の設定を追加する { "compilerOptions": { + "ty…

PostCSS はデフォルトでは Sass のようなネストでスタイルを書くことができません。 Global 用のスタイルを書くときなどにネストできないとちょっと不便なので PostCSS を使ってネストして CSS を書けるようにしたメモ Vite (react) のプロジェクトに PostCSS-nesting を導入する $ npm i -D postcss-nesting PostCSS-nested v.s. PostCSS-nesting postcss-nesting postcss-nested PostCSS Nesting lets you nest style rules …

vite React プロジェクトで .env に書いた環境変数を使うメモ 環境変数は VITE_ prefix を使う VITE_ から始まる変数名でないと vite アプリからアクセスできない 環境変数が誤ってクライアントに漏れてしまうことを防ぐために、VITE_ から始まる変数のみが Vite で処理されたコードに公開されます。 cf. 環境変数とモード | Vite .env DB_PASSWORD=foobar VITE_SOME_KEY=123 アプリからは import.meta.env.変数名 でアクセスする const key = import.meta.env.VITE_S…

概要 JavaScript や TypeScript などモダンなプログラミング言語を使って、Web アプリを開発するぞ！というときにまず考えることは、Vue を使うか React を使うかということだと思います。 ja.reactjs.org jp.vuejs.org 私はもっぱら React 派で、プロト開発でも Web ページでもなんでもまずは React または Next.js で開発を開始します。 しかし、Vue を使う方も多くいて、むしろ自分の周りのソフトウェア開発者はほとんど Vue で開発を行っている人が多いです。 ふと自分も Vue について学んでみようと思い、いくつか OS…

https://chaika.hatenablog.com/entry/2022/07/19/083000 React.lazy と import() を使えばコンポーネントを Dynamic import することができます。 例えば何種類下のアイコンの中で必要なコンポーネントだけ読み込みたいような場合、コンポーネントへのパスを変数にできるとコードがシンプルになりそうだったので試してみました。 環境 react@18.1.0 vite@2.9.9 typescript@4.6.4 パスを変数にして import() する const componentName = 'MyComponent'…

Nuxt v3.0.0のテスト用プロジェクトで、GitHub Actionsでデプロイさせるためにnuxt generateコマンドを実行したところメモリ不足のエラーが出た。 ローカル環境では問題なく成功するし、GitHub Actionsでも成功するときもあるのでメモリリーク的な印象。 メモリを食うようなコード量もライブラリもなく、CIでもメモリ2GBはありそうなので、スペック的には問題ないはず。 <--- Last few GCs ---> [1844:0x624fd70] 77610 ms: Scavenge 2024.9 (2068.5) -> 2024.2 (2078.5) MB, …

Ⅰ. はじめに タイトルの通り「ASP.NET Core + Vite + React.js (TypeScript)でHelloWorldする方法」です。 Ⅱ. 手順 1. プロジェクトを新規作成する 説明の都合上、プロジェクト名をMyPerfectProjectと仮定する 2. ClientAppディレクトリを削除する デフォルトの状態ではViteとTypeScriptに対応していないので削除する 3. ClientAppを新規作成する npm create vite@latest ClientApp -- --template react-ts 4. SpaProxyServerUrlの…

2023/01/24追記 本記事内容は非推奨です何か特別な理由がない限りViteを利用した方法を推奨します https://kagasu.hatenablog.com/entry/2023/01/24/121703 Ⅰ. はじめに タイトルの通り「ASP.NET Core + React.js (TypeScript)でHelloWorldする方法」です。 Ⅱ. 手順 1. プロジェクトを新規作成する 説明の都合上、プロジェクト名をMyPerfectProjectと仮定する 2. ClientAppディレクトリを削除する デフォルトの状態ではTypeScriptに対応していないので削除する 3…

Vite.jsで本番環境のbuildエラーを解決したときのメモです。 エラーログ $ npm run build > frontend@0.0.0 build > tsc && vite build vite v3.2.5 building for production... transforming (155) ../node_modules/axios/lib/platform/browser/index.js ✓ 235 modules transformed. 'fileURLToPath' is not exported by __vite-browser-external, imp…

オンライン 1 回目の 2021 に参加した BuriKaigi がオフライン開催されると聞いて、ボランティアスタッフとしてオフライン初参加してきました。 （去年は別イベントと被って参加できませんでした） toyama-eng.connpass.com 2017 年の初冬まではたびたび富山に通っていたので、約 5 年ぶりの富山です。 前日 定時まで仕事をした後、諸事情により一旦自宅に戻ってから富山のホテルへ。 19:00 頃出発してからずっと雨だったのが郡上八幡インター手前からみぞれ、ぎふ大和インターの先から雪に変わり、白鳥インターから先は五箇山インターを過ぎたあたりまで、トンネル以外ずっと積…

こんにちは、椋 紅緒（むくべにお）です。 数年前に妻にプレゼントしてもらった「ブギーボード」が次男（自閉症11歳）に遊ばせるのにちょうどよいオモチャになっています。 ブギーボードとは 繰り返し何度も書いて消せる電子メモパッドです。うちのはボタンが一つだけ付いていて、押すと書いたものがクリアされるシンプルなものです。 キングジム ブギーボード 電子メモパッド BB-1GXクロ クロ キングジム(Kingjim) Amazon 保存や部分消しができないので、正直なところ仕事で使うには不便でした。紙やホワイトボードの方が断然便利で、しばらく引き出しの中で眠っていましたが、試しに次男（自閉症11歳）に…

今回は、人を何かに招待したいときに使える英語表現をたくさんご紹介します！ 誕生日会や懇親会、結婚式などには、友達や同僚などを誘うこともありますよね。もし、それが英語を母語としている人たちなら英語で招待しなければなりません。 そんなシチュエーションを思い描きながら、以下のフレーズを覚えていってくださいね。 「招待」は英語で？ 誰かを招待する時のフレーズ How about ～？ Why don’t you ～？ would like to invite you to ～ would be pleased if you could come request the pleasure of your…

はてなブログ独自の集計による人気記事のランキング。1月8日（日）から1月14日（土）〔2023年1月第2週〕のトップ30です*1。 # タイトル／著者とブックマーク 1 自分事を他人事として捉える思考法 - 本しゃぶり by id:honeshabri 2 ChatGPTのヤバさは、論理処理が必要と思ったことが確率処理でできるとわかったこと - きしだのHatena by id:nowokay 3 象印の加湿器が最高で当面これしか使いたくないという話 - たごもりすメモ by id:tagomoris 4 年の初めに、恒例のつみたてNISAの一括投資をしておいた。来年は新NISAで360万円年…

mihatori/codeignitervite github.com 先日、CodeIgniter 4.3.0がリリースされたのですが、Viteに対応しているのか、気になったので、調べてみました。 mihatori/codeigniterviteを見つけたのですが、私には、使いこなせませんでした。 .env内のVITE_AUTO_INJECTINGは、trueとfalseの両方で、試してみました。 ルートにあるvite.config.jsだと動きますが、modulesフォルダ内で使うことは、想定されていないような気がしました。 私が理解していないだけで、たぶん、やり方次第では、modules…

booth.pm 最近仕事でReactでの機能開発をやることがあって格闘していたところに社の同僚氏が貸してくれた。ありがたい。 サーバーサイドマンがReactを使えるようになるために、という語り口なので今のいいねにとってめちゃくちゃタイムリーな内容だった。 ずっとサーバーサイドのMVCフレームワークと戯れていたから視点とか思想が全然違うことに驚いた。 Vue.jsを使うにせよSvelteを使うにせよReactを使うにせよ、それらが生まれたフロントエンドの文脈から紹介してくれるのでその辺が疎い人は一気に歴史を辿れてお得。 またReactを使う上で必要なコンポーネント志向のメンタルモデルが仕入れら…

前回の続き。Vite/CRXJS/Vueで作るときの備忘録(*´ω｀*) www.memory-lovers.blog 使ったサンプルはこちらで公開中(*´ω｀*) github.com 環境構築 プロジェクトの作成 # viteでプロジェクトを作成 $ pnpm create vite chrome-extension-sample --template vue-ts $ cd chrome-extension-sample # .npmrcを設定 $ echo "auto-install-peers=true" > .npmrc # @crxjs/vite-pluginの追加。vite3は…

前回の続き。作った拡張機能を公開するときの備忘録(*´ω｀*) www.memory-lovers.blog 公開するには開発者登録が必要 Chrome Web Store - Chrome Developers ストアに公開するには、開発者登録と登録料($5)の支払いが必要。 公開するために必要な資材 公開するときに必須の資材は以下の通り。 画像: ショップアイコン ... 128x128 画像: スクリーンショット ... 1280x800 or 640x400 (1枚~5枚) パッケージの作成方法 パッケージングは、zipすればOK アップロード後、署名してcrx形式にしてくれる ダウン…