GitHubリポジトリ作成_開発環境構築 - Paku-Soba/Svelte-example-app GitHub Wiki

GitHubリポジトリ作成する方法を調べる。
- 作成したリポジトリにてSvelte Kitプロジェクトの環境構築を行う。
- Svelte Kitプロジェクト配下にてTailwindCSS、daisyUIインストール及び設定を行い、開発環境を構築する。
  - フロントエンド側の開発環境を構築するのが目的である。

UIフレームワーク

GitHubリポジトリ作成でのSvelte Kitプロジェクト環境構築

GitHubリポジトリ作成方法

◾️Web UI からの新しいリポジトリの作成

① GitHubページの右上隅で [+] を選択し、[New repository] をクリックする。新しいリポジトリ作成①

② [New repository] をクリックすると新しくリポジトリを作成するページが表示される。新しいリポジトリ作成②

③ 各入力項目については、GitHub公式ドキュメントを参考にしてリポジトリを作成する。

Creating A NewRepository

GitHubリポジトリ作成からPushまでGitコマンドライン

ローカル上での作業は、新しく作成したGitHubリポジトリをGitHub Desktopツールからクローンして対応。
- IntelliJのターミナルからGitコマンドラインを実行。
- ローカルポジトリを作成し、Commit&Push Gitでの管理下へ。

CSAMC-FVFDM030P3YW:Svelte-SampleApp mac-mr9v2j001$ echo "# Svelte-SampleApp" >> README.md

CSAMC-FVFDM030P3YW:Svelte-SampleApp mac-mr9v2j001$ git init

/Users/mac-mr9v2j001/Documents/GitHub/Svelte-SampleApp/.git/ 안의 기존 깃 저장소를 다시 초기화했습니다

CSAMC-FVFDM030P3YW:Svelte-SampleApp mac-mr9v2j001$ git add README.md

CSAMC-FVFDM030P3YW:Svelte-SampleApp mac-mr9v2j001$ git commit -m "first commit"

[main (최상위-커밋) e3d2410] first commit
 1 file changed, 1 insertion(+)
 create mode 100644 README.md　

CSAMC-FVFDM030P3YW:Svelte-SampleApp mac-mr9v2j001$ git branch -M main

CSAMC-FVFDM030P3YW:Svelte-SampleApp mac-mr9v2j001$ git remote add origin https://github.com/Paku-Soba/Svelte-SampleApp.git

error: origin 리모트가 이미 있습니다.

CSAMC-FVFDM030P3YW:Svelte-SampleApp mac-mr9v2j001$ git push -u origin main

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/Paku-Soba/Svelte-SampleApp.git/'

CSAMC-FVFDM030P3YW:Svelte-SampleApp mac-mr9v2j001$ git log

commit 9cf74644213663ad8bfbbd130b67282f9fe77f5a (origin/main, origin/HEAD, main)
Author: Paku-Soba <[email protected]>
Date:   Wed Dec 20 16:39:43 2023 +0900

    [add] Create GitHub Remote repository

commit e3d241007f5fb879f298eff09400ce29d52fa64e
Author: Paku-Soba <[email protected]>
Date:   Wed Dec 20 16:32:11 2023 +0900

    first commit

リモートリポジトリから新しいブランチを作成し、SvelteKitプロジェクトの環境構築を実施。

CSAMC-FVFDM030P3YW:Svelte-SampleApp mac-mr9v2j001$ npm create svelte@latest
Need to install the following packages:
  [email protected]
Ok to proceed? (y) y

create-svelte version 6.0.4

┌  Welcome to SvelteKit!
│
◇  Where should we create your project?
│    (hit Enter to use current directory)
│
◇  Directory not empty. Continue?
│  Yes
│
◇  Which Svelte app template?
│  SvelteKit demo app
│
◇  Add type checking with TypeScript?
│  Yes, using JavaScript with JSDoc comments
│
◇  Select additional options (use arrow keys/space bar)
│  Add ESLint for code linting, Add Prettier for code formatting, Add Playwright for browser testing, Add Vitest for unit testing
│
└  Your project is ready!

✔ Type-checked JavaScript
  https://www.typescriptlang.org/tsconfig#checkJs

✔ ESLint
  https://github.com/sveltejs/eslint-plugin-svelte

✔ Prettier
  https://prettier.io/docs/en/options.html
  https://github.com/sveltejs/prettier-plugin-svelte#options

✔ Playwright
  https://playwright.dev

✔ Vitest
  https://vitest.dev

Install community-maintained integrations:
  https://github.com/svelte-add/svelte-add

Next steps:
  1: npm install
  2: git init && git add -A && git commit -m "Initial commit" (optional)
  3: npm run dev -- --open

To close the dev server, hit Ctrl-C

Stuck? Visit us at https://svelte.dev/chat

◾️ プロジェクト作成時に質問される設定項目

Which Svelte app template? >> SvelteKit demo app
Add type checking with TypeScript? >> Yes, using JavaScript with JSDoc comments
Add ESLint for code linting? >> Yes.
Add Prettier for code formatting? >> Yes.
Add Playwright for browser testing? >> Yes.
Add Vitest for unit testing? >> Yes.

Svelte Kitプロジェクトの起動動作確認

GitHubリポジトリから作成したSvelteKitプロジェクトを起動し、動作確認済み。

CSAMC-FVFDM030P3YW:Svelte-SampleApp mac-mr9v2j001$ npm run dev -- --open

> [email protected] dev
> vite dev --open


  VITE v5.0.10  ready in 4273 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help
4:16:00 PM [vite] ✨ new dependencies optimized: @neoconfetti/svelte
4:16:00 PM [vite] ✨ optimized dependencies changed. reloading

SvelteKit.mov

※起動動作確認が正常にできた為、GitHubリポジトリ名を「Svelte-SampleApp」から「whisper-front」へ変更。

環境構築時、発生したエラーの原因調査及び解決方法まとめ

Svelte-SampleApp配下にてnpm installコマンド実行時、ローカル上のnode/npmバージョンと互換性がないとのエラー発生。
- パッケージインストールのためには、node.jsのバージョンが v18 もしくは v20以上であることが必須となる。
- 現在ローカル上のバージョン状況{"npm":"9.5.0","node":"v19.7.0"}node.jsはv19.7.0である。
- node.jsのバージョンをv18.0.0へ変更もしくは最新版バージョンへアップデートする必要がある。

CSAMC-FVFDM030P3YW:Svelte-SampleApp mac-mr9v2j001$ npm install
npm ERR! code EBADENGINE
npm ERR! engine Unsupported engine
npm ERR! engine Not compatible with your version of node/npm: @sveltejs/[email protected]
npm ERR! notsup Not compatible with your version of node/npm: @sveltejs/[email protected]
npm ERR! notsup Required: {"node":"^18.0.0 || >=20"}
npm ERR! notsup Actual:   {"npm":"9.5.0","node":"v19.7.0"}

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/mac-mr9v2j001/.npm/_logs/2023-12-21T03_40_08_591Z-debug-0.log

解決方法まとめ

① npm/node.jsのアンインストールを実施する。

mac-mr9v2j001@CSAMC-FVFDM030P3YW _logs % npm uninstall -g npm

up to date in 60ms

mac-mr9v2j001@CSAMC-FVFDM030P3YW _logs % rm -rf .npm \
> node_modules

mac-mr9v2j001@CSAMC-FVFDM030P3YW _logs % brew uninstall node
==> Downloading https://formulae.brew.sh/api/cask.jws.json
######################################################################## 100.0%
==> Downloading https://formulae.brew.sh/api/formula.jws.json
######################################################################## 100.0%
Error: Refusing to uninstall /usr/local/Cellar/node/19.7.0
because it is required by yarn, which is currently installed.
You can override this and force removal with:
  brew uninstall --ignore-dependencies node

mac-mr9v2j001@CSAMC-FVFDM030P3YW _logs % which node
/usr/local/opt/node/bin/node
mac-mr9v2j001@CSAMC-FVFDM030P3YW _logs % rm -rf /.nodebrew/current/bin/node \
> node_modules

② nodebrewをインストールして環境変数を設定し、node.jsを再インストールする。 ※最新版node.jsを指定してインストール実施。

mac-mr9v2j001@CSAMC-FVFDM030P3YW _logs % curl -L git.io/nodebrew | perl - setup
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
  0     0    0     0    0     0      0      0 --:--:-- --:--:-- --:--:--     0
  0     0    0     0    0     0      0      0 --:--:-- --:--:-- --:--:--     0
  0     0    0     0    0     0      0      0 --:--:--  0:00:01 --:--:--     0
100 26039  100 26039    0     0  12792      0  0:00:02  0:00:02 --:--:-- 4387k
Fetching nodebrew...
Installed nodebrew in $HOME/.nodebrew

========================================
Export a path to nodebrew:

export PATH=$HOME/.nodebrew/current/bin:$PATH
========================================

mac-mr9v2j001@CSAMC-FVFDM030P3YW _logs % nodebrew install-binary latest
Fetching: https://nodejs.org/dist/v21.5.0/node-v21.5.0-darwin-x64.tar.gz
######################################################################################################################################################## 100.0%
Installed successfully

③ インストールしたバージョン確認を行う。今回エラー対応の為、最新版node.jsバージョンに設定する。

mac-mr9v2j001@CSAMC-FVFDM030P3YW _logs % nodebrew ls
v14.15.4
v19.7.0
v21.5.0

current: v19.7.0

mac-mr9v2j001@CSAMC-FVFDM030P3YW _logs % nodebrew use v21.5.0
use v21.5.0

④ Svelte-SampleApp配下にてnpm installコマンド再度実行、エラー解決及びパッケージインストール正常終了確認。

CSAMC-FVFDM030P3YW:Svelte-SampleApp mac-mr9v2j001$ npm install

added 257 packages, and audited 258 packages in 38s

57 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

※UIフレームワークに関する公式ドキュメントサイトは、こちらのWikiを確認。

CSSフレームワーク

Svelte KitプロジェクトでのTailwindCSS、daisyUI環境構築

リモートリポジトリから新しいブランチを作成、SvelteKitプロジェクト配下にてTailwindCSS,daisyUI環境構築実施。
- WebUI画面からGitHubリポジトリ名を「Svelte-SampleApp」から「whisper-front」へ変更した為
- ローカル上のプロジェクト名は「Svelte-SampleApp」リモートリポジトリ名は、「whisper-front」となる。
TailwindCSS及びdaisyUIインストール方法手順に従って設定ファイルにて環境構築に必要な設定を行う。

mac-mr9v2j001@CSAMC-FVFDM030P3YW Svelte-SampleApp % npm install

up to date, audited 258 packages in 3s

57 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
mac-mr9v2j001@CSAMC-FVFDM030P3YW Svelte-SampleApp % npm install -D tailwindcss postcss autoprefixer

added 70 packages, changed 1 package, and audited 328 packages in 7s

81 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
mac-mr9v2j001@CSAMC-FVFDM030P3YW Svelte-SampleApp % npx tailwindcss init -p

Created Tailwind CSS config file: tailwind.config.js
Created PostCSS config file: postcss.config.js
mac-mr9v2j001@CSAMC-FVFDM030P3YW Svelte-SampleApp % git branch
* #InstallTailwind
  CreateSvelteKit
  main
mac-mr9v2j001@CSAMC-FVFDM030P3YW Svelte-SampleApp % npm i -D daisyui@latest

added 4 packages, and audited 332 packages in 3s

82 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

プロジェクト起動、TailwindCSS、daisyUI動作確認

プロジェクトを起動し、TailwindCSS、daisyUI CSSフレームワームの反映及び動作確認済み。

mac-mr9v2j001@CSAMC-FVFDM030P3YW Svelte-SampleApp % npm run dev -- --open

> [email protected] dev
> vite dev --open

Forced re-optimization of dependencies

  VITE v5.0.10  ready in 4826 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

🌼   daisyUI 4.5.0
├─ ✔︎ 2 themes added            https://daisyui.com/docs/themes
╰─ ★ Star daisyUI on GitHub     https://github.com/saadeghi/daisyui


🌼   daisyUI 4.5.0
├─ ✔︎ 2 themes added            https://daisyui.com/docs/themes
╰─ ★ Star daisyUI on GitHub     https://github.com/saadeghi/daisyui


🌼   daisyUI 4.5.0
├─ ✔︎ 2 themes added            https://daisyui.com/docs/themes
╰─ ★ Star daisyUI on GitHub     https://github.com/saadeghi/daisyui

TailwindCSS.daisyUI.mov

環境構築時、発生したエラーの原因調査及び解決方法まとめ

npm installコマンド実行時、再度エラー発生。
- node.js最新版バージョンインストール及び設定済み。
  - Macにnodebrewによるインストール及びバージョン管理方法でnode.jsをインストールしている。
- debug logからエラー内容確認。
  - info using [email protected]エラー内容からnode.jsバージョンの切り替えが反映されてないことを確認。
  - 作業途中でデフォルトシェルを【bash】から【zsh】に変更した為、nodebrewのPATHが通ってなかったのが原因で再度エラー発生。
  - nodebrewでnode.jsを管理している為、シェルに応じた設定ファイルにて、nodebrewのPATHを追記する必要がある。

debug logエラー内容

mac-mr9v2j001@CSAMC-FVFDM030P3YW _logs % cat 2024-01-04T06_16_26_758Z-debug-0.log 

0 verbose cli /usr/local/Cellar/node/19.7.0/bin/node /usr/local/bin/npm
1 info using [email protected]
2 info using [email protected]
3 timing npm:load:whichnode Completed in 1ms
4 timing config:load:defaults Completed in 2ms
5 timing config:load:file:/usr/local/lib/node_modules/npm/npmrc Completed in 2ms
6 timing config:load:builtin Completed in 2ms
7 timing config:load:cli Completed in 3ms
8 timing config:load:env Completed in 1ms
9 timing config:load:file:/Users/mac-mr9v2j001/Documents/GitHub/whisper-front-main 2/.npmrc Completed in 1ms
10 timing config:load:project Completed in 3ms
11 timing config:load:file:/Users/mac-mr9v2j001/.npmrc Completed in 1ms
12 timing config:load:user Completed in 1ms
13 timing config:load:file:/usr/local/Cellar/node/19.7.0/etc/npmrc Completed in 0ms
14 timing config:load:global Completed in 0ms
15 timing config:load:setEnvs Completed in 1ms
16 timing config:load Completed in 13ms
17 timing npm:load:configload Completed in 13ms
18 timing npm:load:mkdirpcache Completed in 0ms
19 timing npm:load:mkdirplogs Completed in 0ms
20 verbose title npm install
21 verbose argv "install"
22 timing npm:load:setTitle Completed in 3ms
23 timing config:load:flatten Completed in 2ms
24 timing npm:load:display Completed in 3ms
25 verbose logfile logs-max:10 dir:/Users/mac-mr9v2j001/.npm/_logs/2024-01-04T06_16_26_758Z-
26 verbose logfile /Users/mac-mr9v2j001/.npm/_logs/2024-01-04T06_16_26_758Z-debug-0.log
27 timing npm:load:logFile Completed in 4ms
28 timing npm:load:timers Completed in 0ms
29 timing npm:load:configScope Completed in 0ms
30 timing npm:load Completed in 24ms
31 timing arborist:ctor Completed in 1ms
32 silly logfile start cleaning logs, removing 1 files
33 silly logfile done cleaning log files
34 timing idealTree:init Completed in 135ms
35 timing idealTree:userRequests Completed in 0ms
36 silly idealTree buildDeps
37 timing idealTree:#root Completed in 0ms
38 timing idealTree:buildDeps Completed in 1ms
39 timing idealTree:fixDepFlags Completed in 0ms
40 timing idealTree Completed in 139ms
41 timing command:install Completed in 153ms
42 verbose stack Error: Unsupported engine
42 verbose stack     at checkEngine (/usr/local/lib/node_modules/npm/node_modules/npm-install-checks/lib/index.js:14:25)
42 verbose stack     at [checkEngineAndPlatform] (/usr/local/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:224:11)
42 verbose stack     at Arborist.buildIdealTree (/usr/local/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:210:42)
42 verbose stack     at async Promise.all (index 1)
42 verbose stack     at async Arborist.reify (/usr/local/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/reify.js:159:5)
42 verbose stack     at async Install.exec (/usr/local/lib/node_modules/npm/lib/commands/install.js:146:5)
42 verbose stack     at async module.exports (/usr/local/lib/node_modules/npm/lib/cli.js:134:5)
43 verbose pkgid @sveltejs/[email protected]
44 verbose cwd /Users/mac-mr9v2j001/Documents/GitHub/whisper-front
45 verbose Darwin 22.5.0
46 verbose node v19.7.0
47 verbose npm  v9.5.0
48 error code EBADENGINE
49 error engine Unsupported engine
50 error engine Not compatible with your version of node/npm: @sveltejs/[email protected]
51 error notsup Not compatible with your version of node/npm: @sveltejs/[email protected]
51 error notsup Required: {"node":"^18.0.0 || >=20"}
51 error notsup Actual:   {"npm":"9.5.0","node":"v19.7.0"}
52 verbose exit 1
53 timing npm Completed in 200ms
54 verbose unfinished npm timer reify 1704348986805
55 verbose unfinished npm timer reify:loadTrees 1704348986815
56 verbose code 1
57 error A complete log of this run can be found in:
57 error     /Users/mac-mr9v2j001/.npm/_logs/2024-01-04T06_16_26_758Z-debug-0.log
mac-mr9v2j001@CSAMC-FVFDM030P3YW _logs % which node
/usr/local/opt/node/bin/node
mac-mr9v2j001@CSAMC-FVFDM030P3YW _logs % node -v
v19.7.0

解決方法まとめ

① echoコマンドを使ってデフォルトシェルを確認する。

mac-mr9v2j001@CSAMC-FVFDM030P3YW ~ % echo $SHELL
/bin/zsh

② カレントディレクトリの情報から使用しているシェルの設定ファイルが存在するか確認する。
※【zsh】の場合、「.zshrc」が設定ファイルとなる。

mac-mr9v2j001@CSAMC-FVFDM030P3YW ~ % ls -a

③ 「.zshrc」設定ファイルを編集する。

mac-mr9v2j001@CSAMC-FVFDM030P3YW ~ % open .zshrc

④ nodebrewのPATHを追記し、PATHを通す。※nodebrewでnode.jsを管理している為

export PATH=$HOME/.nodebrew/current/bin:$PATH

⑤ 設定ファイルに追記した内容を反映する。

mac-mr9v2j001@CSAMC-FVFDM030P3YW ~ % source .zshrc

⑥ node.jsのバージョンを再度設定し、バージョン確認を行う。
npm installコマンド実行し、エラー解決及びパッケージインストール正常終了確認。

mac-mr9v2j001@CSAMC-FVFDM030P3YW ~ % nodebrew ls  
v14.15.4
v19.7.0
v21.5.0

current: v21.5.0
mac-mr9v2j001@CSAMC-FVFDM030P3YW ~ % nodebrew use v21.5.0
use v21.5.0
mac-mr9v2j001@CSAMC-FVFDM030P3YW whisper-front % node -v
v21.5.0

// SvelteKitプロジェクト配下
mac-mr9v2j001@CSAMC-FVFDM030P3YW whisper-front % npm install

added 257 packages, and audited 258 packages in 13s

57 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

※参考記事【Node.js入門】バージョン管理と確認方法のまとめ

※CSSフレームワークに関する公式ドキュメントサイトは、こちらのWikiを確認。

GitHubリポジトリ作成_開発環境構築 - Paku-Soba/Svelte-example-app GitHub Wiki

目次

UIフレームワーク

GitHubリポジトリ作成でのSvelte Kitプロジェクト環境構築

◾️Web UI からの新しいリポジトリの作成

Svelte Kitプロジェクトの起動動作確認

環境構築時、発生したエラーの原因調査及び解決方法まとめ

CSSフレームワーク

Svelte KitプロジェクトでのTailwindCSS、daisyUI環境構築

プロジェクト起動、TailwindCSS、daisyUI動作確認

環境構築時、発生したエラーの原因調査及び解決方法まとめ

⚠️ GitHub.com Fallback ⚠️

GitHubリポジトリ作成_開発環境構築 - Paku-Soba/Svelte-example-app GitHub Wiki

目次

UIフレームワーク

GitHubリポジトリ作成でのSvelte Kitプロジェクト環境構築

◾️Web UI からの新しいリポジトリの作成

Svelte Kitプロジェクトの起動動作確認

環境構築時、発生したエラーの原因調査及び解決方法まとめ

CSSフレームワーク

Svelte KitプロジェクトでのTailwindCSS、daisyUI環境構築

プロジェクト起動、TailwindCSS、daisyUI動作確認

環境構築時、発生したエラーの原因調査及び解決方法まとめ

⚠️ **GitHub.com Fallback** ⚠️

⚠️ GitHub.com Fallback ⚠️