So I'm building an end to end application (With node.js/mysql back end, react front end, and using the express router), but I'm having trouble setting up a local development server. I don't need it to be accessed from the outside world, just be able to load different pages connecting to the express router. I don't have any dev ops experience for this, so I'm trying to use nginx to point it to the router which I can't figure out. Is there an easier way to do this?
I also need to run this on a windows machine, which just makes everything slightly more complicated
It's not entirely clear from your description how your application is set up and what the role of Nginx is.
So I'll start from the beginning...
Nginx is primarily an HTTP server which can also function as a proxy for HTTP requests. If you've written a Node.js application using Express, you have written an HTTP server which can handle any routes you have set up and can also serve your static assets (ie. HTML pages, images, front-end Javascript, CSS, etc.). In this case, there is no need for Nginx - if you wrote something like the Express "Hello World" app, then you will see a message like "Example app listening on port 3000" and you can connect to your app by visiting http://localhost:3000 in your browser.
That's it - there's literally nothing else to your app and there is no need for Nginx (or any other HTTP server) to run your application.
Now that's not to say that there is no role for Nginx in your application, but it may not be as an HTTP server. One possibility is that you may want to set up Nginx as a proxy, to handle certain routes by sending the requests to your Node application. For example, I set up an application some time ago which uses Nginx to proxy API routes for my application to a Node application and to serve static assets directly. This may be what you have in mind - if it is, you will need to configure different routes in Nginx to serve different things (and unfortunately there's not enough information in your question to give suggestions on this).
As an aside, you're probably going to find this much easier to set up using Linux - perhaps the Windows Linux Subsystem, a virtual machine running Linux, or Docker.
You'll probably want to use
https://github.com/facebook/create-react-app
create-react-app my-app will set up everything you need (webpack, etc.), and then
npm start will start a local development server.
Should work on Windows, but I don't know, because I wouldn't use/recommend Windows ;-)
Related
Can I / Should I host Angular, Node-express and Mongo on same server, say localhost:3000 or somehosting.com/server-address?
Also is it a good practice?
I've seen Angular and Node running on same server, but what about adding mongo too?
like everything equivalent to
mongodb://localhost:3000/db
ng serve --port 3000
server listen(3000)
Thanks
As you have not mentioned for what purpose - the answer will be depending on the purpose and context. If you are learning, then running webserver, database and serving Angular static files , all from the same server is not an issue. However, if you are going to have live web app, even with less or moderate traffic, then you must run database on its own server, and the webserver and static Angular files from one server. Of course, for SPAs that expect lot of traffic and real use, it is better to serve your static Angular files from a CDN or storage service like AWS S3, and web and database servers separately.
Happy learning!
It is best practice to keep the databases(stateful) in different servers then the applications(stateless) unless it is just for testing...
I'm building an app with create-react-app and I'm serving the production version via serve. I would like to run it on port 80 and run it forever even after I log out of the terminal.
Look into learning a backend server framework like Express if you are interested in deploying your own production applications.
With Express, you can point specific URL requests to specific static files and apply any data retrieval / setting in the process.
There are also a number of specific resources available for transitioning create-react-apps to Express backends.
When you make this jump, if you haven't already, the important thing to remember is that you are essentially coding two applications, one is the frontend application that user sees, which is rendered in their browser by the bundled React code, and the other application is the backend server which routes and organizes those static javascript files for delivery to the users browser. When they connect to your server, they are sent to Express, which in turn (depending on the request) sends the React javascript.
Build application first,
sudo npm run build
Then,
sudo serve -s build -p 80
I'm using a create-react-app-generated server for my front-end (under the hood it uses Webpack's dev server), and I'm using Node/Express for back-end. Whenever I have this combination, I always run into XSS issues (eg. between localhost:3000 and localhost:4000) because the two servers have to run on different ports.
Given that my production site will be serving everything from the same domain, I don't really need CORS or anything fancy. Is there any sort of easy/hack way to avoid cross-domain issues in such a local dev environment?
You can set the response header "Access-Control-Allow-Origin" to "*" in the express server. This post might help.
I just starting to learn MERN Stack development as a former .Net developer. I wanted to develop my skills in this area and after lots of researching I just can't figure it out why we need to have two different running port/app when we working with react js?
Firstly I have developed some simple application by using NodeJS, Express, EJS View Engine and already deploy it to Heroku. So far, this works fine for me. I can develop all my personel site with those technologies including MonoDb later. But to become complete MERN Stack developer I started to search React and realized that it only works with giving another port to seperate it like client application. Why we can't use react and all other things in under one port?
This confused me when I get two different web page under;
http://localhost:5000/ (React App)
http://localhost:3000/ (Server Side: opens different html given by me using EJS)
Apperantly if we give same port number with server (3000) in react's package.json file then it gives following warning;
Something is already running on port 3000.
npm run client exited with code 0
Is it due to nature of ReactJS?
You totally can run React and Node on a single port - but it doesn't make for an efficient workflow.
The core answer to your question lies in separating front-end routing from back-end routing. When using React Router your application manages the UI based on the URL parameters.
i.e
http://localhost:3000/some-ui-path
At the same time when using Node as a back-end to respond to HTTP requests - you send the requests to specific URL paths.
i.e
http://localhost:3000/some-api-path
Separating the ports easily lets you differentiate between which route should be handled by React Router on the front-end and which route should be directed to the Node on the back-end.
http://localhost:3000/some-ui-path = React Route
http://localhost:9000/some-api-path = Node HTTP Route
In your configuration files you can customize your front and back end setups so that any request to a certain path will be redirected to your node server.
An Example:you can define that any path prefixed with /api/ should be proxied to port 9000:
http://localhost:3000/api/some-api-path ==> http://localhost:9000/some-api-path
You can use whichever ports you like but 3000 5000 and 9000 are common defaults used by starter kits and module bundlers like create-react-app and webpack
Hope this helps, let me know if I can explain further!
You cannot run React and Node.js server in a single port.
Why?
React uses webpack to bundle all the component files into a
single JS file. This JS file is then served by a
webpack-dev-server which is a part of webpack.
This webpack-dev-server is needed only during development. In production, you use npm run build or yarn build to bundle everything into a directory called build which will be served as a static asset by your Node.js server.
So, during development, you need to use two different ports for:
webpack-dev-server: This by default runs on 3000. If you try to run your Node.js server, you'll get an error.
Node.js server: This should run on port other than 3000.
Note: webpack is used as a default module bundler when creating React app using create-react-app.
Let's start from the port. Port is a logical construct that identifies a specific process or a type of network service. Port is a communication endpoint. And you have two different services, so it seems logical to use different ports generally. Your question is really good. I'm waiting for new answers.
Also a .Net developer here! I had the exact same question around myself and this article seems to clarify a little for me.
It seems like you need two servers (two ports) for development only. In production, you will only have an API server running, with some endpoints simply serving static files in /build directory like:
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, 'build', 'index.html'))
})
I think the reason why we run two servers (one react webpack server and one API server) ports in development is because 1) we don't want to run npm build every time you make a change and 2) because of not needing to build every time you make changes, it allows hot-reloading for fast development.
Setting up a nodejs server to serve the REST interface (with json objects) to my application.
This works fine.
Currently I run Jekyll service to provide the content pages. This causes some cross site scripting issues as they are running on different ports. I can get around this but it does not seem like the optimal solution.
Is it normal to run a nodejs server to provide the REST interface and the web content interface on the same port. I have been looking at nodejs/express/Swig as a replacement for the Jekyll service but I it seems that running the express/Swig on nodejs will alter the behavior of my response objects that makes using REST not quite as optimal.
Is it normal to run a nodejs server to provide the REST interface and the web content interface on the same port
Yes, this is pretty common as it is much simpler to deal with, so many small apps/apis opt for this approach. Sometimes the API uses a URL path prefix like '/api' as a basic distinction. Sometimes folks use content negotiation where '/user/42' will send either HTML or JSON depending on the request `Accept' header.
However, it is also common to use a web server on port 80 that routes to different back end apps based on a path, so for example anything to /api would be reverse proxied to an express app on 127.0.0.1:3000 but everything else looking for content pages might go to a jekyll app on 127.0.0.1:3001.
How I would roll. Because I am very much in favor of using a real web server on port 80
nginx on port 80 reverse proxying to express for API and jekyll for content
Also possible
express listens on 80, handles API directly, uses node-http-proxy to reverse proxy content from the jekyll app
there are a bunch of other combinations you could make work easily. Mostly it's about what you think is easy to understand and is reliable, secure, etc.