As of 2021, last commit from 2017.
Running:failed on Ubuntu 20.10 Node.js v14.15.3 with:Likely similar bullshit from: stackoverflow.com/questions/50111688/node-sqlite-node-gyp-build-error-no-member-named-forceset-in-v8object because the Node.js version is too new.
git clone https://github.com/Codaisseur/feathersjs-react-redux-ssr
cd feathersjs-react-redux-ssr
npm install
../src/create_string.cpp:17:37: error: no matching function for call to ‘v8::String::Utf8Value::Utf8Value(v8::Local<v8::Value>&)’
17 | v8::String::Utf8Value string(value);
| ^
If I try
nvm install v10
I Google error messages until reaching:and the next problem is: stackoverflow.com/questions/48513573/gulp-error-gulp-hastask-is-not-a-function
diff --git a/gulpfile.js b/gulpfile.js
index b931e06..24d2cc8 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -14,34 +14,34 @@ gulp.task('css', function() {
.pipe(gulp.dest('./dist'))
})
-gulp.task('css:watch', ['css'], function() {
+gulp.task('css:watch', gulp.series('css', function() {
gulp.watch('app/styles/**/*.sass', ['css'])
-})
+}))
gulp.task('moveAssets', function() {
return gulp.src('./app/assets/**/*')
.pipe(gulp.dest('./dist/assets'))
})
-gulp.task('build:revAssets', ['css', 'moveAssets'], function() {
+gulp.task('build:revAssets', gulp.series('css', 'moveAssets', function() {
var rev = new $.revAll()
return gulp.src('./dist/**/*')
.pipe(rev.revision())
.pipe(gulp.dest('./dist/public'))
.pipe(rev.manifestFile())
.pipe(gulp.dest('./dist'))
-})
+}))
gulp.task('build:cpServer', function() {
return gulp.src('./app/**/*.{js,ejs}')
.pipe(gulp.dest('./dist/server-build'))
})
-gulp.task('build:revServer', ['build:cpServer'], function() {
+gulp.task('build:revServer', gulp.series('build:cpServer', function() {
var manifest = gulp.src('./dist/rev-manifest.json')
return gulp.src('./dist/server-build/{components,containers}/**/*')
.pipe($.revReplace({ manifest: manifest }))
.pipe(gulp.dest('./dist/server-build'))
-})
+}))
gulp.task('build', function() {
runSequence('build:revAssets', 'build:revServer')
diff --git a/package.json b/package.json
index bcb29c3..86bd593 100644
--- a/package.json
+++ b/package.json
@@ -67,7 +67,7 @@
"redux-thunk": "^0.1.0",
"request": "^2.79.0",
"rewire": "^2.3.4",
- "run-sequence": "^1.2.2",
+ "run-sequence": "^2.2.1",
"serve-favicon": "^2.3.2",
"socket.io-client": "^1.7.2",
"superagent": "^1.4.0",
@@ -86,16 +86,16 @@
"concurrently": "^2.0.0",
"cross-env": "^1.0.7",
"enzyme": "^2.3.0",
- "gulp": "^3.9.0",
+ "gulp": "^4.0.2",
"gulp-autoprefixer": "^3.1.0",
"gulp-load-plugins": "^1.2.0",
"gulp-rev": "^6.0.1",
- "gulp-sass": "^2.1.1",
+ "gulp-sass": "4.1.0",
"gulp-sourcemaps": "^1.6.0",
"jsdom": "^7.0.1",
"mocha": "^2.4.5",
"nock": "^2.17.0",
- "node-sass": "^3.4.2",
+ "node-sass": "^5.0.0",
"nodemon": "^1.6.0",
"react-addons-test-utils": "^15.3.2",
"react-transform-catch-errors": "^1.0.0",
Last updated 2018 as of 2021, but still just worked.
Also uses webpack which is fantastic.
Gotta run github.com/feathersjs/feathers-chat first: github.com/feathersjs-ecosystem/feathers-chat-react/issues/5, then it worked:and on the other terminal:then visit localhost:3000/ and you can create an account and login, tested on Ubuntu 20.10. Data is stored on persistently.
git clone https://github.com/feathersjs/feathers-chat
cd feathers-chat
git checkout fd729a47c57f9e6170cc1fa23cee0c84a004feb5
npm install
npm start
git clone https://github.com/feathersjs-ecosystem/feathers-chat-react
cd feathers-chat-react
git checkout 36d56cbe80bbd5596f6a108b1de9db343b33dac3
npm install
npm start
TODO how to merge those two repos into a single repo.
If you disable JavaScript on Chromium, it stops working completely. There is a section on how to solve that at: docs.feathersjs.com/cookbook/express/view-engine.html but it does not cover React specifically. Codaisseur/feathersjs-react-redux-ssr might be good to look into.
Framework built on top of React.
Officially recommended by React[ref]:
Recommended ToolchainsIf you’re building a server-rendered website with Node.js, try Next.js.
gothinkster/realworld blog example by Ciro Santilli: node Express Sequelize Next.js realworld example app.
Basically what this does is to get server-side rendering just working by React, including hydration, which is a good thing.
Next.js sends the first pre-rendered HTML page along with the JavaScript code. Then, JavaScript page switches just load the API data.
Next.js does this nicely by forcing you to provide page data in a serialized JSON format, even when rendering server-side (e.g. the return value of
getServerSideProps
). This way, it is also able to provide either the full HTML, or just the JSON.Some general downsides:
- it does feel like they don't document deployment very well however, especially non-Vercel options, which is the company behind Next.js. I'm unable to find how to use a non Vercel CDN with ISR supposing that is possible.
- Next.js is very opinionated, and like any opinionated library it is sometimes hard to know why something is/isn't happening, and sometimes it is hard/impossible to do what you want with it unless they add support. They have done good progress, but even as of 2022, some aspects just feel so immature, some major-looking use cases are not very well done.
In theory, Next.js could be the "ultimate frontend framework". It does have a lot of development difficulties that need to be ironed out, but the general concepts, and things it tries to integrate, including e.g. webpack, TypeScript, etc. are good. Maybe the question is when will someone put it together with an amazing backend library and dominate and finally put an end to the infinite number of Js Frameworks!
In-tree examples at: github.com/vercel/next.js/tree/canary/examples
In order to offer its amazing features, Next.js is also extremely opinionated, which means that if something wasn't designed to be possible, it basically isn't.
No prerender with custom server? It forces you to write your API with next as well? Or does it mean something else?
TODO can it statically generate pages that are created at runtime? E.g. if I create a new blog post, will it automatically upload a static page? It seems that yes, and that this is exactly what Incremental Static Regeneration means:However, Ciro can't find any mention of how to specify where the pages are uploaded to... this is pat of the non-Vercel deployment problem.
- github.com/vercel/next.js/discussions/25410
- vercel.com/docs/next.js/incremental-static-regeneration
- github.com/vercel/next.js/discussions/17711
- www.reddit.com/r/nextjs/comments/mvvhym/a_complete_guide_to_incremental_static/
- github.com/vercel/next.js/discussions/11552#discussioncomment-115595
- stackoverflow.com/questions/62105756/how-to-use-aws-with-next-js
- github.com/vercel/next.js/discussions/17080
- github.com/vercel/next.js/discussions/16852
Can't ISR prerenter by URL query parameters:
That plus the requirement to have one page per file under
pages/
leads to a lot of useless duplication, because then you are forced to place the URL parameters on the pathnames."Module not found: Can't resolve 'fs'" Hell. The main reason this happens seems to be the that in a higher order component, webpack can't determine if callbacks use the require or not to remove it from frontend code. Fully investigated and solved at:
Overviews:
- www.reddit.com/r/reactjs/comments/8evy5d/what_are_the_downsides_to_nextjs/ 2017 What are the downsides to Next.js?
Integrations React integration:
- github.com/shakacode/react_on_rails: webpack and server-side rendering
- github.com/reactjs/react-rails Official on the React side only. Demo app linked from package: github.com/BookOfGreg/react-rails-example-app and how it fails: github.com/BookOfGreg/react-rails-example-app/issues/30... The related projects section has some good links:
- shakacode/react_on_rails
- github.com/hyperstack-org/hyperstack transpiles Ruby to JavaScript + React. What could possibly go wrong? :-)