Relivator 1.3.0-canary.7: Next.js 15 eCommerce Template

We are currently migrating the documentation from the existing Relivator README.md to the official, newly launchedRelivator & Reliverse Docs website (https://reliverse.org).The content will be organized into appropriate sections on the new site. During the migration, some elements might not function properly. The current README.md will contain only minimal information. Please let us know if you encounter any issues.

🌐 Demo|👋 Introduction|🏗️ Installation|🩷 Sponsors

⚙️ Scripts|🤔 FAQ|🔍 Details|✅ Roadmap|📖 Changelog

Stop jumping from one starter to the next. WithRelivator,your possibilities are endless! You can create anything you want; all the tools are ready and waiting for you.

The entire Relivator project was developed by one person,Nazar Kornienko (blefnk)!Some people have already contributed, and you’re welcome to do the same—any contributions at all are appreciated! Your contributions will not be forgotten;our awesome communityvalue them highly, and you might even receive financial gratitude from the project's creator in the future. Let's come together to create the most coolest Next.js template in the world! This will be a joint effort and a shared victory, a true win-win. Thank you all for your contributions andfinancial support!

Please take a moment to read through the information below. You'll find helpful details about how everything works in the project, as well as an extensive list of features.

«I couldn't find the~~sports car~~Next.js starter of my dreams, so I built it myself.»©~~Ferdinand Porsche~~@blefnk

Our goal is to create the world's most feature-rich and globally accessible Next.js starter. It offers more than just code—it's an experience. Scroll down to see the impressive list of project features, including the ability to switch between Clerk/Auth.js (next-auth@beta/NextAuth.js) and Drizzle's MySQL/PostgreSQL on the fly. Welcome to the Relivator starter and the Reliverse community!

Introduction

👉 Read the Detailed Blog Post About 1.2.6 & 1.3.0@canary Update 👈

✅ Relivator 1.2.6 uses the following dependencies (only some are listed):Next.js 15, React 19, TypeScript 5.5/5.6, Tailwind 3/4, tRPC 11, Clerk 5, Auth.js 5, ESLint 9 (with multiple plugins like typescript-eslint 8, react, unicorn, sonarjs, perfectionist, tailwindcss, readable-tailwind, import-x, jsx-a11y, security, markdown, mdx, json), Biome, Stripe, Million, Reliverse, next-intl, shadcn/ui, radix-ui, react-query, pnpm, zod, cn, turbo, Drizzle (Postgres, MySQL, SQLite, Neon, Railway, PlanetScale, Turso), GSAP, SWR, Resend, react-email, next-themes, Putout, Flowbite, Udecode, Slate, uploadthing, Radash, CSpell, TypeStat, Lucide & Radix Icons, Vercel & Loglib Analytics, Axios, Day.js, Embla Carousel, Execa, Math.js, UnJS libs (consola, fs-extra, pathe, etc), and much more

[upd. 18.08.2024]You can now try out the first published Reliverse Addon –@reliverse/fs,which is already available and used in Relivator!🎉 The upcoming Relivator 1.3.0 will have as few dependencies as possible.Everything will work thanks to @reliverse/addons. Everything will be separated into its own libraries and will be published on npmjs and/or jsr. You will be able to install exactly what you need, including functionality and UI. You will have two options. One is to install the addons the classic way using 'package.json'. The other option is that all these addons can also be installed in a style inspired by shadcn/ui, where you keep all the content directly in your project (as it is currently in test mode in Relivator 1.2.6 (please checkaddonsfolder or runpnpm addons)), although the first option will be recommended for the most use cases. 'addons' folder already contains many cool things, especially related to codemods. It also includes the @reliverse/academy game, where you can check how good you know JavaScript/TypeScript, React/Next.js, Relivator/Reliverse, and even ESLint, ecosystems (you will even find there table of records and will can contest with other players if you share data/players.json and data/progress.json save files to them; the game has also achievement system).

🙏 Please help us reach 1,000 stars on GitHub:Once this project reaches this goal, I, @blefnk, the author of this project, will start my video course on the basics of web development (HTML, CSS, JS), React, Next.js, TypeScript, related libraries, and many other topics. This milestone will also affirm that Relivator andReliversetruly make sense to exist, leading to more frequent updates and further dedication to these projects.

⭐ Bookmark this page in your browser:This project will only get better in the future. You can also click the star at the top of the page and add the repo to your collection to keep it easily accessible.

The Huge Relivator 1.2.6 & 1.3.0@canary are Already Available

👉 Read the Detailed Blog Post About 1.2.6 & 1.3.0@canary Update 👈

Relivator 1.2.6 was released on August 4, 2024! We are now actively working on the next major update, Relivator 1.3.0, with the goal of making the project production-ready, clean, and high-quality. We invite you to join us in actively searching for issues, contributing freely, and earning cool rewards. A canary branch was launched a few days ago (and is available to everyone in the main repo), and the dev branch is also now available (the dev branch is available for a limited time to all sponsors at any paid pledge level).

🔥 Important Note:Relivator currently requires specifying Clerk environment variable keys, as its API has changed. We are working on making Clerk optional again. However, all other environment variables are optional. If this statement is incorrect and something is broken, please let us know.

What About the Future? Any News on 1.3.0?

🎉 The upcoming Relivator 1.3.0 will have as few dependencies as possible! Finally!

I'm (blefnk) working to automate the Relivator's developer experience as much as possible, including the installation process. The upcoming version 1.3.0 will feature significant automated installation. If you wish to try the initial Alpha version of one of my many automation scripts, use thepnpm deps:install(orpnpm deps:install-all) command. This script already allows you to install and remove project packages, and it also works as a linter. You can check the comprehensive number of predefined commands configured inside the 'scripts' section of the 'package.json' file. However, before running this script, you should manually install the essentials:

npx npm add typescript tsx npm @mnrendra/read-package @clack/prompts
npx npm add fs-extra pathe fast-npm-meta semver @types/semver redrun axios
bun|yarn|pnpm dlx jsr add @reliverse/core(or:npx jsr add @reliverse/core)

Thanks to @reliverse/addons, everything now works smoothly with fewer dependencies. In the future, each feature and component will be split into its own library and published onnpmjsand/orjsr,so you can install only what you need. With the future Relivator 1.3.0 version, you won't have to deal with unnecessary components in web templates anymore. You get the core package and can add features and UI components as you need them.

The 'addons' folder is divided into two parts: terminal context and browser context (it's everything, excluding the 'addons/scripts' folder). The 'addons/scripts' folder contains functions used by the CLI (command line interface), while the 'src' and 'addons/*' folders (excluding 'addons/scripts') are for the browser, since the browser doesn't support certain JS features. So, while 'addons/scripts' has everything needed for the whole app, not everything can import from 'addons/scripts'.

You’ll have two installation options: the classic method using 'package.json' or a new approach inspired by shadcn/ui, where you keep all the content directly in your project (currently in test mode in Relivator 1.2.6—check theaddonsfolder or runpnpm addons). While the classic method is recommended for most cases, feel free to explore the new approach!

The 'addons' folder is already packed with many exciting features, especially related to codemods, and includes the@reliverse/academy game.This game allows you to test your knowledge of JavaScript/TypeScript, React/Next.js, Relivator/Reliverse (make food/tea/coffee before trying this test—it has a lot of questions!), and even ESLint v9 ecosystems. It features a leaderboard, enabling you to compete with others by sharingdata/players.jsonanddata/progress.jsonsave files. Plus, an achievement system keeps you motivated!

I can’t wait for you to experience the new and improved Relivator 1.3.0! By the way, the items in the✅ Roadmapsection will finally be checked off! But to make 1.3.0 truly stable, production-ready, and just great, let's first work together on Relivator v1.3.0-canary.0, which is coming soon! If you want to get it even faster, there is now a 'dev' branch. We recently opened the project pages on financial support platforms, and currently, any contribution grants you access to the 'dev' branch. Thank you for your attention!

🖥️ Hire Me

Hello, I'mNazar Kornienko,a flexible web developer specializing in JavaScript/TypeScript and React/Next.js front-end development. If you’re looking for someone with my skill set, please contact me atblefnk@gmailor viaDiscord.

Please explore the current repository to learn more about my experience with the JavaScript/TypeScript and React/Next.js ecosystems. I'm available for both remote work and full-time positions. While my primary focus is frontend and CLI development, if you need help with code automation tools, small tasks related to Python or backend, or even designs in Figma, graphic design, or copywriting/marketing, feel free to reach out to me as well—I’d love to see how I can assist.

🤝 Partnerships

Starting with version 1.2.6, Relivator is now truly production-ready. However, there's still much to be accomplished, and you might be surprised when you check the✅ Roadmapsection! To reach our goals, we are seeking partners to collaborate and support each other's projects' growth. If you're interested and would like to learn more, please feel free to email me atblefnk@gmail.

Our Partners

Railway

🙏 Dear Audience, I Need Your Help

Currently, I’m in a challenging financial situation, so I would greatly appreciate any recommendations or mentions of my work and Relivator as part of my portfolio, such as on the pages of your own repositories. Your support would mean a lot to me! As a token of my appreciation, I’d be happy to send some interesting gifts to you. Thank you for your time and consideration!

Installation

How to Install and Get Started:You have two options for installation. You can either immediately deploy to Vercel using the button below and start working on the generated repository right away (but still read the information below), or you can follow the short or detailed manual installation instructions provided.

By The Way:Sometimes, we giftReliverse Pro,which gives you early access to the Reliverse projects ecosystem, including Relivator, as well as upcoming plugins, to randomly selected individuals. We also give away other interesting things. Simplystar this repositoryandlet us know how to reach you.To join the discussion, hop intothe project's Discord.

One-click Installation Method (find recommended method below)

🔥 Important Note:Relivator currently requires specifying Clerk environment variable keys, as its API has changed. We are working on making Clerk optional again. However, all other environment variables are optional. If this statement is incorrect and something is broken, please let us know.

By using this method, you will get only the front-end, with all the functionality disabled (learn how to enable it by reading the manual instructions below):

Please note:As of version 1.2.6 and 1.3.0 (dev and canary), it is recommended to use Clerk as the authProvider (specified in thereliverse.config.tsfile) since this version has been more thoroughly tested with Clerk. We are working on fi xing and improving the stability of Auth.js (next-auth@beta/NextAuth.js) as an authentication provider.

Manual Installation: Short Method (find recommended method below)

🔥 Important Note:Relivator currently requires specifying Clerk environment variable keys, as its API has changed. We are working on making Clerk optional again. However, all other environment variables are optional. If this statement is incorrect and something is broken, please let us know.

Node.js LTS:(A)classical method -Windows/macOS|Linux;(B)nvm -Windows|macOS/Linux;(C)fnm.
Tools:corepack enable pnpm➞VSCode➞Git➞GitHub Desktop(Windows/macOS|Linux) ➞Stripe CLI.Windows only:PowerShell 7.4+.
Fork the repo:Download your fork using GitHub Desktop.
Setup:pnpm install && install:global && pnpm reli:setup➞pnpm reli:vscode➞cp.env.example.env➞ fill in the values inside of.env➞pnpm db:push➞reliverse.config.ts.
Run, Build, Deploy:Usepnpm devto run the app. Stop withCtrl+C.Build withpnpm build.Runpnpm apptsto check the code. Upload to GitHub with GitHub Desktop. Deploy onVercel.

Manual Installation: Detailed Method (recommended)

🔥 Important Note:Relivator currently requires specifying Clerk environment variable keys, as its API has changed. We are working on making Clerk optional again. However, all other environment variables are optional. If this statement is incorrect and something is broken, please let us know.

▲ Hotline:Email|Discord|Slack|Cal

I'm (blefnk) working to automate the Relivator's installation process as much as possible. The upcoming version 1.3.0 will feature a significant automated installation. If you wish to try the Alpha version of one of my many automation scripts, use thepnpm deps:install(orpnpm deps:install-all) command. However, before running this script, you should manually install the essentials (edit 'pnpm dlx jsr' if needed):npx nypm add typescript tsx @clack/prompts @mnrendra/read-package nypm ora fs-extra pathe fast-npm-meta semver @types/semver redrun && pnpm dlx jsr add @reliverse/core.

Please note:As of version 1.2.6 and 1.3.0 (dev and canary), it is recommended to use Clerk as the authProvider (specified in thereliverse.config.tsfile) since this version has been more thoroughly tested with Clerk. We are working on fi xing and improving the stability of Auth.js (next-auth@beta/NextAuth.js) as an authentication provider.

Node.js LTS:Ensure you haveNode.js LTSinstalled using:(a)classical method -Windows/macOS|Linux;(b)nvm -Windows|macOS/Linux;(c)fnm.
Essential Tools:Then, runcorepack enable pnpmto installpnpm.Also, installVSCode,Git,GitHub Desktop(Windows/macOS|Linux), andStripe CLI.If you're a Windows user: installPowerShell 7.4+as well.
Project Cloning:Fork the repositoryor click on theUse this templatebutton. Use GitHub Desktop to download it to your device. The project size is about 12MB, but ensure you have at least 7GB of disk space for comfortable work, as thenode_modulesand.nextfolders require it.
Configuration:Open the project folder in VSCode. Install the recommended extensions from.vscode/extensions.jsonand/or install the advanced VSCode configurations by usingpnpm reli:vscode(choose thedefaultpreset for the best experience or theultimatepreset for the best experience). You can also refer to the⚙️ Scriptsand🤔 FAQRQ19below to learn more about this script and its configurations. You can pressCmd/Ctrl+Fand search for "Q19/Q20"if you want to install more extensions and settings (remember, more extensions mean slower VSCode). Then clickFile > Exit(VSCode will save all your open windows). Open VSCode again. PressCtrl+Shift+P(or justF1) and search for>Create New Terminal,or just pressCmd/Ctrl+Shift+~(on Windows make sure that it uses PowerShell 7.4+, click the arrow next to + ➞ Select Default Profile ➞ PowerShell).If VSCode prompts you to allow the usage of the project's TypeScript version, allow it if you're a Windows user. On other operating systems, you may or may not encounter path issues.
Environment:Runpnpm install(ornpx nypm install) and/or, optionally,install:globalto install the required packages. It is also recommended to configurereliverse.config.tsfile. Then, optionally, you can usepnpm deps:install-all—especiallypnpm deps:install-all(this is currently an Alpha script)—to unlock some additional features, like theeslint.config.ultimate.tspreset (which will have a.txtextension by default starting with Relivator v1.3.0). (NOTE: As of Relivator v1.2.6, theultimatepreset is configured by default, so no action is required). Next, configure Relivator to meet your needs using thepnpm reli:setupand/orpnpm reli:vscodecommands, and relaunch VSCode. You have two options: deploy with zero values in the.envfile (resulting in just the frontend without features related to auth, database, pricing, etc.), or copy the.env.examplefile to a new.envfile and fill in the values you want (everything is optional starting with Relivator v1.2.6). It is highly recommended to fill in theDATABASE_URLfield. Then, set the database provider indrizzle.config.tsand make changes in related files if needed. Finally, send the database schema to the database usingpnpm db:push.You can learn more about databases below in the currentREADME.mdfile.
Run, Stop, Build:Run the app withpnpm devorpnpm turbo:dev(interactive but unstable). Visithttp://localhost:3000to check it out. Stop it by focusing on the console and pressingCtrl+C.After making changes, build the app usingpnpm buildorpnpm turbo:build.Don't worry if you see warnings related to Clerk, React Compiler, Babel, next-auth, etc. when running the build; these are known issues not related to Relivator.Note that when using the pnpmturbo:buildcommand, the VSCode terminal may not exit automatically. If this happens, press Cmd/Ctrl+C to close the process manually.
Check, Commit, Deploy:To check if the current codebase meets@reliverse/standard,runpnpm appts(orpnpm appts:noputout,orpnpm turbo:appts,orpnpm appts:nobuild). Learn more about project scripts in the next section. If everything is fine, upload the project to your GitHub profile using GitHub Desktop. Finally, deploy it by importing the project intoVercel,making the website publicly accessible on the internet. Alternatively, you can usepnpm deployor justvercelto preview and inspect the local deployment without committing to GitHub every time.

It is recommended:From time to time, runpnpm reli:prepare.This script executespnpm install,which checks for issues or installs/removes manually added/removed dependencies in yourpackage.jsonfile. It also executespnpm latest,which installs the latest versions of project dependencies. Finally, it runspnpm appts,which will do its best to improve your code and check for any errors.Note:Sincepnpm latestupdates all packages to their latest versions, be aware that something in the code might break, especially if considerable time has passed since the last version of Relivator was released. Therefore, you can use, for example, the VSCode extensionOpen Multiple Filesto easily find and fix broken code, or reach out to theRelivator Discord serverfor assistance, or create aGitHub Issue.You can learn more about those scripts and the mentioned extension below in the currentREADME.mdfile.

If you'd liketo share your work, get/provide feedback, or ask for help, feel free to do so eitherin our Discord serverorvia GitHub discussions.Note:Currently, the instructions above may be outdated. Please contact us if something goes wrong; everything will be updated in Relivator 1.3.0.

🎶 Recommendation

Coding becomes a whole new experience with the right music, doesn't it? Enhance your workflow with Relivator and enjoy the soothing melodies from theMF Piano YouTube channel.This channel, run by my brother, offers beautiful piano covers that are perfect for background music. Your subscriptions, views, likes, and comments would mean the world to us and help his channel grow. Thank you for your support!

Scripts

The project includes various scripts designed to enhance your developer experience. You can run any script using your terminal. Please note that some CLI scripts may require you to adjust the height of your terminal window to avoid UI anomalies. The Relivator allows you to use the following:

💪 Native Scripts:These are commands configured inpackage.jsonand run by the package manager likepnpm,bun,yarn,ornpm.You can run these "native" scripts using commands likepnpm [dev|build]andpnpm db:[push|studio].
⚙️ Custom-Built Scripts:These scripts are written in TypeScript and Python by Reliverse and the community and are mostly located in theaddonsfolder. 🔥Please be cautious when using transformation scripts, as they are all in their initial versions. Ensure you commit your changes to yourversion control provider(such asGitHub) before using any of them.They can be executed via the command line using[appts|addons|reli|lint|fix]:*or manually viapnpm tsx path/to/fileorpy path/to/file(e.g.,py addons/scripts/reliverse/relimter/ Python /tasks/math-to-mathjs.py).
🐍 Python Script Manager:Can be executed usingreli:managerorpy addons/scripts/reliverse/relimter/ Python /index.py.Before running it, please read the🐍 Pythonsection below to learn how to prepare your workspace to run this manager.

package.json

Below are some scripts configured in thescriptssection of thepackage.jsonfile (the following text may be outdated in some places, please let us know if you find any inaccuracies):

pnpm appts/pnpm appts:putout/pnpm appts:verbose/pnpm appts:nobuild:These commands perform a comprehensive codebase check. They sequentially runpnpm knipfor various codebase checks,pnpm formatto format code with Biome (or Prettier, coming soon), andpnpm lintfor linting with Biome and ESLint (pnpm lint:eslint).Linting may take some time, so please be patient.Thepnpm appts:putoutcommand also runspnpm lint:putout.Usingpnpm appts:verbosedisplays detailed ESLint progress, useful if you suspect ESLint is stuck (it may be slow, not stuck). You can manually resolve issues by pressingCtrl+Smultiple times in VSCode until there are no issues in the "Problems" tab. Usually, issues are resolved by the second or third run. If some specific issues persist, it may mean they are not automatically fixed. Please try to fix them manually, contact us, or disable the rule. Many rules ineslint.config.jsare disabled by default; enable only what you need. You may also want to runpnpm reli:setupto choose the RulesDisabled preset if you want to disable all "error" and "warning" rules at once.pnpm apptsthen runspnpm typecheckfor remaining TypeScript errors andpnpm build,but you may trypnpm turbo:appts,which runspnpm turbo:buildto speed up builds using Turborepo v2. Note thatpnpm turbo:apptsis a faster, interactive version ofapptsbut may not work well with the VSCode terminal. Alternatively, you can usepnpm appts:nobuild,which performs only checking, linting, formatting, and fi xing, without building.
pnpm fix:putout-unstable:Putoutis a linter and formatter. While the formatter fixes issues reported by the linter, thefix:putout-unstablecommand also makes changes not flagged by the linter. Ensure you commit your code before running this command, as it might cause unexpected changes. After running it, review and adjust the changes in your codebase using VSCode Source Control (Cmd/Ctrl+Shift+G) or GitHub Desktop.
pnpm db:[push|studio|generate|migrate]:pushconverts the TypeScript Drizzle schema to SQL and sends it to the DATABASE_URL;studioruns Drizzle Studio onhttps://local.drizzle.studio;migrateapplies migrations generated by thegeneratecommand (you may not need this command anymore), based on thedrizzle.config.tsfile.
pnpm stripe:listen:Runs the Stripe webhook listener and helps set up Stripe environment variables. TheStripe CLImust be installed for this command to work.
pnpm addons:This command allows you to headlessly run some of the scripts located in theaddonsfolder. Many scripts are still not added there, so please check theaddonsfolder and run them manually usingpnpm tsx path/to/fileorpy path/to/file.This also includes the game @reliverse/academy. In the future, it will have many different interesting features. Currently, it is a quiz with a leaderboard and achievements where you can test your knowledge of Relivator, JavaScript, TypeScript, React, and even ESLint.
reli:manager:Learn more in the🐍 Pythonsection below. This is the alias for thepy addons/scripts/reliverse/relimter/ Python /index.pycommand.
pnpm latest:Updates all project packages to their latest stable versions, including some specific packages to their latest versions on rc/beta/ Alpha /next/canary branches.
pnpm reli:vscode [nothing|minimal|default|ultimate]:Enhances VSCode settings with presets by Reliverse. This script adjusts yoursettings.json,extensions.json,andlaunch.jsonfiles. It will prompt for confirmation before overriding current files. UseRQ20to learn more about.vscodepresets and font installation for theultimatepreset, or use thedefaultpreset (which doesn't contain custom fonts and themes). Choosedefault,minimal,ornothingif your PC or virtual machine is very slow.
pnpm reli:help:Displays useful information about Relivator and Reliverse.
pnpm lint:compiler:Runs the React Compiler health check. Note that React Compiler is disabled by default; see the FAQ section for more details.
pnpm tw:[v4|v3]:Switches betweenTailwind CSSv3 and the Alpha v4 version.Important:After using this command, adjust comments inpostcss.config.cjs.Also:When using Tailwind CSS v4, remove or comment outtailwindPluginfromeslint.config.jsas it doesn't support v4. Some additional changes in the codebase may be required.
pnpm reli:prepare:Learn more about this script in the previous section (Cmd/Ctrl+F "It is recommended" ).

#pnpm tsx reliverse.config.ts --details
ℹ ▲ Framework: Relivator v1.2.6 ▲ Engine: Reliverse v0.4.0 ▲ Hotline: https://discord.gg/Pb8uKbwpsJ
ℹ Relivator v1.2.6 Release Blog Post 👉 https://reliverse.org/relivator/v126
ℹ Help Relivator become even better!Please star the repo – https://github /blefnk/relivator
ℹ For experienced users: run'pnpm reli:prepare'to update all dependencies to the latest versions and checkifthe code requires any adjustments.
ℹ Meet quality standards: run'pnpm appts'and'pnpm fix:putout-unstable'to get linting, formatting, and more.
ℹ Unstable: try'pnpm turbo:dev'and faster build with'pnpm turbo:build':https://turbo.build/repo
ℹ The reactCompiler is enabledinnext.config.js - it uses webpack now, so builds take longer.
ℹ Clerk: make sure to connect the domaininthe Clerk dashboard so services like PageSpeed will work.
ℹ Please find Q21inthe FAQ of README.md. Copy the adapted bun scripts and replace the current onesinpackage.json - scriptsforother package managers coming soon.

Python

👋 Hello, dear friend! Nice to see you here! I (@blefnk Nazar Kornienko) have a dream of making the open-source world better and of higher quality. I aspire to leave my mark in history by ensuring people genuinely enjoy programming and create quality products. I'm particularly passionate about clean code. The book "Clean Code" by Robert Martin is a must-have!

That's why I've developed numerous tools in Relivator. Over the past few months leading up to Relivator 1.2.6, I've learned a lot. To avoid manually rewriting code, I've developed a unified script manager. The current version of the manager is still very unstable. You can visit theaddons/scripts/reliverse/relimter/ Python /index.pyfile to learn more about how this script manager works.

If you want to use thisPython Script Manager(refer to⚙️ Scriptto read the introduction), then please ensure your workspace is properly prepared for it. Please note that most scripts are largely untested. Commit your code before running any script. Increase your VSCode terminal window size to avoid UI glitches. Need help? Visit ourDiscord.Follow the steps below to get started (scroll down to learn even more Python commands):

✅ After following the instructions above, you can safely run the script manager.

InstallPythonandRuff.Install the following VSCode extensions:PythonandRuff.
Create a new.venvfolder by pressingCmd/Ctrl+Shift+Pand running>Python: Create Environment...(VSCode will prompt you to choose the Python interpreter; choose the one installed in step 1). Then, chooserequirements.txtas the package dependencies file.
Please note, VSCode's terminal automatically activates the environment after each launch. You can verify this by hovering over a [pwsh|bash|cmd] button in VSCode's terminal and looking for something like "Python:Activated environment for.\.venv\Scripts\ Python.exe".However, if you are using another IDE or an external terminal, you may need to activate the virtual environment manually: [Windows].venv/Scripts/activate;[macOS/Linux]source.venv/bin/activate.
Ensure all requirement are installed correctly, just runpip install -r requirements.txt.

🐍 Everything ready? Nice! Congratulations! Try running thePython Script Managernow by executing:reli:managerorpy addons/scripts/reliverse/relimter/ Python /index.py

Useful Python Commands

We are still working on this section. The following description may currently be slightly incorrect.

#- Install the required dependencies:
pip install -r requirements.txt

#- Make sure you have `pip-tools` installed to use `pip-compile` and `pip-sync`:
pip install pip-tools

#- You can create/update a `requirements.txt` file:
pip freeze>requirements.txt

#- Sync the dependencies:
pip-sync requirements.txt

#- Remove a specific package (e.g., torch):
pip uninstall torch
pip freeze>requirements.txt

Please note: If you haveUVinstalled and you've used a command likeuv pip install InquirerPyand it shows an error like "The wheel is invalid", the easiest solution is to just use regular pip commands likepip install InquirerPy.

FAQ

This is not only a Reliverse-specific FAQ but also a developers' FAQ for Next.js and the React ecosystem in general.

RQ1:How do I enable the brand new React 19's React Compiler?RA1:Please visit thenext.config.jsfile, and inside theexperimentalsection, findreactCompilerand set it totrue.Additionally, it's recommended to installpnpm -D babel-plugin-react-compiler.There are great ESLint rules, but they are uninstalled by default because they enable Babel/Webpack, which may slow down the build. If you just installed this plugin, then openeslint.config.js,find, and uncomment things related to it (useCmd/Ctrl+Fand search forcompiler).
RQ2:How do I ensure my code is fully auto-fixed?RA2:Please note that you may need to press Cmd/Ctrl+S a few times to have the code fully fixed by various tools.
RQ3:How can I check the project's health?RA3:Runpnpm apptsorpnpm turbo:appts(unstable but interactive and faster) to check the project's health.
RQ4:How can I update all packages to the latest version?RA4:For experienced developers, runpnpm latestto update all packages to the latest version. Alternatively, use 'pnpm reli:prepare' to update all dependencies and check if the code requires any adjustments.
RQ5:Why do I sometimes see the notificationInvalid JSON. JSON5: invalid character '#'?RA5:No worries, looks like you'vethinker.sort-jsonVSCode extension installed, and it seems to be an incorrect error thrown by this extension. But it's not recommended to use external sort-json-like extensions, because we've configuredeslint-plugin-jsonc,which already does sorting in the more predicted way. If you still needthinker.sort-json,looks like it can't sort JSON files in rare random cases, but it works fine on the next file save (if your file doesn't have issues, of course). If this error is causing significant problems, such as preventing you from adding a word to CSpell, you can setsource.fixAll.sort-jsontoneverineditor.codeActionsOnSaveof.vscode/settings.json.
RQ6:What should I do if I notice outdated information or other issues in the README.md or other files?RA6:In an effort to be as helpful as possible, this README contains a wealth of information. Some text may be outdated and will be updated as we grow. Please let us know on thediscussion pageif you notice any small issues like outdated info, broken links, or grammatical/spelling errors in README.md or other files.
RQ6:What versions of React and Next.js does the project currently use?RA6:The project currently usesreact@canary,react-dom@canary,andnext@canary.If React 19 and/or Next.js 15 have already been fully released, please remove them from thelatestscript and run, for example,npx nypm add react@latest react-dom@latest next@latestin the terminal. You can do the same with any other rc- Alpha -beta-next-canary-dev-experimental-etc dependencies, on your choice, if their stable version has already been released.
RQ7:Where should I store project-specific files, and how do I handle ESLint issues?RA7:You can use thesrc/clusterfolder to store project-specific files. This makes it easy to update Relivator to new versions. Learn more by visiting the Dashboard's main page on the development environment. After doing this, be prepared to see many issues pointed out by the ESLint config. Runpnpm lintto apply auto-fixes;linting can take some time, so please be patient.You may need to runlintorlint:eslintagain if some issues are not fixed automatically. You can also open those files manually and pressCtrl+Smultiple times until there are no issues in the VSCode "Problems" tab. Typically, by using the CLI, the issues will be resolved by the second or third run. Next, install theOpen Multiple Filesextension in VSCode; right-click on thesrc/clusterfolder, selectOpen Multiple Files,and press Enter. Fix all issues. If you are proceeding incrementally, you can suppress certain ESLint/Biome rules (// eslint-disable-next-line...,// biome-ignore...,or completely disable the rule in the relevant config) or TypeScript errors (@ts-expect-error), though this is not recommended.
RQ8:Weird things happening when formatting code? The code looks one way, and then the next second, it looks different? For example, you see the number of code lines increasing and then decreasing at the same time upon file saving? Without changing the code, does Biome notify you e.g. "Fixed 6 files" instead of "No fixes needed" when you rerunpnpm appts?RA8:Congrats! You've encountered a conflict between linters or formatters. First, we recommend opening the.vscode/settings.jsonfile, finding theeslint.rules.customizationssection, and changing theseverityfrom"off"to"info"(if"off"is present). Setting it to"info"will help you realize that one of the conflicting parties is potentially a rule in thateslint.rules.customizations.Next, you can try to correct files likeeslint.config.js(e.g., disable that conflicting rule),biome.json,.vscode/settings.json,etc. You can also try to disable Biome or ESLint formatters completely, by settingbiome.enabledoreslint.enable(oreslint.format.enable) to "false" in the.vscode/settings.jsonfile. What about that "Fixed 6 files" example? It means Biome changed code in some files in the way which is different from ESLint.
RQ9:What should I do if I get a Babel warning about code generator deoptimization?RA9:This is a known issue and can be ignored. One of the reason occurs because the React Compiler is not yet fully natively supported by Next.js, it temporarily enables Babel to make the Compiler work. Also, don't worry if you see warnings thrown by Clerk, next-auth, or others when runningpnpm build(mainly on Windows and Node.js); it's okay, this is a known issue not related to Relivator. It is also okay if pnpm tells youIssues with peer dependencies found;you can hide this warning by editingpnpm.overridesin thepackage.jsonfile.P.S.Ignore theUnexpected value or character.error from Biome if you see it in theglobals.cssfile. This is a false error, which you can hide by filtering!globals.cssor just!**.cssin the VSCode's Problems tab (use!**.css,!**/node_modules/**there if VSCode's Biome extension parses node_modules for some unknown reason).
RQ10:Can I open multiple files in my VSCode?RA10:We recommend theOpen Multiple Filesextension. Just right-click on the desired folder, e.g.,src,and choose "Open Multiple Files".
RQ11:I have a strangeEach child in a list should have a unique "key" prop.Any tips?RA11:If you see something likeat meta / at headbelow this error, or<locals>, but the module factory is not available. It might have been deleted in an HMR update.,first try disablingexperimental.instrumentationHook,if you have it, innext.config.js.You can also try deleting the.nextfolder. Please contact us if the problem persists.
RQ12:Million Lint reportsAttempted import error: '__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' is not exported from 'react' (imported as 'L').during the A12#12 What should I do?RA12:The easiest solution is to copy the path to the component file that appears under this error and add it tofilter.excludein thenext.config.jsfile. Generally, the key word isuse.Click on the component path below this error. It seems Million has not listed every possible externaluseSomething.ManyuseSomethinghooks work fine, but some may cause issues. This error is also triggered if you use"use client";but no client-specific features are utilized. In this case, remove this directive. Additionally, Million.js sometimes doesn't recognize theimport * as React from "react";statement – so you need to remove it and explicitly import each React hook, type, etc. This line was removed from over 80 files in Relivator v1.2.6 for this reason.
RQ13:Why do I see a warning in the terminal containing the messageterminating connection due to immediate shutdown command?RA13:This warning occurs because providers like Neon disconnect users fromlocalhostif they are inactive for about 5 minutes. Simply refresh the page to restore the connection.
RQ14:How do I remove unused keys from JSON files?RA14:Install thei18n AllyVSCode extension, open its tab, click on refresh in theusage report,right-click on the found unused keys, and select remove.
RQ15:How can I grant admin rights to myself or another user?RA15:Runpnpm db:studio,navigate to the${databasePrefix}_usertable, and setrole: adminfor the desired user. In the future, if you have admin rights, you will be able to change user privileges directly from the frontend admin page.
RQ16:What does theDEMO_NOTES_ENABLEDenvironment variable mean?RA16:Do not use it. It is only used on the officialRelivator demo websiteto showcase certain features that are not needed in real-world applications.
RQ17:I'm using PlanetScale as my database provider. After taking a break from the project, I'm now encountering an "unable to connect to branch" error. How can I fix this?RA17:Go to the PlanetScale dashboard and click on thewake upbutton. Please contact us if the database is not asleep and the problem persists.
RQ18:I have build/runtime errors indicating that Node.js utilities likenet,tls,perf_hooks,andfsare not found. What should I do?RA18:Do not install these utilities; it won't fix the issue. Remember, never keep code in theutilsfolder thatcan only run on the server.Otherwise, you will encounter anomalies during the project build. For example, an error likenode:andfile:not found, or the packagefs,crypto,etc. not found. Want to see the error for yourself? Move the filesrc/server/react.tstosrc/utils,import it in this file, runpnpm build,get scared, remove the import, and move the file back to its place. You may find on the web the solutions suggesting to add configurations like"node": { "net": "empty", "tls": "empty", "perf_hooks": "empty", "fs": "empty" }or"browser": { "net": false, "tls": false, "perf_hooks": false, "fs": false }intopackage.jsonor to the webpack config, but these may not help you.The main issue likely lies in the following:You've triggered client-side code. For example, you might have a hook file in theutilsfolder with a correspondinguseEffectReact hook. To debug, try using the global search functionality in the IDE. Note that commenting out the lines may not be the quickest solution in this case, unlike in other debugging scenarios.
RQ19:I love all kinds of interesting things! Can you recommend any cool VSCode extensions?RA19:Of course! Just replace the current code in.vscode/extensions.jsonwith the one fromaddons/scripts/reliverse/presets/vscode/[default|minimal|ultimate]/extensions.json.Remember, performance issues are possible, so you can just install what you want. Alternatively, you can just run thepnpm reli:vscodecommand to switch easily, and useCmd/Ctrl+Shift+P➞>Extensions: Show Recommended Extensions.

The best way to install this opinionated list of extensions, which are in theultimatepreset (althoughdefaultis recommended by us), is to open the project folder in VSCode. Then, install them by usingCtrl+Shift+P(or justF1) and typing>Extensions: Show Recommended Extensions.Click on the cloud icon (Install Workspace Recommended Extensions). Wait for the completion. ClickFile > Exit(this will save all your open windows). Open VSCode again, and you are ready to go. The configuration for these extensions is already prepared for you. You can learn more about these extensions, which theultimatepreset contains, on the corresponding pages.

And, remember! If you have something broken, you always can find the default files content of.vscodefolder in the.vscode/presets/defaultfolder.
[Reveal the spoiler]

This list may be outdated, and will be updated in Relivator v1.3.x.
"TypeScript Essential Plugins" Extension Notes:You can configure extension settings by opening VSCode Settings UI and searching for@ext:zardoy.ts-essential-pluginsthere. The quote fromVSCode Extension Repository:«Feature-complete TypeScript plugin that improves every single builtin feature such as completions, definitions, references and so on, and also adds even new TypeScript killer features, so you can work with large codebases faster! We make completions more informative. Definitions, references (and sometimes even completions) less noisy. And finally our main goal is to provide most customizable TypeScript experience for IDE features.»
RQ20:[Related to the previous question]How can I improve my visual experience with VSCode?RA20:The project already has a well-configured.vscode/settings.json,but we recommend using our very opinionated configs presets. You have choice to installdefaultorultimate(defaultis recommended).To activate the preset runpnpm reli:vscode.Forultimatepreset don't forget to install the required stuff: the static, means not variable, versions ofJetBrains Mono(recommended) and/orGeist Monoand/orMonaspace(small manual configuration not or may be needed if you don't want to useJetBrains Monoonultimatepreset). Next, forultimate,install the recommendedpop-icon-themeVSCode icons pack extension. Finally, make sure to install the extensions fromQ19,especially, install the recommended by usGitHub LightandHouston(by Astro developers) themes. Please note that after installing the Houston theme, you will find a new corresponding tab on the sidebar (🧑‍🚀 there is your new friend, which reacts while you've code issues!), you can of course remove this tab by right-clicking, but we recommend simply dragging this panel to the bottom of the Folders tab.
- TODO: Fix 'Geist Mono' and 'Monaspace Argon Var', which looks like use Medium/Bold variation instead of Regular ("editor.fontWeight": "normal"doesn't help here). 'JetBrains Mono' works fine.*
- TODO: Do we really need to duplicate fonts for every single thing?* 🤔

RQ21:How do I switch the package manager frompnpmto bun, yarn, or npm?RA21:Here's a variant ofscriptsforbun,but it not tested too much by us. Scripts presets for other package managers coming with Relivator 1.3.0. Just replace it inpackage.json(and make sure it don't miss anything).
[Reveal the spoiler]

Just find and removepackageManagerkey, if present, and then replace only these specific lines by bun's alternatives:
```
{
"scripts":{
"check:compiler":"bunx react-compiler-healthcheck@latest",
"fix:codemod-next-community":"bunx @next/codemod --dry --print",
"fix:codemod-react":"bunx codemod react/19/replace-use-form-state --target src",
"install:global":"bun add -g vercel@latest codemod@latest eslint_d@latest",
"latest:all":"bun update --latest",
"putout:dont-run-manually":"bun lint:putout. --fix",
"reli:prepare":"bun install && bun latest && bun appts",
"rm:other":"bun fse remove.million && bun fse remove.eslintcache && bun fse remove tsconfig.tsbuildinfo"
}
}
```
After you have replaced the scripts, open the project folder and close VSCode. Deletenode_modulesandpnpm-lock.yaml.Open the project in a terminal and runnpx nypm install.After that, you can reopen VSCode. You're done!
RQ22:I applied thedefault/ultimatepreset settings in VSCode, and now my IDE is slow when I save a file.RA22:Go to the keybindings in VSCode, setSave without FormattingtoCtrl+S(Cmd+S), andFile: SavetoCtrl+Shift+S(Cmd+Shift+S). Don't worry if the code might be messy when saving without formatting. Just run pnpm appts and everything will be improved and formatted. You're welcome! P.S. You can also read the VSCode'sPerformance Issuesarticle.
[Reveal the spoiler]

keybindings.json(F1->>Preferences: Open Keyboard Shortcuts (JSON)):
```
[{
"command":"workbench.action.files.save",
"key":"ctrl+shift+s"
}, {
"command":"workbench.action.files.saveWithoutFormatting",
"key":"ctrl+s"
}, {
"command":"workbench.action.nextEditor",
"key":"ctrl+tab"
}, {
"command":"workbench.action.previousEditor",
"key":"ctrl+shift+tab"
}]
```
RQ23:What does index.ts do in the server and utils folders?RA23:These are called barrel files. You can make imports more convenient in your project by using the barrel approach. To do this, use index.ts files to re-export items from other files. Please note: keep code that can only run on the server in the server folder. Code that can run on both the server and client sides should be kept in the utils folder. Relivator 1.2.6 currently violates this description, so we should fix it in v1.3.0. Typically, server functions look like getDoSomething. Additionally, do not import code from the server folder into.tsx files that use React Hooks (useHookName), except when the component has useTransition or similar, which allows you to perform a server action from within the client component.
RQ24:Why do I see console.[log|info|warn|error|...] only in the browser console and not in the terminal from which the application was launched?RA24:If I (@blefnk) researched correctly, it is because you are calling console() in a client-side component (which has the "use client" directive at the top of the file or uses React Hooks). It looks like the terminal works as a server environment. Try calling console() in a file that does not have that directive and hooks. Or just use toasts which works nice with both on the client and the server side.
RQ25:I'm getting strange VSCode extension errors, what should I do?RA25:Don't worry, these are just editor anomalies.Just restart your VSCode, and you're done.Sometimes, due to insufficient RAM, internal extension failures, or other reasons, a particular extension might crash. Especially anomalous is the notification from TypeScript ESLint stating that it can have no more than 8 entry files (we will try to fix this in 1.3.0). Or Biome might start lintingnode_modulesfor some reason, which is also strange to us; our attempts to fix this so far have been unsuccessful, but we will try again in 13.0. Besides this, an extension crash might also happen if you just usedpnpm reli:setupand didn't restart the editor. Or if you manually edited a configuration file and since autosave was enabled, the editor managed to send the configuration with syntax errors to the extension, causing everything to crash. So, restart VSCode, and everything will be fixed! If that doesn't help, check if your configuration files have any issues.
RQ26:How do I change VSCode's panel position?RA26:Just right-click on the panel, selectPanel Position,and choose the desired position, e.g.,Bottom.
RQ27:I have the correct data (key-value) specified in the.envfile, but a certain library, for example, Clerk, does not see this data or sees outdated data. What can I do?RA27:The simplest solution is to just rename your project folder, runpnpm install,and check if the issue is resolved. Otherwise, contact the technical support and community of the respective library.
RQ28:How can I configurepnpmorbun(as package manager) for my needs?RA28:You can visitthispnpmpageorthisbunpagein the official docs to learn more.

RQ29:Should I modify the components byshadcn/ui(as of Relivator 1.2.6, they are located in the"addons/components/ui"folder)?RA29:You may lose your changes if @shadcn orReliverseupdates any of these components in the release of Relivator 1.3.x+. Therefore, the best option currently is to use, for example, the"addons/cluster/reliverse/shadcn/ui"folder, where you can have files that you can safely overwrite the original files with, ensuring you do not lose your changes. As an example, this folder already contains acluster-readme.tsxfile, which only re-exports the originalbutton.tsxfile. So, you can create abutton.tsxfile here and copy and paste that line into your newly created file. Alternatively, you can duplicate the code from the original file and make any modifications you want. UseCmd/Ctrl+Shift+Hand simply replaceaddons/components/uiwithaddons/cluster/reliverse/shadcn/ui(the difference is only in the words"browser"and"cluster").addons/clusteris your house; feel free to do anything you want here, mess it up or tidy it up as you wish. This is your own house, and no one has the right to take it away from you.

RQ30:Which command allows me to easily manage the installation of dependencies in a project?RA30:pnpm deps:install.However, before running this script, you should manually install the essentials:
- npx nypm add typescript tsx nypm @mnrendra/read-package @clack/prompts
- npx nypm add fs-extra pathe fast-npm-meta semver @types/semver redrun axios
- bun|yarn|pnpm dlx jsr add @reliverse/core (or: npx jsr add @reliverse/core)
RQ31:I noticed aTurborepofile namedturbo.disabled.json.How can I reactivateturbo?RA31:Simply remove the.disabledfrom the filename. You can also add the"scripts"from theturbo.scripts.jsonfile to thepackage.jsonfile (if they are not already there).
RQ32:Where can I find out more details about the Relivator and Reliverse?RA32:Read the current README.md file to learn more about each specific aspect of the project. You can also find more information on the project'sDiscordserver and on theGitHub Issuespage.

Details

🌐https://relivator

We've laid the groundwork—now it's time to dive in and accelerate development. And yeah, have fun! Think of Relivator and Reliverse as a sandbox! It's like Minecraft; with Relivator, you can build anything, as creativity knows no bounds! Explore all the new features of Next.js 13-15 and many other web technologies right here, right now—with Relivator.

~~Minecraft~~Reliverse is to a large degree about having unique experiences that nobody else has had. The~~levels~~website templates are~~randomly~~elegantly~~generated~~bootstrapped, and you can build anything you want to build yourself. ©~~Markus Persson~~@blefnk

For real, if you've been exploring which Next.js starter to select for your next project–the search can end here.If you want a POWERHOUSE—Relivator is suitable for every scenario—thenRelivator is definitely the starter you need.Fork it right now! Relivator incorporates numerous features found in other templates and strives to push the limits of Next.js and React capabilities. With Relivator, the opportunities are boundless!

You can even think of Relivator as a Next.js framework! So grab it and enjoy! And don't forget: feedback and stars mean the world to us. Hit that star button! Fork it! Your involvement propels the project to new heights! If you have coding skills, contributions are always welcome!

If you run into issues, join our repository discussions, open an issue, or DM us on:Discord,Twitter/X,Fiverr,LinkedIn,orFacebook.

This project has big plans, and we appreciate all the help we can get! If you're eager to contribute, check out the Project Roadmap above to see potential improvements for the project. Also, useCmd/Ctrl+Shift+Fin VSCode and search forTODO:to find areas that need attention. Please visit theIssuestab for more opportunities to help out.

Project Structure

Only a few of the files are listed here.This section will be updated in the future versions.

.vscode
- presets
- extensions.json
- launch.json
- settings.json
src
- env.js
- middleware.ts
- ...
biome.json
cspell.json
eslint.config.js
knip.json
next.config.js
package.json
README.md
reliverse.config.ts
reset.d.ts
tsconfig.json
typestat.json
...

Configuration

First thing first, refer to the.env.examplefile as the guide. Simply copy data from it to a new.envfile.

The instructions below may be outdated, so please double-check them! We will fully update this README.md with the Relivator 1.3.0 release.

🎉 Everything is optional in.envfile starting from Relivator 1.2.6! You can deploy Relivator without a.env file! But ensure you verify what's necessary. Though the application will run without certain variables, missing ones may deactivate specific features.

Ensure that default values are defined for essential environment variables. Never store secrets in the.env.examplefile. For newcomers or repo cloners, use.env.exampleas a template to create the.envfile, ensuring it's never committed. Update the schema in/src/env.jswhen adding new variables.

Furtherinformation about environment variables is available here.

A cleaner and improved version of this section is coming soon. Stay tuned!

In the 1.1.0 Relivator release, the.env.examplefile was greatly simplified and will be streamlined even further in upcoming versions. We aim to ensure that unspecified values will simply deactivate related functionality without halting app compilation.

Payments

Refer to the.env.examplefile as the guide for where and how to get all the important environment variable keys for Stripe, including webhooks for both localhost and deployment.

Locally, install theStripe CLIand run the commandpnpm stripe:listento initiate the Stripe webhook listener. This action connects Stripe to the account and generates a webhook key, which you can then set as an environment variable in Stripe's settings.

When testing Stripe, you can use its test data:4242424242424242|12/34|567|Random Name|Random Country.

Please refer to thesrc/app/api/webhooks/stripe/route.tsfile for more details on how Stripe works in the app. You can also visit theofficial Stripe repository,where you'll find a lot of useful information.

Database

Relivator usesDrizzle ORMfor database management. By default, the project usesNeon(Serverless) withPostgreSQLas the database provider. The project has already followedDrizzle's guideon how to set up Drizzle with Neon Postgres.

August 4, 2024: Hot Update:

If you useneonas your database provider, you no longer needpnpm db:studio;simply use Drizzle Studio onNeon's website🎉

For development databases without important data, you can usepnpm db:push.For production databases containing important data, it is recommended to usepnpm db:generatefollowed bypnpm db:migrate.

Drizzle Kit lets you alter you database schema and rapidly move forward with apnpm db:pushcommand. That’s very handy when you have remote databases like Neon, Planetscale or Turso. The 'push' command is ideal for quickly testing new schema designs or changes in a local development environment, allowing fast iterations without the overhead of managing migration files. ©Drizzle Team

Drizzle Team:If you want to iterate quickly during local development or if your project doesn’t require migration files, Drizzle offers a useful command called drizzle-kit push.When do you need to use the ‘push’ command?1.During the prototyping and experimentation phase of your schema on a local environment.2.When you are utilizing an external provider that manages migrations and schema changes for you (e.g., PlanetScale).3.If you are comfortable modifying the database schema before your code changes can be deployed.

Note:NEXT_PUBLIC_DB_PROVIDER was removed in Relivator v1.2.6. To switch the provider from Neon, modifydrizzle.config.ts.To use MySQL or LibSQL providers, update the files insidesrc/db.An automatic switcher is coming in Relivator version 1.3.x.

The instructions below may be outdated, so please double-check them! We will fully update this README.md with the Relivator 1.3.0 release.

Relivator is designed to effortlessly support both MySQL and PostgreSQL databases. While PostgreSQL andNeonare the default configurations, switching to MySQL provided byRailwayorPlanetScale,or to PostgreSQL provided byRailwayorVercelis straightforward. Adjust the database configuration insidedrizzle.config.tsand thesrc/db/*files accordingly. Although Relivator is optimized for these providers, other providers compatible with Drizzle and Auth.js (next-auth@beta/NextAuth.js) might also work with some additional setup. Full SQLite support is coming soon.

To set up theDATABASE_URLin the.envfile, refer to.env.example.Initiate a new database or propagate schema changes by executing thepnpm db:pushcommand. This ensures that all changes made to the schema files insrc/db/*are mirrored in the selected database provider.

For database migrations, use thepnpm db:generatecommand, review thedrizzlefolder to ensure everything is correct, and run thepnpm db:migratecommand when ready. If necessary, usepnpm db:dropto manage reversals in a controlled way.

If you used Relivator before v1.2.6, you may remove thedrizzlefolder inside the root directory.Possible outdated information:Do not manually delete files from thedrizzledirectory. Instead, use thepnpm db:dropcommandif a migration needs to be reversed.

We ensure consistent database configuration by using the setup insidedrizzle.config.tsand exporting configurations insrc/db/index.tsandsrc/db/schema/index.ts.When selecting a database provider, comment out or remove unneeded providers in theswitch-caseof these files and remove related schema files as necessary. Additional adjustments in other files may also be required. An automatic switcher is coming soon in the Relivator v1.3.0 release.

Historical context:In Relivator v1.1.0, we aimed to provide simultaneous support for both MySQL and PostgreSQL for Drizzle ORM. In future releases, we plan to integrate Prisma ORM, making the project even more inclusive.

Product Categories and Subcategories

To edit product categories, please refer to theMySQL,PostgreSQL,orLibSQLcorresponding schema file in thesrc/db/schemafolder.

After editing these files, don't forget to runpnpm db:pushto apply the changes. Or runpnpm generateto create a sharable SQL, which another developers may apply withpnpm migrateto edit theirs database tables easily.

Then, simply update the category names and subcategories in theproducts fileaccordingly.

Additional Notes About Stripe

The instructions below may be outdated, so please double-check them! We will fully update this README.md with the Relivator 1.3.0 release.

The Stripe webhook API route does not need to be invoked explicitly within the application, such as after a user selects a subscription plan or makes a purchase. Webhooks operate independently of user actions on the frontend and serve as a means for Stripe to relay events directly to the server.

When an event occurs on Stripe's end, such as a successful payment, Stripe generates an event object. This object is then automatically sent to the endpoint you've specified, either in the Stripe Dashboard or, for testing purposes, in thepackage.jsonvia the Stripe CLI. Finally, the server's API route receives the event and processes it accordingly.

For example, when a user selects a subscription plan, you would typically first use Stripe's API to create either aPayment IntentorSetup Intentobject. This action can be executed either on the client-side or the server-side. The frontend then confirms the payment using Stripe.js, thereby completing the payment or subscription setup process.

The webhook is automatically triggered based on these events. There's no need to manually "call" the webhook route; Stripe manages this for you according to the settings in the Stripe Dashboard or in thepackage.jsonfor local testing.

After deploying the app, don't forget to specify the webhook URL in the Stripe Dashboard. Navigate to the Webhooks section and enter the following URL:https://thedomain /api/webhooks/stripe.

In summary, there's no need to specify the path to the Stripe API route where the user selects a subscription plan. The webhook mechanism operates independently and is triggered automatically by Stripe.

Internationalization

Stay tuned for further expansions to this section in the future.

The instructions below may be outdated, so please double-check them! We will fully update this README.md with the Relivator 1.3.0 release.

Multilingualism at Bleverse Reliverse vision is revered. We adore discussing it and plan to delve into the topic of Next.js 15 App Router internationalization in future writings.

Presently, all languages are machine-translated. Future revisions by native speakers are planned.

useTranslations works both on the server and client; we only need the getTranslations on async components.

Currently not available.Usepnpm lint:i18nto verify the i18n files. The tool attempts to rectify issues when possible, offering features like ascending sort. No output means everything is in order.

We are usingnext-intlfor internationalization. Sometime we can use beta/rc versions as needed. Find more information about ithereandhere.

How to add a new language

The process described below will be simplified and automated in the future. Please let us know if you have any further questions regarding the current process for adding languages.

We will need ani18n code(in the formatlanguage-country;the language code alone is sufficient, but it's not optimal for SEO). For example, let's take Chinese, for which I know the codeszh-cn/zh-tw/zh-hkare used.
Open themessagesfolder and create azh-cn.jsonfile with the example content:{ "metadata": { "description": "Thành lập càng cao hiệu, càng hấp dẫn người thả càng có lợi nhưng đồ tại tuyến cửa hàng: Sử dụng Relivator" } }.
Now opensrc/i18n.tsand add"zh-cn": zh_cnwith the appropriateimportat the top.
In the filesrc/navigation.ts,add the corresponding values tolocalesandlabels.
Runpnpm devand review the landing page header. If it appears correctly, you're ready to go.
Optionally, I recommend using the VSCode extensioni18n Ally,which makes machine translation easy.
Also optionally, installspecific CSpell languagefor full support of this language in VSCode (when using the "Code Spell Checker"extension). If the language is not available, try to find a word dictionary file on the web or make a new one (see CSpell docs).

By the way,if the country flag is not displayed:opensrc/localization-main.tsx,go toLocaleFlagIconand add theelse if.Please visit theflag-icons library websiteto see the code for the missing icon. The example forzh-cnwill be:} else if (baseLocale === "zh" ) { return <span aria-hidden= "true" className= "fi fi-cn mr-2" />; }

Please be aware that both the "i18n Ally" VSCode extension and manual systems like "Google Translate" may incorrectly translate variables. If you encounter an error like this: Original Message: 'The intl string context variable "Phân loại" was not provided to the string "Mua sắm tốt nhất { phân loại }" '. This error occurs because we have { phân loại }, but it should be {category}. To verify the correct variable, refer to the en-us.json file.Certainly! So the correct version for this specific case will be:

{
"categories":{
"buyFromCategories":"Từ tốt nhất cửa hàng mua sắm {category}",
"buyProducts":"Mua sắm ${category} phân loại sản phẩm",
"buyTheBest":"Mua sắm tốt nhất {category}"
}
}

Currently supported locales (you can add the own manually):

de, en, es, ms, fr, hi, it, pl, tr, uk, zh.
de-DE, en-US, es-ES, ms-MY, fr-FR, hi-IN, it-IT, pl-PL, tr-TR, uk-UA, zh-CN.

Principles, Design Decisions, Code Insights, Recommendations

«There are a lot of impractical things about owning a~~Porsche~~Relivator. But they're all offset by the driving experience. It really is unique.~~Lamborghinis~~create-t3-app and~~Ferraris~~Vercel Store come close. And they are more powerful in specific cases, but they don't handle like a~~Porsche~~Relivator.» ©~~Kevin O'Leary~~@blefnk

We're continuously improving this section. Contributions are welcomed!

Our starter aims to be a rich resource for developers at all stages of their journey. Within the comment blocks and dedicated sections at the end of select files, you'll find valuable insights and clarifications on a wide array of topics. Contributions to enhancing these educational nuggets are highly encouraged!

Principles (W.I.P):

Prettier's principle over linters related to developer experience (source): "You end up with a lot of red squiggly lines in the editor, which gets annoying. Prettier is supposed to make you forget about formatting – and not be in the face about it!"
Every file and component should be built consciously, usingKISS/DRY/SOLID/YAGNI principleswith a certain sense of intelligence, and with performance in mind.
We need to think of the project as if it were a planet with its own continents, countries, cities, rooms, individuals, entities, etc.

Advanced Environment Variables:

The.env.examplefile covers all the essential variables for a fully functional website, tailored for beginners. However, if you require advanced configurations, you can modify any value in the.envfile as needed.

About the Plugins Folder:

This folder contains optional plugins for Relivator. Developed by @blefnk and other contributors, these plugins extend functionality and provide additional features. If you find that certain plugins are not beneficial for the project, feel free to remove their corresponding folders.

Function Over Const for Components:

We advocate the use of thefunctionkeyword instead ofconstwhen defining React components. Usingfunctionoften improves stack traces, making debugging easier. Additionally, it makes code semantics more explicit, thereby making it easier for other developers to understand the intentions.

Personal Recommendations:

We advise regularly clearing the browser cache and deleting the.nextfolder to ensure optimal performance and functionality.

Currently, we don’t utilize Contentlayer due to its instability with Windows. Therefore, we're exploring options for its usage in the.envconfiguration file. Future plans might involve developing our own solution for content writing. Integration with external providers, such as Sanity, may also be a future feature, with corresponding enable/disable options.

NOTE from theContentlayer Issues Page:Contentlayer doesn't work well withnext.config.mjs,so you need to havenext.config.js.Other libraries may also require this. If you're sure you need.mjsand don't plan to use Contentlayer, rename it.

Project Configuration:

Thesrc/app.tsfile hosts main configurations to modify website contents and settings, enabling you to:

Control the content presented on the website.
Adjust various settings, such as deactivating the theme toggle.
Manage generic site-wide information.

Customize this file as per the requirements.

Authentication:

Setting up authentication is straightforward.

You can configure available sign-in providers for Clerk in thesrc/app.tsfile.

Please remember that Clerk fully works with third-party services like "Google PageSpeed Insight" only when domain and live keys are used.

This section will be implemented soon.

TypeScript Config:

In thetsconfig.jsonfile you can set the options for the TypeScript compiler. You can hover over on each option to get more information about. Hint: You can also press Shift+Space to get auto-completion. Learn more by checking the official TypeScript documentation: @seehttps://typescriptlang.org/docs/handbook/tsconfig-json@seehttps://totaltypescript /tsconfig-cheat-sheet.

Next.js has built-in support for TypeScript, using plugin below. But while you usepnpm build,it stops on the first type errors. So you can usepnpm typecheckto check all type warns/errors at once.

Config includes Atomic CSS plugin in the style attribute. Type-safe static styles with theming, responsive variant support, and no bundler integration. @seehttps://github /tokenami/tokenami#readme.

You can enable strict type checking in MDX files by settingmdx.checkMdxto true.

These options below can be dangerously set to false, while you're incrementally move to full type-safety.

{
"alwaysStrict":true,
"noImplicitAny":false,
"strict":true,
"strictNullChecks":true,
"strictPropertyInitialization":true,
"verbatimModuleSyntax":true
}

How to Deploy the Project:

Please check theHow to Install and Get Startedsection before making the initial deployment.

Consult the deployment guides forVercel,Netlify,andDockerfor further details. The project has only been tested on Vercel; please inform us if you encounter issues with other deployment services.

Styling, Design System, UI Components:

TODO: Implement design system and style guide.

By default, this project includes components from various libraries, as well as unstyledshadcn/uicomponents. Shadcn/ui even allows you to generate new UI components using its CLI (where "button" can be any Shadcn UI element):pnpm dlx shadcn-ui@latest add button.

W.I.P. — Usepnpm cssto watch forCSS tokensin accordance with the project's design system.Tokenamiand Figma are anticipated to be utilized for this concept. For additional information, refer to points #33 and #90 in the Relivator's Roadmap.

Package Manager Compatibility:

Relivatorcan already harness some fantasticBunfeatures. For this starter, we currently recommend usingpnpm.Full pnpm support and compatibility will be shipped as soon asReliverse'sRelivatorachieves full similarity with Relivator.Section expansion coming soon.

Recommended Things to Learn:

More learning resources can be found within the files of this repository.

Contributing

This section will be enhanced soon with simpler steps to get everything ready.

Contributions are warmly welcomed! We express our gratitude to everyone who has contributed to this repository. the contributions will be recognized. If you have any questions or suggestions, please open an issue. For more information, see thecontributing guide.

Please visitthis special wiki pageto view the full list of credits and contributors. To contribute to Relivator, follow these steps:

Begin by reading the "How to Install and Get Started" section on the top of this repository, and by readingCONTRIBUTING.mdpage.
Create a branch:git checkout -b <branch_name>.
Make and commit the changes:git commit -m '<commit_message>'
Push to the original branch:git push origin <branch_name>
Submit the pull request.

Alternatively, check the GitHub docs onhow to create a pull request.

Roadmap

The roadmap below may be outdated. We will fully update this README.md with the Relivator 1.3.0 release.

The roadmap below outlines the key features and improvements planned for this Next.js Reliverse starter and for Reliverse CLI.Items not marked may already be configuredbut might not have been thoroughly tested. If you spot any issues, please open an issue.

License

This project is licensed underthe MIT Licenseand is free to use and modify for your own projects. Please visit thelicensefile for details. Since this project is under a free license, the author reserves the right to include referral links. The author may receive compensation from these links if users follow them and, for example, pay their first bill. Thank you all for your understanding!

🌐https://relivator

Changelog

a.k.a. What's Happening?!

1.2.6 - August 4, 2024 – The Resurrection Update

Below you can see a small copy ofthe article from Reliverse Docs,which is possibly outdated. Please refer to1.2.6 Release Notes Page on GitHubor tothis blog postto read the most recent version. Reliverse Docs also has translations of the article into other languages; and will contain even more information about Relivator than this README.md, including notes from all past and future releases.

Relivator is Back with Version 1.2.6!🥳

We are excited to announce the release of Relivator 1.2.6! This version marks the end of the "all-in-one" approach as we prepare for a more modular future with Reliverse CLI starting from version 1.3.0. The 1.2.6 release includes significant updates, especially in the database logic. The README.md has been significantly updated. Moving forward, we will introduce Canary, Release Candidate (RC), and General Availability (GA) branches for better version management. 1.2.6 will serve as a foundation, helping us transition more smoothly to the release of those 1.3.0's branches.

Major Changes and Improvements

Database Updates:This is the last release that simultaneously supports PostgreSQL/MySQL and Auth.js (next-auth@beta/NextAuth.js)/Clerk integrations.
React 19 Preparation:Work has commenced on upgrading from React 18 to React 19.
Updated Libraries:The project now uses next-auth v5, clerk v5 and optionally supports tailwindcss v4. Refer to the updated README.md for more details.

Migration Guidance

Starting from version 1.3.1, we will provide comprehensive guides for migrating from older versions. The usual migration process involves reviewing commit changes and integrating necessary updates into your custom code. However, due to the extensive changes in versions 1.2.6 and 1.3.0, this method is not feasible. We recommend reinstalling the project and transferring your custom features from the previous version to the new version of starter. Thank you for your understanding!

To make the migration as smooth as possible, it's recommended to create a "cluster"folder in"src"and moving all your custom code there. If needed, you can adjust the paths using theFind and Replacefeature in VSCode. This will make it much easier to save and transfer your custom code to Relivator 1.2.6.

Default Database Change

Neon PostgreSQL is now the default database instead of PlanetScale MySQL, as the latter no longer offers a free tier. If you require MySQL,Railwayoffers a more affordable alternative with a $5 credit without requiring a credit card. Note that this version has been primarily tested with Neon PostgreSQL.

Security and Code Improvements

Type Safety and Editor Autocomplete:This update enhances type safety and editor autocomplete for Drizzle ORM libraries.
Prettier Replaced by Biome:Prettier has been removed in favor of Biome. The Prettier config will be removed in the next version from theaddons\scripts\reliverse\relimter\core\tempfolder. You can re-add it by running thereliversecommand starting from Relivator 1.3.0.

Reliverse Scripts Transition

Reliverse scripts have moved from the "unknown viability" stage to the "unstable" stage. As always, use them at your own risk and make backups. These scripts are now located in theaddons/relimter/[core| Python ]folder. Most scripts require Python to be installed.

For more details on this update, you can read my detailed posts in the Relivator thread on Discord. Start withthis message.

Thank You So Much

If anyone have any questions or issues, don't hesitate to contact me, means @blefnk, on Discord or GitHub. For more information about 1.2.6 and 1.3.0, please visit#⭐-relivatorchat on the project's Discord server and theGitHub Issuespage.

Thank you for your continued support and happy coding withReliverse Website Builder v0.4.0andRelivator Next.js Template v1.2.6!

Release Notes 1.2.5-1.0.0

This is what happened before 1.2.6 version:

v1.2.5 — 27.02.2024

Hello! I, @blefnk Nazar Kornienko, finally have the opportunity to get back to working on Relivator after a month of exams at university. Thanks to all the new starter users! The project already has over 520 stars, 110 forks, 20 repository watchers, and 45 users in Discord - that's really cool and exciting!

I also want to thank the active Discord users of the project:codingisfun, el_ade, righthill, nyquanh, spacecoder315, adelinb.Thank you to everyone who creates PR/Issues and everyone else who actively uses the starter, whose nicknames I don't know. Your feedback and contributions are incredibly valuable for the development of the project!

Since there hasn't been an update in over a month, I'm going to make the transition to the next major version smoother. Therefore, version 1.2.5 has been released to simply refresh the dependencies and other minor details and README a bit. This small update will also allow me to check if certain users continue to have the individual strange problems they reported.

If everything goes well, the next update will already be version 1.3.0. By the way, I'm working on 1.2.x and 1.3.0 in parallel, like in big studios, haha. But please note: some files and lines of code was disabled by default for this version to fix and check some things. By the way, the third digit means that this update is not mandatory, but still recommended. And Relivator 1.3.0 may or may not come with a canary version of React/Next.js to start preparing for the upcoming release of React 19.

Well, that's all for today, all the best to everyone, and may yourpnpm latestandpnpm apptsalways be successful! As usual, I try to write a short announcement, but it turns out a few paragraphs, that's how we live! 😄

P.S. And, please, don't pay attention that so many files have been "changed" in the latest commit, looks like it's because of Prettier I think, I only updated a few files, and if it's important to someone, please let me know in Discord's DM and I'll list you these files.

The Final Words

This Next.js 15 starter — Relivator — was crafted with love by@blefnk Nazar Kornienkoand the incredibleBleverse OSS community.We are deeply grateful for all your contributions and support for this project.

Happy coding! Embark on the coding adventure, learn, iterate, and most importantly – enjoy the process! Remember – this is a space of learning and experimentation. Dive in and savor the journey! 🚀🌌

Check outour other free Next.js 15 starter.This monorepo provides the tech used in the current starter and adds: Turborepo/Turbopack, Prisma, Valibot, Lucia, Clerk, and much more, as we experimentally attempt to combine all vital and widely-used tech. Think of it as: Reliverse (WordPress) + Relivator (WooCommerce) = 😍. So, start right now! Start today with Relivator!

🚀Ready to launch?Start building your project with Relivator and Reliverse as soon as possible! With one-click deploy on Vercel:

💻Prefer manual installation?Refer to the🏗️ Installationsection or just clone the project using the most classical way:

git clone https://github /blefnk/relivator.git

Name		Name	Last commit message	Last commit date
Latest commit History 38 Commits
.github		.github
.vscode		.vscode
messages		messages
public		public
src		src
.env.example		.env.example
.gitignore		.gitignore
LICENSE.md		LICENSE.md
README.md		README.md
biome.json		biome.json
bun.lockb		bun.lockb
components.json		components.json
drizzle.config.ts		drizzle.config.ts
eslint.config.js		eslint.config.js
next-env.d.ts		next-env.d.ts
next.config.js		next.config.js
package.json		package.json
postcss.config.js		postcss.config.js
reset.d.ts		reset.d.ts
tailwind.config.ts		tailwind.config.ts
tsconfig.json		tsconfig.json
unlighthouse.config.ts		unlighthouse.config.ts

License

blefnk/relivator-nextjs-template

Folders and files

Latest commit

History

Repository files navigation

Relivator 1.3.0-canary.7: Next.js 15 eCommerce Template

Introduction

The Huge Relivator 1.2.6 & 1.3.0@canary are Already Available

What About the Future? Any News on 1.3.0?

Sponsors

💚GitHub Sponsors🩵PayPal🧡Patreon💛Buy Me a Coffee🩷Ko-fi

💜Discord Server Boost

🖥️ Hire Me

🤝 Partnerships

Our Partners

🙏 Dear Audience, I Need Your Help

Installation

One-click Installation Method (find recommended method below)

Manual Installation: Short Method (find recommended method below)

Manual Installation: Detailed Method (recommended)

🎶 Recommendation

Scripts

package.json

Python

Useful Python Commands

FAQ

Details

Project Structure

Configuration

Payments

Database

Product Categories and Subcategories

Additional Notes About Stripe

Internationalization

How to add a new language

Principles, Design Decisions, Code Insights, Recommendations

Contributing

Roadmap

License

Changelog

1.2.6 - August 4, 2024 – The Resurrection Update

Major Changes and Improvements

Migration Guidance

Default Database Change

Security and Code Improvements

Reliverse Scripts Transition

Thank You So Much

Release Notes 1.2.5-1.0.0

The Final Words

About

Topics

Resources

License

Code of conduct

Security policy

Stars

Watchers

Forks

Releases 21

Sponsor this project

Languages