Welcome to Monks NextJS Generator! 🚀

Hey there, developer! Ready to dive into our awesome NextJS Boilerplate? This guide will help you set up and start developing in no time. Let's get started!

Table of Contents

• Setting Up
• Development
• Documentation
• License

Setting Up

1. Check Your Node and NPM Versions

First things first, let's make sure you're using the right versions:

• Node: 18.19.0
• NPM: 10.2.3

Pro tip: Use NVM to manage your Node versions easily!

nvm install 18.19.0
nvm use 18.19.0

2. Install git-lfs

We use Git LFS for managing large files. Here's how to set it up:

• For Ubuntu/Debian fans:

  curl -s https://packagecloud.io/install/repositories/github/git-lfs/script.deb.sh | sudo bash
  sudo apt-get install git-lfs

• Mac users (with Homebrew):

  brew update
  brew install git-lfs

• Windows users: Grab the installer from Git LFS Releases

3. Set Up Your GSAP Token

To install our npm packages, you'll need a GSAP token. Ask your project lead for this key!

• For Mac/Linux: Add to your shell profile (e.g., ~/.bash_profile, ~/.zshrc):

  export GSAP_NPM_TOKEN=<your-gsap-token>

• For Windows: Choose your favorite method:

  1. Command Prompt:

     setx GSAP_NPM_TOKEN "<your-gsap-token>"
     

  2. PowerShell:

     [Environment]::SetEnvironmentVariable("GSAP_NPM_TOKEN", "<your-gsap-token>", [System.EnvironmentVariableTarget]::User)

  3. GUI: Search for "Environment Variables" in the Start menu and add it there.

Remember to restart your terminal after setting this up!

4. Set Up Your Linters

For a smooth coding experience, set up these linters in VSCode:

• ESLint
• Prettier
• Stylelint

Update your VSCode settings (JSON) with our recommended configuration:

1. Press Cmd + Shift + P (on Mac) or Ctrl + Shift + P (on Windows/Linux)
2. Type "Open Settings (JSON)" and select it
3. Add or update the following settings:

{
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "stylelint.validate": ["css", "scss"]
}

These settings ensure that:

• Prettier formats your code on save
• ESLint fixes issues automatically
• Stylelint validates your CSS and SCSS files

With these linters set up, you'll catch and fix issues early, keeping your code clean and consistent!

5. Clone the Repo

git clone [email protected]:Experience-Monks/nextjs-boilerplate.git

6. Install Dependencies

npm install

Development

Ready to code? Start your local server:

npm run dev

This will fire up:

• Frontend (https): https://localhost:3000
• Storybook: http://localhost:9001

Documentation

Want to dive deeper? Check out our docs:

• File Structure And Organization
• Template Generator
• Copy Management
• Import Aliases

License

We're open source! Check out our MIT License.

Happy coding! 🎉👩‍💻👨‍💻