Skip to main content

Installation Guide

Welcome to the Materialize installation guide! 🎉 Leveraging Create Next App, we've streamlined the setup to kickstart your project automatically and efficiently.

📚 Getting Started​

Before you begin, ensure Node.js is installed along with one of the following package managers: pnpm, yarn, or npm.

Recommendations & Requirements

Package Manager: pnpm is our preferred choice for its speed and efficiency.

Node Version: Stick to the LTS version recommended on the official Node.js site. Our template is optimized for this version to avoid compatibility issues.

Hidden Files: Ensure files starting with a dot (.eslintrc, .env.example, etc.) are visible and copied correctly. This is crucial for a successful setup, as missing hidden files can occur if they're not enabled on your system.

Project Setup:​

  1. Download the Materialize zip and place it in your chosen directory before unzipping. This step prevents the loss of hidden files during transfer.

  2. Inside, you'll find typescript-version and javascript-version folders, each with full-version & starter-kit. Select the one that suits your project needs and open it in your code editor.

Environment Variables Configuration:​

  1. Rename .env.example to .env.

  2. Populate the .env file with your specific values.

  3. In the full-version, generate a secure NEXTAUTH_SECRET as suggested here.

  4. For Google authentication in the full-version, include GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET in the .env file.

Dependency Installation​

Run the install command using your chosen package manager from the options below:

pnpm install

Launch Project​

Initiate your project with the start command tailored for your package manager:

pnpm dev

🎊 Success! Once the command runs successfully, your console will show the project is active. Visit http://localhost:3000 to view your work in action.

🌍 Network URL Variation

Your network URL might differ from examples shown; this is normal and depends on your specific network setup.

🔧 Port Customization

Change the port by adding --port <port-number> or -p <port-number> to your launch command. Update the .env file's URL to reflect the new port, e.g., pnpm dev --port 3001 changes the URL to http://localhost:3001.

Begin your Materialize adventure with joy and efficiency! 🚀