React/Vue (Or any other similar framework) MPA implementation - node.js

I am new to React and Vue frameworks. I am learning how to build simple SPA from courses, but there are no courses for MPA/SPA.
For example when I need website with 3 parts: Registration form, Login form, Dashboard
I don't want to use SPA and Router. I want to have those 3 sections served by back-end as 3 different websites. If you asking why, it is because I see this technique on almost every React/Vue powered websites (Instagram, AirBnB, Qualitista, ...)
Can you please explain to me what is best practice and how to implement this and if its worth making? Or am I supposed to just make backend API + SPA no matter what.

I think what you are referring to is called Micro Frontends https://micro-frontends.org but just like Micro Services, it is a solution to an organisational problem, not a technical one.
If you are not Instagram or Airbnb, you'll save yourself a lot of extra work by sticking with a monolithic architecture.
Next.js is a good place to start if you want to be guided into the pit of success https://nextjs.org

I don't know too much about this topic in particular. But after a little searching, this Universal Multi-Page React App looks like it might be a tutorial to do what you're interested in? Also found a little info in this Reddit post about Multi-page React Sites.
Also here's some info about how Vue.js does it from I'mOnlyVueman with a couple articles I found on the topic.
Companies use server-side rendering or preloading to bypass the
limitations of Vue with regard to SEO. Google cannot crawl Vue
components, so serving them from the server allows them to be indexed
before rendering.
Vue.js Server Side Rendering Guide
Server Side Rendering from the Vue.js docs
If you were to ask me a good example to learn multiple page apps I wouldn't go to React/Vue to do this, I'd use MVC. Microsoft has tons of tutorials if you're interested. Create a web app with ASP.Net Core and MVC
Hope this helps!

Related

react and node js - consultation

this is more of a question in free flow rather than code examples, because I need some guidance before I proceed with my project.
I did a quick udemy course on node, express, react and mongo back in March. The course was roughly about a month long. My effort was to start a project for a squash league community that I own in my city. Before starting the project, I did my research and decided to go with Node, express and mongo(mongoose). After 3 months, I am done with my project and pretty proud :).
While working along, I also had some ideas on how to add some social media aspects to my web app. So as Phase 2 I want to build that out.
Now the question. REACT obviously is a much better tool to build the social media website. So I was thinking to learn REACT a little more and then use it to build the social media aspect of my web app.
Is this a good approach? All the front ends of my app currently are built using HTML/css, node and ejs.
I basically dont want to rework on anything that I have built so far.
I am just trying to ask the experts if this approach is viable or will I run into any issues later. Please guide.

How do React & NodeJS work together?

Can you tell me more about the relationship between the two? I want to (for example) write a little tool which plays audio files on my raspberry pi. Would I then do the player and the players interface completely in React, and then just connect to node in order to get the actual files?
Or, more generally but the same thing, if I would want to write an application that does certain things (writes files, records audio, changes system settings etc.) that would all be done in nodejs, but if I want to have an interface I would use something like React?
I am a bit confused, but I hope this question is valid!
Node and React can be used together.
There is even the MERN stack that helps with that:
MERN is a scaffolding tool which makes it easy to build universal apps using Mongo, Express, React and NodeJS. It minimises the setup time and gets you up to speed using proven technologies.
See: http://mernjs.org/
But you can use React with any other Node framework, not only with Express. React can work with any REST API so whatever you use to build a REST API can be consumed by the frontend written in React.
Some other options include: Hapi, Restify, LoopBack. For more see:
http://nodeframework.com/
from the official React Documentation React is "a JavaScript library for build user interfaces". In very watered down terms (and I mean watered down) React could be thought of as a templating library (please don't shoot me for that).
What I've learned about React is it is more like the "V"iew in MVC. It provides you a way to present the user interface using JavaScript and JSX. With the little I know about from various tutorials, I really like working with React.
Yes, this two thinks can work together, I am currently working at such project. I will point out main think here. That is where you put your routing. Does it goes to Node.js server or to React Router. This is important because it defines where you application logic should be.
ReactTS is a scaffolding engine for React on ASP.NET Core. Very powerful, and very fast - will generate your entire application with a single button click. You can also customize the templates. Check it out here... http://bssdev.biz/DevTools/React-Turbo-Scaffolding-Free-Download

Any tutorials or guides for Shopify app development with node?

My company is wanting to migrate their entire site to Shopify. We use node for our backend, so we're hoping to integrate that into the site. I am new though, and not experienced with node or Shopify app development, so I was hoping to find a tutorial or guide, but it seems that almost all resources are specifically for ruby. Is there anything out there I'm just not seeing?
Bonus question:
Is express routing possible on Shopify?
The node-shopify-api library has some decent examples as well as being a very useful core of a Node based Shopify app.
Routing is possible only for apps attached at a proxy url.

How to build Restful API without using frontend javascript

I have been searching all over for a tutorial that could make a RESTFul API without using any frontend javascript to no avail. I am very new to Javascript/ web-development and have been doing many tutorials and mini projects to get myself acquainted with it.
This is a test for a job at a startup as they looking for an entry level developer. Their requirements are much different as they want me to use their in house build APIs.
What I am looking for is some help on how to get started building a RESTful API using node.js, express, Mongo and without using any frontend javascript. Thanks.
Recommendations for tutorials usually don't make good questions for Stack Overflow, but you might want to take a look at the following books. They helped me out quite a bit when getting started with Node:
Express Web Application Development
Advanced Express Web Application Development
RESTful Web API Design with Node.js
As others have commented, a REpresentational State Transfer API is implemented server-side. You could consume such an API from the client-side using JavaScript, but not build one on the client-side.
Express is a very popular web framework for Node, and you can certainly use it to build APIs, but you might also take a look at Restify. Hope that helps you out.

existing frameworks for a questionnaire style app for web and mobile

I have a project where I can work on rails or nodejs to build a questionnaire style app, where the admin can post questions, check for top score, average scores and the user can take the questions. I have a basic knowledge on both rails and node but not good enough to build a fully functional app. I am working on it, but would like to know any good frameworks that would help me make the building process quicker, either in rails or nodejs. I did come across devise and surveyor in rails. please do suggest good starting points or other frameworks that would be useful in both rails or nodejs.
How about using sth like https://github.com/patocallaghan/questionnaire-js
This is a purely (client) javascript framework (using MVC frameworks underneath, like Angular).
On server-side one would only need to validate and save the data.

Resources