diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..f3d2dcf --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +frontend/yarn.lock diff --git a/docs/ways-to-install-node.md b/docs/ways-to-install-node.md new file mode 100644 index 0000000..89ba0b7 --- /dev/null +++ b/docs/ways-to-install-node.md @@ -0,0 +1,162 @@ +# Ways to install Node + +One of the things you'll need on your local machine is [Node](https://nodejs.org/en) (also known as Node.js, Nodejs) + +It's a very common piece of technology and is very safe to have on your machine. + +If you've been working with TOP, you most likely already have it. + +You'll need to have a specific version (specifically, version 16 or greater). + +To find if you have Node on your machine right now and/or what version of Node is currently active, open the command line (Terminal, Kitty, iTerm, VS Code integrated terminal, etc) and type the following command anywhere: + +```bash +node -v +``` +If any version of Node is installed, the terminal will output something like this: + +```bash +v14.15.0 +``` +This means Node is installed and is currently using version 14.15.0. + +Since this project requires Node version 16 or greater, let's check if there are more than one versions of Node already on the local machine. + +To have more than 1 version of Node, there must be a version manager for Node. + +This requires another tool called Node Version Manager (NVM). + +To determine if Node Version Manager (NVM) is installed locally, run the following command in the command line: + + +```bash +nvm +``` + +If Node Version Manager (NVM) is already installed, the command line will output something similar to this: + +```bash +# don't read or memorize this +# use this to compare the output of your machine +# if your machine has something similar you have NVM already + +Node Version Manager (v0.39.5) + +Note: refers to any version-like string nvm understands. This includes: + - full or partial version numbers, starting with an optional "v" (0.10, v0.1.2, v1) + - default (built-in) aliases: node, stable, unstable, iojs, system + - custom aliases you define with `nvm alias foo` + + Any options that produce colorized output should respect the `--no-colors` option. + +Usage: + nvm --help Show this message + --no-colors Suppress colored output + nvm --version Print out the installed version of nvm + nvm install [] Download and install a . Uses .nvmrc if available and version is omitted. + The following optional arguments, if provided, must appear directly after `nvm install`: + -s Skip binary download, install from source only. + -b Skip source download, install from binary only. + --reinstall-packages-from= When installing, reinstall packages installed in + --lts When installing, only select from LTS (long-term support) versions + --lts= When installing, only select from versions for a specific LTS line + --skip-default-packages When installing, skip the default-packages file if it exists + --latest-npm After installing, attempt to upgrade to the latest working npm on the given node version + --no-progress Disable the progress bar on any downloads + --alias= After installing, set the alias specified to the version specified. (same as: nvm alias ) + --default After installing, set default alias to the version specified. (same as: nvm alias default ) + nvm uninstall Uninstall a version + nvm uninstall --lts Uninstall using automatic LTS (long-term support) alias `lts/*`, if available. + nvm uninstall --lts= Uninstall using automatic alias for provided LTS line, if available. + nvm use [] Modify PATH to use . Uses .nvmrc if available and version is omitted. + The following optional arguments, if provided, must appear directly after `nvm use`: + --silent Silences stdout/stderr output + --lts Uses automatic LTS (long-term support) alias `lts/*`, if available. + --lts= Uses automatic alias for provided LTS line, if available. + nvm exec [] [] Run on . Uses .nvmrc if available and version is omitted. + The following optional arguments, if provided, must appear directly after `nvm exec`: + --silent Silences stdout/stderr output + --lts Uses automatic LTS (long-term support) alias `lts/*`, if available. + --lts= Uses automatic alias for provided LTS line, if available. + nvm run [] [] Run `node` on with as arguments. Uses .nvmrc if available and version is omitted. + The following optional arguments, if provided, must appear directly after `nvm run`: + --silent Silences stdout/stderr output + --lts Uses automatic LTS (long-term support) alias `lts/*`, if available. + --lts= Uses automatic alias for provided LTS line, if available. + nvm current Display currently activated version of Node + nvm ls [] List installed versions, matching a given if provided + --no-colors Suppress colored output + --no-alias Suppress `nvm alias` output + nvm ls-remote [] List remote versions available for install, matching a given if provided + --lts When listing, only show LTS (long-term support) versions + --lts= When listing, only show versions for a specific LTS line + --no-colors Suppress colored output + nvm version Resolve the given description to a single local version + nvm version-remote Resolve the given description to a single remote version + --lts When listing, only select from LTS (long-term support) versions + --lts= When listing, only select from versions for a specific LTS line + nvm deactivate Undo effects of `nvm` on current shell + --silent Silences stdout/stderr output + nvm alias [] Show all aliases beginning with + --no-colors Suppress colored output + nvm alias Set an alias named pointing to + nvm unalias Deletes the alias named + nvm install-latest-npm Attempt to upgrade to the latest working `npm` on the current node version + nvm reinstall-packages Reinstall global `npm` packages contained in to current version + nvm unload Unload `nvm` from shell + nvm which [current | ] Display path to installed node version. Uses .nvmrc if available and version is omitted. + --silent Silences stdout/stderr output when a version is omitted + nvm cache dir Display path to the cache directory for nvm + nvm cache clear Empty cache directory for nvm + nvm set-colors [] Set five text colors using format "yMeBg". Available when supported. + Initial colors are: + bygre + Color codes: + r/R = red / bold red + g/G = green / bold green + b/B = blue / bold blue + c/C = cyan / bold cyan + m/M = magenta / bold magenta + y/Y = yellow / bold yellow + k/K = black / bold black + e/W = light grey / white +Example: + nvm install 8.0.0 Install a specific version number + nvm use 8.0 Use the latest available 8.0.x release + nvm run 6.10.3 app.js Run app.js using node 6.10.3 + nvm exec 4.8.3 node app.js Run `node app.js` with the PATH pointing to node 4.8.3 + nvm alias default 8.1.0 Set default node version on a shell + nvm alias default node Always default to the latest available node version on a shell + + nvm install node Install the latest available version + nvm use node Use the latest version + nvm install --lts Install the latest LTS version + nvm use --lts Use the latest LTS version + + nvm set-colors cgYmW Set text colors to cyan, green, bold yellow, magenta, and white + +Note: + to remove, delete, or uninstall nvm - just remove the `$NVM_DIR` folder (usually `~/.nvm`) + +``` + +If NVM is not installed on your machine, Google "install NVM mac" + +To list the versions of node already installed locally, run the following command: + +```bash +nvm ls +``` +If a version greater than 16 is already installed, run the following command: + +```bash +nvm use v18.13.0 +``` + +If a version greater than 16 does not already exist, run the following command: + +```bash +nvm install node +``` +then switch to use the latest version (by following previous steps listed). + diff --git a/frontend/README.md b/frontend/README.md index a3d0575..975a414 100644 --- a/frontend/README.md +++ b/frontend/README.md @@ -4,3 +4,47 @@ [ ] Vitest: Extensions, devtools and scaffold patterns - what features are we planning and how are they gonna co-exist with storybook? [vitest is installed and a couple of scripts added in the package.json] Relevant issue: https://github.com/storybookjs/storybook/issues/17326 + +# Setup + +Below is a list of steps you must take to get the project up and running in a local environment. + +1. Clone the organization onto your local machine: + +```bash +git clone git@github.com:club-40/odin-pantry.git +``` + +2. Navigate your computer/command line into the odin-pantry organization repository + +```bash +cd odin-pantry +``` + +3. Navigate into the odin-pantry `frontend/` repository + +```bash +cd frontend +``` + +4. If necessary, Install the proper version of Node (As of 1/27/2024, you'll need Node version 16 or greater - to avoid issues, it's recommended to install the most recent version of Node). [How to install the proper version of Node](../docs/ways-to-install-node.md) + +5. Install the necessary packages + +```bash +yarn install +``` + +6. Build the site + +```bash +yarn build +``` + +7. Start the frontend server + +```bash +yarn dev +``` + +8. Navigate to the site locally in a browser by visiting `localhost:5173`