This is a production ready mono-repository setup for Babylon.js using Next.js server side rendering.
It is suitable for small projects, and scales to large apps without suffering performance or ease of use.
For more details, please read this guide on how to optimize your Babylon + Next.js production build for SEO and Blazing Fast Page Load Speed .
- SEO Friendly
- Load Fast to achieve “A” Grade Page Speed score
- Async Load Babylon.js to improve UX (user experience)
- Code Splitting with Tree Shaking to reduce bundle size
- An option to write in pure Javascript or Typescript (or mixing both)
- Intuitive developer experience with HMR (Hot Module Reload)
- Jest Test working setup
- Modular Architecture for a flexible, maintainable and scalable app
- Production ready with detailed bundle analyzer.
This is a platform-agnostic monorepository minimum setup boilerplate.
It has been tested and works with Node.js v12.22.1.
The setup uses Yarn Workspaces to easily scale to different clients (React Native for iOS, Android, Electron) or server (Node.js).
This way, you can maximize code reuse between platforms to enforce best programming practices.
- Install packages
yarn
- Run the app
yarn dev
- Run Tests
yarn test
- Build production bundle
yarn build
- Run Production build locally
yarn start
- Install Brew (it may ask you to install Xcode dev tools - do that first)
- Install frontend tools
# Install Node version manager
brew install nvm
# Install latest Node.js version 12
nvm install 12
# Set Node 12 as the default version
nvm alias default 12
# Install Yarn package manager
brew install yarn
# Install Babylon Project
git clone https://github.com/ecoinomist/babylon-next.git
cd babylon-next
yarn
yarn dev
If nvm
command isn’t working, you may need to add this in .bash_profile
:
# Node Package Manager
export NVM_DIR="$HOME/.nvm"
source $(brew --prefix nvm)/nvm.sh
Then in terminal:
source ~/.bash_profile
Windows users should install this template using yarn
, not npm
because it will probably produce errors with npm.
If you haven’t installed yarn, do this first:
# it doesnt work if using npm install --global yarn (according to some people)
npm i yarn
- /repos/core: common code to be shared across platforms (web, iOS, Android, Desktop, backend API, devOPs, etc.)
- /repos/client: common frontend code to be shared across platforms (i.e. if you create a reusable Babylon Camera React component, put it here, because Camera, and most Babylon rendering, will likely to be used in client side only)
- /repos/web: specific client release for the ‘browser’ using Next.js. In a similar fashion, you can create a
sibling
ios
orandroid
folder using React Native, and they each only contain code related to that release.