Babylon + Next.js Setup Optimized for SEO, Load Speed & Developer Experience

Well, this part was successful :slight_smile:

Then Next.js version 10 that was used in the repo might not work for your OS. I cannot think of any other reason.

Unfortunately, you cannot just upgrade next.js to latest, they have breaking changes with each major version that needs testing, and updating next.config.js accordingly (which again, requires deep frontend/Webpack knowledge).

I’ve only tested version 10 on MacOS and Linux. The same setup runs 3Designer.app. You’d think it’s 2022, things should be easy… But it’s the opposite for frontend, they only get more and more complex each year, with new frameworks popping out left and right every month :joy:

Now with the coming WebGPU, we should see a lot more complex web3D frontend setups coming…
I shall officially mark this repo as tested on MacOS, Linux only, oversold it when I used the word fully tested xD

Perhaps someone else with Windows could help debug this because it’s near impossible for me to do that. On mine, everything works. (will test it on another mac as well).

I would like to test it on Mac.
Could you kindly tell which software I need to install?
(I’ve never developed on Mac so I really don’t know what is the best for Mac atm).

1 Like

Mac is very popular among frontend developers, exactly because of issues you experienced above.

It’s not an exaggeration to say that something which takes 5 minutes to setup in Mac, is an unknown factor in Windows :joy: (could literally take days or weeks to figure out).

Step by Step installation guide for Mac:

  1. Install Brew (it may ask you to install Xcode dev tools - do that first)
  2. 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

I don’t know your Mac setup, but 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

Thanks!
I’ll give it a try and let you know :slight_smile:

Next rimraf yarn lerna all work fine on windows btw. The problem is this:

Just delete that and change uses of “yarn delete” to “rimraf”.

Or change it node_modules/.bin/rimraf would probably work, but using full paths like that is not good

3 Likes

On Mac it runs without problems.
(with adding to .bash_profile as in your instructions).

1 Like

You can install nvm on windows with scoop too, i think i advocated scoop to you a few times:) lol

1 Like

I use nvm already, scoop is the next thing to try when there will be some time :slight_smile:

Thank you for testing, guys. I updated repo with rimraf fix, hope it works now on Windows.

After the last push the error log in Windows slightly changed

It’s something to do with your Windows, need to ask someone with Windows to debug.

Well, I have no problems with any other repos from Github…

2 Likes

We can only know for sure if the problem is with the repo, if you are able to run Next.js version 10.2.3 in Windows using Next.js official docs.

I only know the problem relates to your computer setup, because you were able to run it in MacOs. But whether the cause is Windows, your computer setup, or the repo itself, we don’t know.

1 Like

i forked and made it work on windows, plus i wanted to try setting up karma with chrome instead of jest with jsdom. working for me on windows. if there’s still a problem for you pm me, il help u fix whatever it is.

3 Likes

@jeremy-coleman Your version works with no hassle. Thanks!

Quick note for people who go with Jeremy’s repo, there is no bundle analyzer and no tree shaking, importing like this will bundle the entire Babylon library to your webpages, which may not be what you want:

What an amazing setup! Just like what I need to start my new project :laughing:
Can you please explain about the usage of each folder inside repos folder? (client, core, web)
I need to install axios, redux, and redux-saga so it will be inside web folder right?
Thanks before!

That will go to the core folder. The Usage is like this:

  • Core: common code to be shared across platforms (web, iOS, Android, Desktop, backend API, devOPs, etc.)
  • 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)
  • Web: specific client release for the ‘browser’ using Next.js. In a similar fashion, you can create a sibling ios or android folder using React Native, and they each only contain code related to that release.

F.Y.I. I do have ready made modules for axios (named as api), redux, and redux-saga (they are unfortunately, not well documented, and written and exported as ES6 by design). But it seems like you’re the kind of person who could appreciate best practices, and will benefit from it because it allows composing ready made modules to easily create a redux store in a few lines of code, in declarative manner.

2 Likes

I see, thanks for the info! :tada:

Wow super cool! If there is any documentation on how to use it, I will definitely use your package. But for my new project I will try to install axios redux and saga by myself as initial start. Thanks a lot!

1 Like