I want to build full-stack application with Nuxt.js. I am wondering where I should create my server-side inside Nuxt.js or maybe I should create separated project only for server stuff.
I am trying to set up my project but I do not know how I should do it. The application which I am building will have own front-end, back-end and also database (I will use MongoDB) but actually I do not know how I should start. I was reading a lot about SSR and Nuxt.js seems really good if am planing to use Vue.js on fronted. While creating nuxt app I can choose to use Express and then I can see server directory inside my directory structure does it mean that i should build all back-end inside this directory or maybe it is only for small stuff?
I have also another question what if I want to use Nest.js on back-end can i just use npm i -g #nestjs/cli and then nest new project-name inside my server directory ? I was looking also for this answer but almost all results in google for this type are about (comparison between Nuxt.js, Next.js and Nest.js).
It will be my first bigger full-stack project and I want to do it right but I am a really beginner in this so I am looking for answer from more experienced programmers.
You can run express or any node.js server you want inside Nuxt.js. When installing Nuxt.js with scaffolding tool create-nuxt-app, you can choose integrated server-side frameworks : Express, Koa, Hapi, Feathers, Micro, Fastify, Adonis (WIP). There isn't offical Nest.js integration, but you can easily find a starter kit on github.
With create-nuxt-app, if you choose to use any node.js server inside your nuxt app, you will see a server directory inside your directory structure, with the corresponding server-side pre-configured index.js file.
Here is my own feeling about it:
I think the inside solution make sense for a small SPA or Headless project (Ex: parse and serve files, a simple JWT Authentification, a small websocket server...), or for a front-end logic application that cannot fit in client browser and who are nothing to do with the database (like image or file computation).
But generally, this server run the database layer for your Nuxt application: a REST or GraphQL API. It can also run your business logic of your app, serve authentification, and more and more when project growth...
If you think about separation of concerns and microservices
architecture, do not use server inside Nuxt.js. Splitting both frontend and server will result more flexibility. You can host frontend and API in different servers.
So now, do nuxt.js really need a node.js server ?
Yes if you plan to use it in SSR mode, No if you plan to use it like a SPA or Static generated way. Docs here... .
In SSR mode, nuxt.js ask data to your API at the first rendering, and provide a complete SEO compatible page to the client browser or bots. It also provide all javascript that the browser need to navigate and fetch your API. For that, nuxt.js in SSR mode should run with node.js.
I assume you said "back-end" for your API and your business logic application, in this case, you should separate nuxt.js and your server. Two node.js instances to run both.
Related
I have made a web app using express and react, and I want to bundle it into a desktop application, is this possible using electron?
I recommend the tutorial at: https://www.electronforge.io/guides/framework-integration/react
This isn't too hard actually, you can find all instructions you need in https://www.electronforge.io/
To accomplish this, either your app keeps hosting it with express locally and electrons connects to localhost, or even better, do it by not hosting any servers and just keeping your JSX and html files in your project.
If you're using TypeScript and ES6, also consider taking a look here for some examples: https://www.electronforge.io/templates/typescript-+-webpack-template
This may be a dumb question, but is the default react app (created using npm create-react-app my-app) using node.js? I am confused because in my web development class at university, I had to download node.js to create react applications. However, I didn't have to do anything like creating a server or initiating a node.js file, which is described in w3school's node.js tutorial. Because of this, I found out that I don't even really know what node is used for, besides downloading packages like redux and whatnot.
create-react-app uses node.js for all of its dev tooling. Likewise, a lot of the tools you'll use in the React ecosystem (like webpack, prettier, npm), all run on top of node.js as well).
You'll most probably build your react app to a static file, in which case the production output will not require node.js, it will be html and javascript assets that can be served directly to a client.
Hope that helps! Let me know if you have other specific questions
Node.js is used for server-side while React.js is for the front-end part. So, no, you don't need Node.js.
Under development mode, yes. Create react app runs NodeJs with Webpack Dev Server to allow you get feedback when modifing files, start or stop the server.
I am creating my first app node express app with angular 7 on the frontend to be deployed in production. I have below question?
What folder structure is preferred, should I create separate
projects for node and angular or same project(server.js in the root
of angular project and server folder to create express server
files)? What is the preferred one and I have to checkin the project
in one folder of svn.
Should I use babel and create the node server code with es2015 or
continue with old approach?
Its all up to you, what I am doing is I have sepreate directory for Angular and Node projet
project
|
client - Your anguar project
server - Your Apis and server side coding (Only this folder require at productino level)
Then we can create a gulp file and task to gulp that Build my client
project and put that build folder inside the
server -> public
Now only server can be use to production where Build will be render as static.
And next to authentication and autherization process you can follow JWT based permission .
Generally I would say that separating your client and server code into separate projects is preferred so that you do not have to release both your client and server at the same time when you make a change to one or the other. The rest of my answer is based on the assumption that you would separate the two sides into different projects.
As far as structuring your server side Express-based application, check out this link for some guidance on how to handle your situation. See the answer to the first question about different approaches to how to structure your Express application for different deployment scenarios. Also, if you use the latest LTS version of node, you will not need to use a transpiler to convert your files to Javascript because the Node environment will handle that for you.
As far as structuring your client side Angular-based application, check out this link for a very detailed discussion about best practices for structuring your Angular application.
I would prefer following, in case in future you need to separate the API layer with client you can do it with ease,
project
|----client
| ---client-template //All UI code like .css/htmls and node process initiates from here
| ---client-angular // All the directives and controllers goes here
| ---client-service //Service layer, All the API call to server goes here
|----server
| ---server API's // separated by its own module if any
|--- you API modules and so on..
This will help you to have flexibility over client and server integration without any tight coupling. Also easy to maintain and debug.
Answer 1: you should make two separate folder/repository structure for frontend and backend.
let's suppose your application grows fast at that time you want to scale your backend and you want to host your Angular app as static web app using Amazon-S3 so at that time it will be very easy to manage this.
May you want to use CICD, in that case also it will be good if your separate folder so you can create separate CICD jobs for backend and frontend.
May be your company hired some developer which is either expert in frontend or in backend only. in that case your company don't want give them unnecessary code access. so separate repo will be an easy option for this case. (this may be Depends on your team and company's approach for development)
Answer 2: I recommend go for es6 or es6+ features.
latest node.js version is supporting some of the features of es6. for example
- spread operator
- destructing
- classes (you can use OOPs)
- arrow functions
- let, const
- async await and etc
you can use babel if any other feature which is not supported by node.js. there could be may reason for using babel, but i want to know which specific feature do you want to use with babel? so i can explain according to that.
I have used the following approach that bind the Angular Application and the Node server as a single unit.
Steps for creating the project structure is:
Create a new Angular project with the CLI.
Create a server.js file in the root directory of the project and configure it to render the contents of the dist/ folder on the / route.
You can refer the link for the server code: https://github.com/nikhilbaby/node-server
Running the server
I usually run the project with ng build && node server. This will make sure that the angular application is build first and after that node server is started.
I suffer a lot in the past with angular apps and social media, so I'm glad to see that Angular Universal is being developed.
Currently I have some apps that are Angular4 as front end, and Java with Spring as backend. As far as I know there are some ways to implement Angular Universal here but they seem pretty complex (at least is what I read). So I want to know if that is in that way or not...
But anyway, my main question here, is because I saw that in order to implement Angular Universal we should have (ideally) to make the backend with nodejs, how to structure these two technologies, I mean... Should I have Angular app as a frontend app and Nodejs app as a totally different backend app (just like Java) where both are connected with web services? Or should I served Angular4 SPA direcly from Nodejs views?
And where should I place Angular Universal here?
Now that Angular CLI v1.6 is out, there's native support for building Angular Universal into your projects easily using Node.js! Essentially, you would ng build --prod to create a dist/ folder, and then create a simple node back-end and connect to your dist/ folder containing your front-end code. This article gives a great step-by-step guide: Angular server-side rendering in Node with Express Universal Engine.
When you use Angular Universal, it is going to be a single process (Operating system process) that hosts and serves your Angular pages.
In production you may have multiple such processes behind a load-balancer.
Your back-end APIs (if developed in Javascript) may be hosted in the same Node server or in separate server.
The Angular Universal setup steps are detailed here in the official documentation.
However, I had a few wasted hours to find out the following point
Webpack 3 is not compatible with ts-loader versions higher than 3.5.0. At the time of developing this, the latest version of Angular CLI is 1.7.2 which uses Webpack 3.*. Hence, while setting up Angular Universal, install ts-config#3.5.0
Finally, here I have a seed project for Angular Universal. It uses Vagrant to locally setup the development environment. Also, by tweaking an environment variable in your local host machine, you can run it in a production mode in a Docker container. The steps to run it are detailed in the readme file.
If you refer to my Dockerfile in the above Github link, its entrypoint reads:
ENTRYPOINT ["pm2-runtime","start","/home/aus/dist/server.js"]
So, you see, it's just a singe command, and your app is up and running at port 4000. Of course you can use other command line parameters to provide memory limit, port and so on.
So I just started learning ReactJS and React Native.
I have some knowledge of MEN (Mongo, Express, Node). Up to this point, I learned how to res.render() files and pass objects in there.
Now what I need to do, is make MERN app. This app also needs to have Android and iOS version of it.
So far I learned that R stands for ReactJS, not react-native. Is there a way so it includes both? And where do I put react files when I have folder structure like from express-generator? Or is there a way they can be in completely different directories, and one calls the other via import?
It comes down to architecture I believe. The way I like to create the stack goes as follows.
You can create an API using Mongo/Express/Node that serves endpoints for your client app (created using reactjs, react-native and whatever other tech you want to include) to call using HTML requests. This would work for both mobile apps (using react-native) and desktop apps (using reactjs).
There's a couple different ways to deploy this. You can create 2 separate apps, a server app and a client app, which are both hosted individually by 2 separate hosts. This is useful because you decouple your front end code from your back end code. Also, you can have 2 separate directories for your code.
Another method of deployment would be to have your server serve your client files. This ones a little bit tricker, but you will be able to deploy your entire app inside 1 host so this option is also cheaper. I would suggest reading this article to figure out how to implement this and the file structure https://originmaster.com/running-create-react-app-and-express-crae-on-heroku-c39a39fe7851