Hi I'm new to React and having a bit of trouble with client-side routing.
I've seen in places that you can use react-router without a server instance like express or simple-server serving up the static files, but when I try to put something together I get this error:
[react-router] Location "/Users/<user>/Desktop/webapp-client/dist/index.html" did not match any routes
I would like to host the site as a static site e.g. Amazon S3 and cloudfront and connect to an NodeJS Express backend. I've seen that Angular 2 can route without having a server instance.
Could someone please shed some light?
You are completely right. If you will read this tutorial about react-router, you can realize that all files are static.
So problem is not in react-router, it is somewhere else (Amazon S3, NodeJS Express backend, etc.)
Related
I have an app which I had pushed to heroku a few days ago, where it works fine, but when deploying the app to Netlify, the app deploys but the graphQL connection throws a 404 error. Here are some images.
Here is the code I use in App.js
Is there anyone that knows how I can fix this? Much appreciated
Netlify doesn't run a app server like Heroku, it only runs a static file server. From your code, it appears that you're trying to serve a app that you could connect to and provide yourself with GraphQL access. This is not possible on Netlify, at least not directly.
The only server-like solution that Netlify currently provides in Netlify Functions. However, those are limited to 10 sec by default and provide, one-time data connection - not something that you could keep on using for GraphQL.
So if your requirement is to keep the GraphQL server running (for example like what Gatsby does during gatsby develop), Netlify is not the solution for you. If you wish to send the data one-time and add some server-side processing, you can take a look at Netlify Functions.
I am developing a website that uses react and react-router for the frontend and express for the server. I'm trying to implement session based authentication by using express-session, however, the only way that I've been able to get the cookie to save in the browser was by having the express server run on the same port that react-router is (localhost:3000).
I'm not sure how to phrase this question, but is this "OK"? There doesn't appear to be any obvious problems caused by doing this but I'm not sure if having them both run on the same port is "good" or "bad".
Could there be any problems caused by having react-router and express running on the same port? If so, how can I get express to save the cookie on a port that's different from the express server itself?
I figured it out. YES this is bad, the solution is to set up a proxy for create react app
https://create-react-app.dev/docs/proxying-api-requests-in-development/
I'm using a Glassfish webserver where a Java Restful webservice is running on. The client is programmed with Reactjs. I have recently implemented the react-router and found out that there is a problem with refresh of pages and direct access to react links because these requests are handeled by the server.
There is a recommendation how to solve this problem on Apache server with .htaccess.
see react-router: Histories. Unfortunately this concept does not not exist on Glassfish webservers.
Anybody found a solution to this on Glassfish?
I'm working on a MEEN-stack (MySQL, EmberJS, Express, and NodeJS) project. I have never worked with Ember at all. My only front-end experience is jQuery.
The project is separated into folders, with the front-end (Ember) in one folder and the Express API in another. Front-end will handling loading in web-pages while sending requests to Express API for database requests / authentication / more.
I am currently able to connect the two servers via an explicit URL with jQuery's Ajax method in a webpage's static javascript file (along with allowing CORS and modifying the Ember environment file in app/config).
My confusion is that there is definitely a more elegant solution for connecting the two, but I'm lost on how to go about it.
From looking at tutorials, I have attempted adding an application.js file in the Ember Front-End app/adapters folder:
import DS from "ember-data";
export default DS.RESTAdapter.extend({
host: 'http://localhost:9029',
namespace: 'api'
});
But I don't have the knowledge to fully implement it or test it. What am I missing? How do I take advantage of the adapter file?
When you start ember use:
ember server --proxy 'http://localhost:9029'
Assuming that you node server is serving your api from http://localhost:9029 as you start the ember server with the proxy the ember-cli will spin up a very simple node proxy that will proxy your requests while you are developing.
Then you can remove the host from your adapter.js file
import DS from "ember-data";
export default DS.RESTAdapter.extend({
namespace: 'api'
});
Also if you want brevity:
ember s -pxy 'http://<YOUR LOCAL SERVER AND PORT>'
So, currently I have been using Ember cli to proxy to my api that is on a different port. I am trying to serve up a few routes using only node ('/', '/signIn', '/signUp'), and then once a user is authenticated through the '/signIn' route, serve up the ember app with a token.
As of now I am using 'baseURL' defined in my 'environment.js' of ember-cli, and my ember app is served to '/app/'.
I am getting confused on how one would go about serving up the ember app when a certain node route is accessed and the token is validated. In other words, I can visit my node routes fine, I can visit my ember routes fine using /app/, but am unsure of how to serve up the ember app once my server authenticates the user at '/signIn'. My reasoning for this, is that I do not want to serve up all the javascript assets to the client until I am sure they are an actual user. I am sure that this can be done using node and ember, but have not found much material online regarding such a configuration.
I have done a good amount of research, and the things that have caught my eye are 'baseURL' defined in CLI, 'rootURL' defined in Ember, and this from the Ember CLI page:
Integration
When using Ember inside another project, you may want to launch
Ember only when a specific route is accessed. If you’re preloading
the Ember javascript before you access the route,
you have to disable autoRun:
var app = new EmberApp({
autoRun: false
});
To manually run Ember: require("app-name/app")["default"].create({/* app settings */});
I know that people in production build the cli app into their '/dist' directory, and then server up the 'index' on their server, but I am not sure if this is the right path to go for development.
To recap, I have an ember-cli app that is getting proxied to my node server. I have a '/', '/signIn', and a '/signUp' route that is handled by node.js completely. I also have an ember app that is served at '/app/' and is making requests to my node app successfully.
What I am unsure of is how to server up the ember app once a user is verified at '/signUp' of my node server.
Any help at all is greatly appreciated. I am very new to this stuff, so please be gentle. I have researched this for two business days while consulting with senior engineers, and they have no clue about frameworks such as Ember.