I have a running ember.js frontend app. Also have a node.js backend app which can do basic CRUD operations from MongoDB. Using Postman I can see that my node.js app is returning JSON data properly.
I want my frontend to use the backend to do CRUD operations on MongoDB. I am new to ember.js so I want a guideline where I can understand to use the JSON data from the node.js app and use with ember.js frontend.
My ember.js app already is using a mock server. It has a "dist" folder inside.
My adapter/application.js file in ember.js frontend:
import DS from 'ember-data';
export default DS.RESTAdapter.extend({
namespace: 'api'
});
I want to use my localhost:3000 node server here. Do not know where to add it.
DS.RESTAdapter has a host property that allows you to configure the host used:
// app/adapters/application.js
import RESTAdapter from '#ember-data/adapter/rest';
export default RESTAdapter.extend({
host: 'https://api.example.com'
});
But I would not recommend to point that one to a local development server cause that reduces your flexibility. E.g. a team colleague of yours may want to start the local instance on another port. I would recommend to use the --proxy option of Ember CLI's serve command:
ember serve --proxy http://localhost:3000
This will proxy the requests to your local development server.
You may need to customize the adapter and serializer if your API isn't following the defaults of Ember Data's RESTAdapter and RESTSerializer. Please have a look in the guides for a quick introduction to do so.
Related
I manage to create Angular apps in general, but I do not understand how Angular and Node.js connect together.
Even on a local environment, you need to launch two things:
ng serve
node app.js
So how the two connect? Do you render the Angular app via Node.js? Do you render the app like this:
or like this:
But then there is the route problem, do you define routes via Node.js with app.get('/')
or via Angular with:
const routes: Routes = [
{ path: '', component: HomeComponent}
];
ng serve & node app.js will launch those two scripts at the same time.
Angular and NodeJS application connect over HTTP where NodeJS is the backend and the Angular is the frontend.
ng serve is the command to server Angular application on your local environment but when you'll deploy your Angular app in production, first you'll have to build the Angular app and serve the destination folder using Nginx or something else..
node app.js is the command you are using to launch your NodeJS server (in your case) which will start listen on some HTTP port (if you are using NodeJS Express correctly)
An example of connection between the two over HTTP is like this:
the Angular app issue an HTTP request to the NodeJS backend and the NodeJS server respond to that HTTP request to send data back to the Angular app.
regarding the routing, Angular is a Single Page Application (SPA) so it can handle it own routing requests as you showed and this is what you should use for your website (the frontend) most of the times. where the routes in your NodeJS application refer to your REST API routes, as in what functions your NodeJS server supports.
I think you should read on how to implement REST api in NodeJS and you'll find great detailed guides about it, and creating a single page application in Angular
My Vue app is set up using Vue CLI (Webpack) and it's working as it should. My NodeJS/Express REST API is also working properly. However, to run them simultaneously I now start a local server for each of them -- each with its own port. I would like to have both of them communicate over one port.
Localhost:8080 should point to the home page of my Vue App and the API requests should follow localhost:8080/api/...
In my production environment I use one and the same port/URL by serving the Vue App as a set of static files ('dist' folder). In my development environment I don't know how to set this up, however.
I looked around for answers online, but feel lost among all the different terms I have come across (.env, crossenv, nginx, cors) and that I am running in circles.
What would be a good way of setting this up?
Thank you
Edit:
I ended up creating three modes to run my application:
Development
I use one script in a package.json to start the frontend and backend server on different ports, using pm2 to run the servers in the 'background' rather than blocking further commands in the terminal/cmd. I use configured a proxy inside my vue.config.js to redirect my API calls made in the frontend to the right base URL and used cors as middleware to allow requests to my API from other domains/ports.
Staging
I use one script in a package.json to build the Vue app into a folder ('dist' folder inside my backend folder) that is a collection of static files and start the backend server. My backend is set up to know when I want to go into staging mode and then serve the static files in the 'dist' folder.
Production
I use one script in a package.json to build the Vue app into a folder ('dist' folder inside my backend folder) that is a collection of static files and push my backend (incl. the built static files) to Heroku.
Well if you need to run both on the same port you could first build your app so that you receive a dist directory or whatever your output directory is named and set up an express server that serves that app and otherwise handles your api requests
const express = require("express");
const path = __dirname + '/app/views/';
const app = express();
app.use(express.static(path));
app.get('/', function (req,res) {
res.sendFile(path + "index.html");
});
app.get('/api', function (req,res) {
// your api handler
}
app.listen(8080)
Assuming that node and the 'app' will always run on the same server you can just use a template library like ejs.
You would then just bundle the app and api together, assuming that the front-end is tied to the backend, realistically you would not even need to hit the API as you could just return the records as part of the view, however if dynamic elements are needed you could still hit the API.
Now, with that said, if the API is something used by many applications then it would probably make sense to build that out as its own microservice, running on its own server and your frontend would be on its own. This way you have separation of concerns with the API and Vue app.
I am starting out on React.js after learning Node.js using Express. But I don't know How to Link my Backend App to front end React files? Can someone provide me a simple solution to the problem
You can begin with this steps, you got a thousands of topics about to make a complete and solid infrastructure:
Initialise your node.js server with port, cors (if you need)
Learn how express work with node.js and create your first route
Initialize your react project with or without npx create-react-app
Create your first frontend component and fetch data from your API
Link : https://www.freecodecamp.org/news/create-a-react-frontend-a-node-express-backend-and-connect-them-together-c5798926047c/
I am new to reactJS. I am working on project which uses following :
Front-end : ReactJS
Backend : NodeJS (Express)
Front-end runs on port 3000
Back-end runs on port 8088.
I am planning to deploy application on amazon AWS.
What i am trying to do is load reactJS front-end when i make request on http://localhost:8088/
I know using axios we can make request on backend server and display fetched data.
What would be standard way of loading ReactJS front from the nodeJS ?
I'm not sure if this is the answer you are looking for, but generally in development you use something called proxy in your package.json in the client (react) folder:
{
// Other stuff
"proxy": "http://localhost:8088"
}
and then when you'd want to deploy you'd run npm build for your react folder and serve that generated folder called build. But as I said, you usually do that only when deploying your application onto server, not the actual development.
Also I'd suggest checking some of these videos, that are focused on deployment, because that is what I think you are asking, right ?
I am developing a shopify app so the reactjs handles the UI part and node-express handles the shopify auth things.
The tutorials in shopify site are
node, react and nextjs
node and express without reactjs
My concern is how to test the app without reactjs server side rendering with nextjs?
As we know node and react runs one seperate ports, so how can we handle the authentication flow with shopify?
How I am trying to work is
User enters app -> Node authenticates with shopify -> if auth success -> show react app.
Update : I am using ant design so ssr of ant design will be helpful.
Anyone please help me out with a solution.
After some research I got a simple solution and I am adding the links that give me solution.
React App is running in port 3000
Node server running in port 3001
Setup proxy in client package.json to localhost:3001
{
proxy: "localhost:3001"
}
Install http-proxy-middleware
$ npm install http-proxy-middleware --save
$ # or
$ yarn add http-proxy-middleware
Next, create src/setupProxy.js and place the following contents in it:
const proxy = require('http-proxy-middleware');
module.exports = function(app) {
app.use(proxy('/api', { target: 'http://localhost:3001/' }));
};`
6. That's all.
If using ngrok to make your localhost public, you may get Invalid Host Header error. Here is the solution.
ngrok http 8080 -host-header="localhost:8080"
ngrok http --host-header=rewrite 8080
https://stackoverflow.com/a/45494621/1445874
This 2 link gave me the solution.
When specified, "proxy" in package.json must be a string
https://create-react-app.dev/docs/proxying-api-requests-in-development#configuring-the-proxy-manually
It wouldn't be too difficult, you'd just have to set up Server Side Rendering with Express/Node in order to get react working. Next.js does this automatically saving you the time, but if you would like to do it yourself you can always.
You can follow this guide for reference - https://medium.com/bucharestjs/upgrading-a-create-react-app-project-to-a-ssr-code-splitting-setup-9da57df2040a
I'll do up my own example in a bit since I'm looking to do the exact same thing.