threejs-classic-techniques

Introduction
Run the project locally
Available Scripts
Deployment
- Deployment – Run locally
- Deployment – Live website
Credits
- Media

Introduction

Creating ... using Three.js.

Run the project locally

Runs the app in the development mode.
Open http://localhost:5173 to view it in the browser.
```
cd threejs-classic-techniques
npm i
npm run dev
```

Available Scripts

In the project directory, you can run:

`npm run dev`

Runs the app in the development mode.
Open http://localhost:5173 to view it in your browser.

The page will reload when you make changes.
You may also see any lint errors in the console.

`npm run build`

Builds the app for production to the dist folder.
It correctly bundles in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
This dist folder can be deployed to any of your preferred platforms (see Deployment – Run locally).

`npm run preview`

Note: vite preview is intended for previewing the build locally and not meant as a production server

Once you've built the app, you may test it locally by running

npm run build
npm run preview

The vite preview command will boot up a local static web server that serves the files from dist at http://localhost:4173. It's an easy way to check if the production build looks OK in your local environment.

You may configure the port of the server by passing the --port flag as an argument.

{
  "scripts": {
    "preview": "vite preview --port 8080"
  }
}

Now the preview command will launch the server at http://localhost:8080

Deployment

Deployment – Run locally

Prerequisite (on Windows):
- Make sure Node.js and NPM are installed on your computer. You can download both at nodejs.org (Once you install a version of Node, the corresponding version of NPM is installed for you. So you don’t need to install NPM separately). The Node.js version recommended to install is the long-term support version (LTS).
  - Checking node version
```
  node -v
```
- Please see .nvmrc file at the root of threejs-classic-techniques repo.
- Using nvm, a Node Version Manager is recommended as it helps you manage and switch between different Node versions with ease. It provides a command-line interface where you can install different versions with a single command, set a default, switch between them, etc.
- Installing the LTS version of Node
```
  nvm install lts
```
- Installing a specific version of Node. E.g nvm install 20.9.0
```
  nvm install node-version-number
```
- Checking nvm has been installed:
```
  nvm -v
```
  If nvm was installed correctly, this command will show you the nvm version installed.
- Seeing the list of Node versions you have installed on your Windows machine
```
  nvm list
```
- Using a specific version of Node, run either
  - to use the latest version
```
  nvm use latest
```
  - to use the long-term support version
```
  nvm use lts
```
  - to use any other version you have installed
```
  nvm use version-number
```
In GitHub click on the repository nammed threejs-classic-techniques

Clone the repository locally. Run

git clone https://github.com/sctlcd/threejs-classic-techniques.git

Install all modules listed as dependencies and devDependencies in package.json
```
cd threejs-classic-techniques
npm i
```
note: in this app
- three - JavaScript 3D library
- vite - Development server with live reload capability for building fast and optimized web applications
Runs the app in the development mode. Open http://localhost:5173 to view it in the browser.
```
cd threejs-classic-techniques
npm run dev
```

Deployment - Live Website

Firebase

threejs-classic-techniques live website is currently deployed on Firebase using the main branch on GitHub. Once you have the project setup locally, you can proceed to deploy it remotely.

Create a Firebase account and/or log in to your Firebase account
On the top right corner click Go to console
Click Add project, give it a name (your github repo name so here threejs-classic-techniques) and follow the various steps
Install Firebase CLI Tools, firebase-tools
```
npm install -g firebase-tools
```

Create firebase.json and .firebaserc at the root of your project with the following content:

firebase.json:

{
  "hosting": {
    "public": "build",
    "ignore": [],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

.firebaserc:

{
  "projects": {
    "default": "<YOUR_FIREBASE_ID>"
  }
}

On the main branch, after running npm run build, deploy using the command firebase deploy.

sctlcd / threejs-classic-techniques

threejs-classic-techniques

Table of Contents