I have a React application which is served by express.js. There is a component/library within the react application which is trying to use the aws-sdk for s3/cloudwatch functions.
My issue is that the aws-sdk fails to find credentials when the application runs. They are stored in an ~/.aws/credentials file, which operates correctly for other applications.
I've found that if instead of calling these methods directly in my application, I call a custom express route which calls them from my server.js, there is no credentials error.
I'd very much prefer not to have these additional routes and call my own application to perform these functions. Is there a fundamental concept I am mi-understanding here? Is there a for the application served by express to be able to read the filesystem correctly and read the credentials file?
Related
Is it possible to combine a Vue.js app with a restful API service?
New to Vue but written my first Vue/Typescript app that is a front end that consumes some public APIs, add extra logic and display results. All works – fine. Now I also want to have my own restful API interface.
I know Vue apps are SPAs, so when I ‘change page’ to myapp.com/page2, it is not fetched from the sever but rather the app just re-renders the display. But is it possible for those routes that are not defined, such as myapp.com/api/whatever, to be a restful interface? That is, consumes requests and return responses? And when hoisted, would a user have access to both a front-end and a back-end, even though the app is running client side?
Did start down this route using express.js but ran into issues as if I was trying to combine chalk and cheese. (Not lease, would need to change the node module to ‘commonJs’).
Would using Nuxt help? Know nothing about Nuxt … yet. Or must I go the traditional way, and write a separate back-end and change my front end to consume it.
I'm writing my first Node/React/Express/Next app.
I'm uncertain how to execute server side code when a request comes in.
When there's a request, I need to get some data off the server disk. I'm trying to do this from a javascript file in my pages directory, but the 'fs' module is not accessible from here. I guess that's because the browser must be executing the code (which is confusing for me because I thought next.js meant the server was processing the code and exporting the html back).
I've done much googling about this problem and can't seem to find an answer. Which is bizarre, because this must be one of the most basic requirements of a web app. Maybe the solution is so basic and I'm just overlooking the obvious?
Can anyone provide a brief explanation or pointers in the right direction on how to do server-side processing (eg reading a file from the servers disk) from a /pages/xxx.js file in a React/Express/Next app? Or in other words, how or where do I access the 'fs' module?
The error I get is "ModuleNotFoundError: Module not found: Error: Can't resolve 'fs' in /pages
thanks
Your next.js app is split in two pieces, the part running on the client and server (rendering the pages to HTML) and the part running only on the server (finding the pages and exposing them over HTTP).
What you want to do is possible only on the server and usually done in the realm of express, the routing framework. Next.js is designed to make it easy to create SPAs that do not need a backend but want server-side rendering.
However it does allow modifying the server-only component, if you need to. The documentation for that can be found in the "Custom Server and Routing" section of the docs.
You can then add API routes that the front-end can call to request data form the backend, e.g. by returing JSON that the app can store in the React state.
I have an existing backend with a REST API written using node.js/express.
I can call urls e.g. /getallhouses and get the corresponding JSON object.
Using a mobile app, this is rather straightforward as you just call the REST API and process the data.
As I need to also add a webapp e.g. with React.js, it seems more murky.
What is the best way of implementing this webapp strategy?
Creating a stand-alone react.js app which will be called by the user first and then is using the REST API like a mobile app and hosting that react.js app on a different server?
Or is it better to start from the already existing express/node backend and serving the initial index.html file by
res.sendFile(path.join(__dirname + 'views/index.html'));
and putting all react.js related code into views and letting the backend serving the required react.js app to the user?
The best way is probably that you create a react app with redux and compile it to a bundle with something like webpack. Then you could host your page completely static.
I'm trying to understand how a MERN app fully works, I've been reading about MongoDB, ExpressJs, ReactJs and NodeJs, I also understand how MongoDB, ExpressJs and NodeJs interact and how ReactJs works on its own, my question is simple (I think).
The question:
If I create an API, using Node,Express and Mongo, and I have an APP managed by React, both need a server (via express, I understand), then, how should I run the API and the React app at the same time. Do I need different URLs? should I configure different ports? how should I integrate them?
I really been reading a lot, but almost every tutorial is made locally (and I'm working in a server with Passenger and I can't change the way it starts), just for Node/Express(with pug or else)/Mongo or just React, and I don't understand how to connect the API and React.
Thanks
It depends on several factors: environment (e.g. development, production), and your control over the server. For development, you can have two different URLs and use something like Webpack Dev Server. Normally you would have the module bundler, e.g. Webpack, watching for changes in your React code. However, this can get more complex if you have Server Side Rendering.
For production, normally you would have the bundled file for your client side application already optimized and minified. If you can change your API, you could serve it statically in a new endpoint, for example: /static/bundle.js and request this endpoint from your index.html file, which will be sent by Express.js server when accessing /.
However, because you will probably want to have routes in your React app, your server will need to know how to handle the client app routes (for example app.get('/*', () => ...), and they could collide with your API endpoints. To solve this, you could:
Prefix your API endpoints with a namespace, e.g. /api/v1/...
Place the API in a different URL, port or subdomain. In this case you would indeed need to run these two servers in parallel. With Node.js, there are helpers to make this more convenient, e.g. concurrently.
Pulling out your concerns: API, React, and Integration for MERN app.
I use three approaches
1) Use foreman. With this, you can specify your API and Web Client in the Procfile. I used it here
2) Use a proxy to handle requests that require your API. So in package.json, you specify your API URL(your API must be running)
// package.json
.......
.......
"proxy": "<path to url:[port no if you're developing locally]>"
Check here.
And you can simply add a script to run your API and React concurrently.
3) Set your API and React app in a Docker container. mern-starter is a perfect place to check for this.
Hope this helps!
I have an application which uses nodejs as server and backbonejs as the frontend framework. As I know, both backbonejs and nodejs handle the url.
I have a question: for example, let say I have page called localhost/project and a page called localhost/details. When I load either of these pages, nodejs server should be called first, and then in the view.jade I have:
script(type="text/javascript", data-main="/js/bootstrap", src="/js/lib/requirejs/require-min.js")
which initiate the control of backbonejs. So, does that mean everytime that I load a NEW page (localhost/details --> localhost/project), I have to reload all the steps for initializing the backbonejs (requireJS work)?
Unless you have to do it differently, perhaps a better approach would be to use node.js as a REST API. I would use a framework like express. Then, in your Backbone code, hook your model and routes up to call your node API and update the views with the data it receives.
Unless you are doing any kind of processing on the server side, you can skip the node step and run your SPA's right off of Firebase or Parse.