Should I add a custom backend to my Next.js project? [closed] - javascript

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 1 year ago.
Improve this question
I have a fully-running express backend from my previous project. Having created a new Next.js project, now I have to make a critical decision: adding my express backend or use Next.js's default server.(with directory based routing). After reading Next.js doc and some other resources, I am comparing the pros and cons of each (some questions emerged too):
A) If I add my custom express server
✓ Availability of wide range of packages/libraries
✓ Easy usage of middlewares (no customization needed)
✘ Lose 'Automatic Static Optimization'( I didn't understand)
✘ Problems with SSR / SSG ( -? I am not sure)
✘ Lose directory based routing (this is ok)
✘ Unable to host on vercel (this is ok)
B) If I keep default Next.js server
✓ Host on vercel
✓ Automatic Static Optimization ( I didn't understand)
✘ I have to transform the routing system to directory based approach
✘ Some packages stop working or need replacemant
✘ Need to create a custom middleware handler
Which one should I do? I want a well-explained answer from someone who tried both ways. Thanks in advance.

Assuming your existing express application serves with some sort of API – RESTful, GraphQL, etc.
In my own experience, I had API and entire business logic live in the express application, including model layer, data layer, etc. Naturally, I had a lot of dependencies (like express itself, mongo, bcrypt, etc.)
What I noticed with Next.js is that it would automatically bundle those dependencies in the bundle that is served to the front-end.
It obviously increases bundle size
But also brings some dependencies that are not compatible with the browser environment
There is obviously a hack that allows filtering which packages end up in front-end bundle, however, naturally it's a hack that you'd need to maintain as the project grows. Also, we were not necessarily thrilled with directory based routing for the API.
In my project, we decided to keep the express app separate from Next.js app in a monorepo. Effectively, Next.js app would only fetch some data (for SSR) from the API and render it as needed, but Next.js did not have any BE logic except simple fetch calls.
Keeping two separate apps also requires certain maintenance; in our environment, we used Docker and hardened nginx to route requests between API and FE code. Essentially all calls to /api/ were routed to express app.

Related

How do my Vuejs frontend and my node express backend interact with each other and do i need the vue-cli?

I am trying to build a simple website with nodejs, express and vuejs.
In tutorials i saw people recommending having the frontend and the backend communicate through an API by using the vue-cli. (example). 1. Do People use this method in production as well?
I also saw that you can build the vue cli files into a /dist folder and move this folder into the backend. Then you can use the backend to serve the generated index.html (example)
2. After doing this, is vue.js still communicating with the backend through the api i wrote with the vue cli for development?
3. Do i have to change code in the backend to deploy the website this way, other than statically serve the index.html file that was build by the vue-cli? and lastly 3.Can i just npm install vue and use the provided vue.min.js in a scripttag and just lose some usablillity while developing?
I hope my question is understandable and i appreciate every answer.
The backend typically serves the frontend via REST API.
Your Vue app is completely separate from your backend. Most applications keep business logic in the backend and use the frontend as a view. For smaller projects, you can keep the logic in the browser.
To answer your question directly: No, the Vue CLI is not used for that. It's purpose is to enhance your development process.
Relevant topics you should learn about: Representational state transfer (REST), Single page applications, Ajax
Advanced / less relevant topics: GraphQL, Server side rendering, HTTP, web sockets, MVC

How to organize Javascript project to allow sharing of code between client SPA and Node server

I am developing an application which comprises a SPA front end and a Rest back-end.
To implement the Rest back-end I am using Node and Express.
Considering that both front-end and back-end are written in JavaScript (and TypeScript), I would like to share some code between these 2 parts (namely Interfaces and simple utils).
So basically my project is composed of three parts: Client, Server, Shared. Therefore I am inclined to have a project directory structure similar to this:
ProjecFolder
ClientFolder
.....
ServerFolder
.....
SharedFolder
.....
I am looking for suggestions on how best organize my project. I have done some research and I have found this interesting article which suggests to use a mechanism based on Gulp tasks that copy all files from SharedFolder into both ClientFolder and ServerFolder and then runs transpling.
I am wondering whether there can be an alternative approach or tools that perform what otherwise has to be configures as Gulp workflow.
My recommendation is to use a package manager tool. When you have dependencies, and the requirements of the server changed, you have to change the module. You don't want the SPA (frontend), to break, when you need to make changes to the server.
This is why package managers give you versions. Each module that depends on your shared code, can use a different version of it. You can use NPM for that. Build a module, publish it, and install it on your frontend and backend.
Many times, in production you split the frontend and backend. The frontend may exist in a file storage system (S3, Google Cloud Storage and similar), and the backend executed on your servers. Then it will be harder to use the same files on both systems.

Using Require with React in a web page without node [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 6 years ago.
Improve this question
I know this might be a silly question to some of you, but I am beginner in React, and I wish to create a really simple application.
I found a sample in which every component is saved in a separate js file, which looks very good for modularity and re-usage.
The only thing I need to take care of now is using export/require. However, I don't need to be dependent on nodejs. I just need a simple html/js application that can run on any cheap web server.
I read somewhere that I can use "Browserify", but after looking at it, it seems like a node library.
Is there any library that I can use from a web page (via cdn for example) that allow me to use require? If not, does that mean I can not separate react components in different files?
However, I don't need to be dependent on nodejs.
Use NodeJS. It is how React applications are designed to be built.
I just need a simple html/js application that can run on any cheap web server
NodeJS is only required at build time. You run it on your development workstation. The output is static files that you can upload to any webserver.
(NB: React applications are often designed to make HTTP requests to get dynamic data. Some tutorials cover using Node to build a server to listen for and make responses to those requests. Make sure you don't conflate the program to transpile the React application to ES5 (which runs at build time) with the program to run a webserver (at runtime) even if both are written using Node).
If you don't want to use Node, you can use webpack: https://webpack.github.io/
you will generate a static/bundle.js . If you want to learn more about it, I sugest http://survivejs.com/
What you need is a build step that packs the separate files into one or more packages that can be loaded in the browser.
Browserify can be used to do that, but WebPack is also popular.
These tools require some configuration, so I think that the best way to start is with a tool like create-react-app which is easy to install and has commands for developing as well as packing your app for deployment.
It uses webpack internally (along with some other tools) but saves you the hassle of configuring it yourself. If at any time you need advanced configurations beyond what create-react-app provides, it has an 'eject' command that exposes the raw configuration files.
Getting started is simple (taken from their readme):
npm install -g create-react-app
create-react-app my-app
cd my-app/
npm start

What is the workflow when including scripts in web pages with npm? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 6 years ago.
Improve this question
There are many JS libraries and frameworks (e.g. jquery) that suggest doing this:
npm install foo
This gives you a node_modules directory in which there would be a foo directory. For most JS libraries that are meant for use in web pages, there will be a dist directory inside consisting of the required JS files that can be used.
I can now include JS with something like <script src="/node_modules/foo/dist/foo.js">, but I haven't found a single website doing that. Of course, this folder could be symlinked to something like js and then that could be used as js/foo/dist/foo.js, although I'm not sure if this is a good idea or whether it is even done in real life.
To me, copying scripts from online sources and putting them in my project repository seems like a better idea, although the advantages of automatic package management are lost in that case.
I do understand the workflow of npm when developing node.js-based server side applications, however, I'm having trouble understanding where the case involves scripts to be included in web pages. What exactly is the workflow in such cases?
Well, do use NPM installed scripts in a web you have to use some bundler/builder which adds additional layer package management in your application. This would allow using modules like in server side. After bundling your modules into single or multiple chunks include these in your web like any other JavaScript files.
There are multiple tools for such job:
http://browserify.org/
https://webpack.github.io/
http://rollupjs.org/
Loading JavaScript in the browser is usually done through a module system, for which there are several competing standards (AMD, CommonJS) and implementations. One such implementation is Browserify, which assembles (at build time) the scripts you actually require into a single bundle.js file, which you can then easily include in HTML. (Other module systems work differently, for instance by loading each file separately when it is first needed).

Angular 2 and NodeJS project setup [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I've got some basic questions concerning the project structure of a MEAN-app including Angular2. I've followed the starting tutorial of angular.io to build a really basic Angular2 app. Now I try to integrate this app inside a NodeJS project following this tutorial. The problem is that this tutorial was written at the time of the first Angular.
My questions are:
where should I put the npm packages of my Angular2 app? Inside the
public folder (so the app has an own packages.json) or inside the
node packages.json?
how should the tsc compiler should be implemented?
Bruno
I've had a very similar problem, when first starting to migrate towards angular2. The Angular.io tutorial uses System.js for its modules, which is basically incompatible with Node, which uses CommonJS. This leaves you with two options.
Setup the Typescript compiler and Node modules for Client and Server individually.
Use CommonJS modules with something like Browserify on the Client.
Now for me, only the second option is a good option. Setting things up twice defeats the whole purpose of having the same language across Client & Server.
I have prepared a Boilerplate for Angular 2 to start with Browserify quickly.
You can check it out right here.
Now all you have to do is create a public folder for your client app and also create static routes for your node modules. It could look something like this:
app.use(express.static(__dirname + '/public'));
app.use("/node_modules",express.static(__dirname + '/../node_modules'));
Personally I use a VS Code Task to compile my Typescript and then use Watchify on the client side to bundle it all together. On the Server Side I use nodemon to watch for any changes and restart the Server on compile.

Categories