Hi I want to deploy the jhipster frontend separated , can I do it ? or the correct way is to put it back in the same project with the backend.I can't find info on how to deploy it after been separated
Yes you can do it separately, you just need a web server to serve your frontend bundle and if you want to avoid CORS issues you should also configure it as a reverse proxy to your backend.
The web server could also be a CDN.
The reason why you don't find any JHipster doc on this is that it's not specific to JHipster.
Related
Build myself a Angular website and for my own learning curve, wanted to implement Angular Universal. Followed the tutorial: https://angular.io/guide/universal. Want to achieve that all the html is "prerendered" for better crawling/indexing by search engines.
But it looks like it needs a service worker or nodejs hosting to get this working? Isn't it possible with a shared/apache hosting? Or are there better ways to do this?
Thanks in advance!
You cannot serve the application with static files only. You must have a server that will render the HTML in every request.
Some of the options you can do is:
Use a cloud service like AWS Elastic Beanstalk
Launch a linux machine and serve through it (maybe with pm2, nginx)
For an example, I have one angular ui project that fetches values and perform operations.
I have one backend API project in .Net Core and now I want to reuse angular ui project with node js.
Is it possible?
How to configure it and which are the main points to take care that angular project support both.
How can I deploy it?
Angular is a client side application that run's in clients browser, as long as the REST API or service you connect has Same API endpoints and same object models and authentication etc everything will work as intended.
REST is platform independent like the web services and also language independent. It doesn't matter if you use .Net Core or some nodejs framework.
Once the angular application is build ( ng build --prod) you get a bundled application files in dist folder you can host these files in any web sever just like you host normal html file.
The only change you have to make in the the Angular application will be to change the host URL (if there is any change) normally configured in environments folder
Take help of environment file and change the api as per your requirement.
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.
GitHub repo: https://github.com/byeung2019/MIQSTechnologies
Hey guys,
This is my first time deploying a website online, so I'm confused and anxious of where to even begin.
My frontend is built using ReactJS, and my backend uses NodeJS/Express/GraphQL to fetch data from an external API (CryptoCompare).
My website works locally.
My frontend and backend each has its own unique package.json and .env file with its respective dependencies and dev dependencies.
Through my research it's been recommended to host the frontend using Netlify, and the backend with Heroku.
However, since this is my first time deploying, I'm confused about the following:
How to deploy the frontend and backend separately from the same project folder, with them having their own respective package.json file.
Would I need to rewrite code in index.js within the backend folder in order to connect my frontend GraphQL requests to my backend.
Thank you so much!
First of all this is a complicated question to provide an exact answer, you will have to google and learn few things. But here is a high level idea.
After developing any app using react or angularjs you can follow the build instructions and build the app. It is ng build --prod in angular for example. Then you just need the build to deploy and it does not depend on package.json
You have to deploy your backend app as it is and there is few options then you can follow most common is,
Using a proxy like nginx
Host your build inside the node backend
Here is a guide how to host your apps using nginx for nodejs and angular
https://www.journaldev.com/27234/nginx-reverse-proxy-node-angular
Hope you will get the idea.
My dad is customer of the hosting provider combell
Where he has the default package now I am wondering if I can put the Angular 5 application I am making on there. I called their support and they say it's not possible but what do I need then? Is it so special to find a hosting provider that has node.js on their servers or is there a way around so I can host my Angular application on a non node.js server?
To host an Angular application, all you need to have is a server.
It can be NodeJs, Apache, Nginx, ...
The only requirement is that you must expose your index.html file. If your application is bundled (via, for instance, ng buid --prod), then you won't have to do anything.
This answer is valid for Angular applications, as you asked. Keep in mind that if you need to add a back-end (which is not an Angular application), you will need some other things.
You just do ng build build and copy the content of the dist folder to any server. You may also do some additional configuration to re-route it to index and set the correct href. You can read more about it in the documentation.