albert-gao/feathers-next-example

Use feathers with next.js

feathers-next-example

This is a setup about how to use feathers along with next.js.

What about the code

The feathers part are based on the code generated from the feathers-cli. Which I think should make people understand more easily(because I consider this as the official way).

Folder Structure

• client: next.js part;
• server: feathers part;

Including some optimizing and request handling tips.

How to dev

Normally, you just use npm run server:dev, then you can work on the server and client at the same time. It will run feathers.js. But any changes you made in the ./client/ part will be hot reloaded and reflect to the actual page.

If you only want to work on the client side, just call npm run client:dev

How to deploy

1. npm run client:build: To bundle the production ready code.
2. npm run server:start:prod: To start the server. (You might want to use PM2 or nodemon here.)

How to check it works

• Run the feathers server: npm run server:dev
• Open http://localhost:3030, see next page
• Open http://localhost:3030/users, see feathers.js error page
• Update ./client/pages/index.js, see the hot module reloading

Important

Every time you add a feathers service, make sure to add it to feathersServices in ./server/middleware/next.js like this:

const feathersServices = {
  '/users': true,
};

More details

See detail step by step in my blog

feathers-next-example's Issues

app.test.js seems to fail when yarn test is run

Cloning and running yarn test seems to fail too.

Passing the data through

Thanks for this repo and the accompanying blog. I just tried setting it up and was trying to figure out how to access the feathers services from the client to make data requests. Did you have a thought about how to do this? My first effort was to just const client = require('../../server/app') however seems to trigger a problem with webpack with the resulting error of

* child_process in ./node_modules/update-notifier/index.js, ./node_modules/worker-farm/lib/fork.js
* dgram in ./node_modules/native-dns-cache/lookup.js, ./node_modules/native-dns/lib/utils.js and 1 other
* fs in ./node_modules/babel-core/lib/transformation/file/options/build-config-chain.js, ./node_modules/cacache/get.js and 49 others

To install them, you can run: npm install --save child_process dgram fs

I have tried installing the missing modules but I think the problem is because server code isn't being included in the webpack bundle or something?

Dev workflow questions

Hi, thanks for your tutorial.

I just cloned you repo and I tried to add a feathers service 'in memory' to continue the tutorial.
But I am facing problems :

• When I run npm start, I have an error

 > Could not find a valid build in the '.next' directory! Try building your app with 'next build' before starting the server.

• I run npm run build to fix this
• Then run npm start, the server listen on http://featest-app.feathersjs.com

I don't understand. How can I listen on localhost:3030 to start server and client ?
Last question, is it possible to enable auto reload of server code ?

Thanks