Folks, forgive me if this is a repeat question: I couldn't think of how to phrase it in the search engine. I'm developing an Intranet-based set of applications with the front end (individual apps) in React and the back-end using node.js and Express. I had been using Electron JS but like the Express solution since all web browsers on the Intranet can use the apps.
I'm running into a bit of a circular dependency when it comes to production, though. Since my REST back-end handles all local calls (like node fs) I use REST calls to load and save preferences files from the front end. However, I'd like to be able to set the REST URI from a config file or setting. Since the only way I can access this setting is a call to the REST back-end, I'm stuck. It's possible the client may want to change the host URL and the port for the server. This will affect all axios calls to the REST back end in every React application I have. Instead of calling http://localhost:5000/api-call/ I'd like the localhost and port number to be read from config.
I am transpiling the React apps and storing them in a static folder underneath the REST server. I would like to avoid something complex or additional like REDIS or another local database. My projects don't require any heavy database setups.
Am I simply implementing poor architecture here? I even thought of env variables but then will get into setting them on each client's system which takes away from the flexibility of using a web server in the first place. Any thoughts to move me in the right direction would be greatly appreciated!!!
I knew if I posted this, I might find an answer.
I'm not sure how elegant a solution this is but I could test the env for development vs. production. If in production, I can then use window.href (host and port) to get the information I need. I think this will work but would still love to hear some other thoughts from those with far more experience than I have!
Related
This is my first post here, let me know if I do it wrong. I would like to start by mentioning that I'm kind of a beginner developer. I've had a bunch of classes, but it's also my first time working on something of my own, from beginning to end (emphasis on "end").
I'm working on a relatively simple app, for user management (CRUD, with different levels of authorizations) and shop management. I was given the choice of the tools, framework, language, etc, to use, with the only constraints that 1/ the main device to use it will be a tablet most of the times 2/ nothing should be hosted online. I wanted to get more familiar with Javascript so I went with creating a React app (front) with Express Nodejs (back) and a MySQL database I access via Sequelize.
Development is going fine (for the most part thanks to many great posts here on SO), but I just got hit by the reality that I have never tried to build the app and see if it runs the way I intend. And I do not know how to do it. I should have researched that earlier.
So far, in development I always tested everything on PC and phone by running npm start (front end) and node server.js (back end), and the client runs in a browser (when using a phone I access the IP adress and port, like 192.168.x.x:3000). Backend listens to the 8080 port no prob, access to the MySQL database works as intended thanks to Sequelize. Frontend listens to port 3000 to display the user interface on the browser, and React makes it easy to develop features in front, and quickly troubleshoot them. Everything works fine, and as expected, anyone in the same network (and with a web browser) can access and use the app that way.
This is the behavior I want to replicate with a production build : having a computer host the build, and run the "server" so that the app is available to any device in the local network. So I guess I need to somehow make my build in a way to make it possible to turn on and off the "server" at will, maybe via a .exe ? Or turn it on at the same time as the computer ?
I know I should have researched that earlier and not doing so was a mistake. All I know is I'll have to use npm run build, to get the build folder, but I don't know what to do from there. Could you help me figure it out ? Among many things I'm not sure of, is whether or not the host computer (not mine) needs to have node.js installed ? Does it also have to have MySQL installed ? Do I make a single build that incorporates the backend and the frontend, or do I build both separately ? If so, how ?
Let me know if you need to see part of the code. Thanks in advance and have a great day.
EDIT : App was created using create react app
There are options to deploy on cloud like Cloud Servers. But I think you're looking for hosting the application on the local machine. You need to create a service, bundle the application and serve whenever you want.
Following link might be helpful
https://www.section.io/engineering-education/compile-your-nodejs-application-into-a-exe-file/
I have a React App and a Express API. I want to package those two components into one single executable. Is there a way to do this? I don’t want a solution to my problem I want a hint into the right direction if this is possible.
I believe what you mean is not to keep the bundler running as well as the express server, unfortunately that's not possible if you're in developer mode (and) you're expecting realtime updates in your browser, but if you were in production, then it's not even the case that you need to run your bundler, cause your main.bundle.js is already built and ready.
I think this is what you are looking for. https://electronjs.org/
Electron or similar libraries help you to create an executable application which can be installed an run like a desktop application.
The only point you have to keep in mind is for accessing the database you will have to create a REST API and communicate via that.
Link for a simple tutorial.
There's this tutorial which has a working chat app. You can find the chat app on GitHub.
I'm trying to deploy the git code to Heroku without success.
The GitHub is separated to client/server architecture so it requires to start node server and ng serve to client. Do I need 2 dynos for it? Do I need to edit the Procfile? The server is using process.env.PORT but the client one is hardcoded.
I'm very new to Heroku and Node.js so any help is meaningful to me.
The GitHub project that you ask about is pretty complex and it doesn't seem to have ane Heroku deployment instructions, without knowing the project it's hard to give you any concrete solution, but I'll try to answer in general how such applications are usually deployed and hopefully it will help you solve your problems.
For applications like this it is common to split the backend and the frontend part and have it deployed and hosted separately, either as two separate dynos if you want to host both on Heroku, or e.g. hosting the backend part on Heroku and the frontend part on Netlify or a similar service.
Another option could be to make the backend serve the frontend e.g. on the / path while having all of the backend endpoints available as /api/* or something similar (or on a different port but this is not possible on Heroku). Having it on the same host and port but with a prefix for the api has the advantage of simplifying the CORS related matters, as the origin is the same so no cross-origin issues arise.
If you're using WebSockets then it is slightly more complicated - make sure to read:
https://devcenter.heroku.com/articles/websockets
but either way you can still move your frontend to Netlify or something similar and keep the backend on Heroku if you want.
It's hard to give you any more specific answer to this question. I see that you are new here, so next time try to write a more specific question and narrow down the problem so that you can show a small code example that people could actually read and help you.
So I just started learning ReactJS and React Native.
I have some knowledge of MEN (Mongo, Express, Node). Up to this point, I learned how to res.render() files and pass objects in there.
Now what I need to do, is make MERN app. This app also needs to have Android and iOS version of it.
So far I learned that R stands for ReactJS, not react-native. Is there a way so it includes both? And where do I put react files when I have folder structure like from express-generator? Or is there a way they can be in completely different directories, and one calls the other via import?
It comes down to architecture I believe. The way I like to create the stack goes as follows.
You can create an API using Mongo/Express/Node that serves endpoints for your client app (created using reactjs, react-native and whatever other tech you want to include) to call using HTML requests. This would work for both mobile apps (using react-native) and desktop apps (using reactjs).
There's a couple different ways to deploy this. You can create 2 separate apps, a server app and a client app, which are both hosted individually by 2 separate hosts. This is useful because you decouple your front end code from your back end code. Also, you can have 2 separate directories for your code.
Another method of deployment would be to have your server serve your client files. This ones a little bit tricker, but you will be able to deploy your entire app inside 1 host so this option is also cheaper. I would suggest reading this article to figure out how to implement this and the file structure https://originmaster.com/running-create-react-app-and-express-crae-on-heroku-c39a39fe7851
I'm a little late to the party, but I'm just getting started with React. I have a base project that I'm serving with webpack-dev-server, but now I need to actually get data for it.
My chosen API is Strava. I'm trying to use the recommended API wrapper for node, but I've come to a point where I don't want to expose my API keys and know that I need to create my own API endpoints. I was about to start creating an Express server to quickly create these endpoints, but I feel like there might be something that I'm missing.
Is there a better way to go about this with webpack/webpack-dev-server?
If I want this working on the internet, I know that I'll need at least one node instance running to serve my API endpoints; I just want to make sure there's not some super-simple, possibly webpack-based (to keep everything in the same family) solution that I could then, later, just deploy on a ready-made node server.
My assumption is that I'll just be better off creating two projects:
Static content (currently webpacked and served with webpack-dev-server for development)
Express server for API-wrapping.
If that's the case, is there a simple way to point hook Express up with my static project (everything webpack does is sent out to an /app/dist directory) for production deployment?