I'm in the process of updating an old piece of software (running Apache2, PHP, MariaDB, HTML, CSS) to use a React frontend. I'm completely new to React and I'm between beginner and intermediate with vanilla JavaScript so I've been researching this the last few days.
My confusion is about backend with a React web app. If I want to keep the existing architecture in place aside from frontend, will I be able to painlessly have my apache2/php integrate with my React app? And I'm also confused about the role of Node.js. Some places describe it as just extra libraries, and some places describe it as an Apache2 replacement. I think the source of my confusion is that so far in learning React and Node it always requires me to run npm start. Which feels very much like running a server like apache.
I guess in a nutshell my question is - what will my project structure look like when using a React frontend? Will I have just javascript files and host that on Apache? Or will this need to be run on Node? And where does my PHP fit in, will this need re-written in JS?
EDIT : For further clarification. I'm asking about the differences between a Node.js server and Apache2 server. That's the focus of my issue. Additional points of discussion to help me understand the problem are how PHP and React fit into all this, and whether my understanding of Node as an Apache-like tool is correct. Hopefully that makes this question less broad
For the purposes of building a React app against an existing set of web services: Node.js is used only at build time. It is used to execute the build tools which generate static files which are deployed on your Apache HTTP server.
Node.js is also used to run the development server for the React application that hot reloads it as you save changes to the source code.
Node.js can be used to run an HTTP server which hosts web services written in JavaScript (which which case it either replaces Apache or sits behind Apache (which is configured to act as a reverse proxy) … but that isn't your use case.
Related
I come ask my question here not because i did't found the answer but rather because i don't understand them...
Currently I try to do a website with HTML / CSS and basic JS but I need a database
And when I see different tutos in YouTube or other I always see Express, node...
Yes, I already use NodeJs but not Express, I only know him by name
And i'm lost, and i didn't know what to do to use mySQL with JS
I know Javascript is a front-end language and with NodeJS we can use it in back-end but...
In this case, with mySQL, what's difference between Node, Express and Wamp ?
All answer that i have is : *"Some of them are servers but not really a server, but more or less a server"
Yes, i didn't understand !
So can you please explain me what's three of them ?
Wamp simulate a locale server
But express too... ?
And node JS don't need to use a server... ?
If i use expressJS with Wamp will it be the same on a VPS ?
Please I need an explanation
WAMP is an abbreviation for Windows+Apache+MySQL+PHP environment. It is also the name of a package that lets you easily install Apache, MySQL and PHP on a Windows machine. Apache is a powerful web server software, which you can still use in front of Node, but don't have to (as a beginner, ignoring Apache is fine). PHP is a serverside programming language, but you are already decided on using JavaScript/Node.js, so you don't need it. For your purposes, simply installing MySQL instead of WAMP makes more sense.
Node.js is a serverside runtime for JavaScript language. It is what lets you run your JavaScript code on a server computer, along with some essential libraries that extend JavaScript with functions that it does not have built-in, such as the ability to read files, or to accept incoming connections (like HTTP requests).
You could make a web server purely in Node.js, but it would be a lot of hard work. Express.js is a framework (basically, a big library) you can install that already does a lot of that hard work for you, letting you focus on writing your web application's logic and not have to write low-level code that would make up the guts of your web application.
In the same way, you could theoretically write your own code to communicate with MySQL, but the mysql library exists so you wouldn't have to.
So if you are making a serverside JavaScript web application, you would typically start with installing MySQL and Node.js, then use npm (Node.js package management tool) to install Express.js and mysql packages. Apache is optional, so don't worry about it now; PHP is entirely superfluous.
I hope the question is clear enough, I'll to to explain more in depth, but before that, I want to first say I'm new/fresh to web development.
I have been developing some apps on my own and have also followed some udemy courses and what I have had difficulty understanding is what is the purpose for a distribution version of the web app you are developing.
I first started a course that had some intro to PHP, MySQL, Wordpress, with a larger emphasis on HTLM/CSS and Javascript. The last project in this course was a single page website that used Webpack to bundle the project and create a distribution version of the project.
After this I followed a course which main project was a multi page app that used Express.js with .ejs , Node.js, Bootstrap and PostgreSQL, but I did notice there was no bundling for a distribution version of the app.
Last, but not least, I did another course that used React for the client side, and in the end there was a script for generating a bundle for distribution.
As I started moving my projects to a static server and getting them up and running forever with PM2, I stopped for a bit and was wondering why is there even a need for a distribution version of a project even needed if the websites look the same, but I assume the reason is so it runs more smoothly on a browser.
I'm just making assumptions here, but I assume the javascript from all the dependencies are put together on a single .js file or a small set of files to make it easier on the browser to process the website? Also for version control?
But if creating a distribution version of your app optimizes it for a browser, then how come Express.js doesn't offer this?
Maybe this is a very stupid question, I'm still confused by a lot of this stuff.
Maybe because they can do similar stuff, like webpack can throw up a server so you can see your app running, like React, but to access a database, you need to make an api call to a backend program like Express.js through axios or fetch. But Express.js is a server that can make query calls to a database and lets you see your app through views/.ejs.
Again, sorry if this sounds all really dumb, I just don't know anyone who I can ask these questions.
I am trying to build some UI in front of an existing java code base. The UI needs to change/update dynamically as the user interacts with it.
I am familiar (no more experience than that) in writing javascript / jquery based UIs. React appears to be very intuitive and I did a quick (and almost complete functionality that I need) prototype in the last two days - I guess seasoned React developers might only take a few hours to build what I came up with so far.
However, I don't like the fact that I need to run this React app on Node.js (on the server-side).
Did I get that right?
I read about Babel standalone, but it is not recommended on production envs.
Since I already have a backend (to be honest, even if I had to build it afresh, there's at least a 70% chance that I will choose Java)
From the current app, all I need is a dynamically updating user interface that interacts with my java backend.
The question
Is it possible to pre-compile the current React app I built into a bunch of pure javascript files?
However, I don't like the fact that I need to run this React app on Node.js (on the server-side).
This is only true if you're deliberately using server-side rendering instead of the (more common) method of simply compiling the code to plain JavaScript and serving that compiled code. Once the code is compiled, that's it - you don't need to use Node anymore.
It'll be perfectly fine to have a Java backend for the live server while also using Node only when you need compile the React code (which can be completely separate from the live server). A common framework for beginners for compiling React to plain JS is create-react-app.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
The last couple of days I began to teach myself how to create a Website from scratch.
I bought a webspace and fooled around with html, css and javascript and when I wanted to build a online chess game I learned about Node.js
But I don't understand what Node.js is used for because the documentation shows how to install and create a fresh server(!) with Node.js and handle requests.
Do I don't have to use a apache installation on my server anymore?
Do I create the whole website and all it's pages with Node.js like the index or about page?
If I use Node.js just for a web application, how can I add the web app to an already existing Apache website's page?
I think I really got confused and need some help to understand Node.js better since so many are using it.
Do I don't have to use a apache installation on my server anymore?
Correct. You create your whole web server in node.js. You generally don't use or need Apache with it.
Do I create the whole website and all it's pages with Node.js like the index or about page?
Yes, you create the whole web server in node.js and use it to serve all your web pages. Typically one might use a number of libraries with node.js such as Express for mapping all the routes in your web app and your favorite template engine to help with filling in data in HTML pages before serving them to the client. At very high scale, one might consider using some other infrastructure (like nginx) to offload static resources from your node.js server to increase scalability, but that is not necessary at small or medium scale as node.js scales really well.
If I use Node.js just for a web application, how can I add the web app to an already existing Apache website's page?
You can run one of the two web servers on a different port and have two web servers that are part of your web-site liking to each as needed. But, typically you would move everything you currently have in Apache over to your node.js app. You don't have to do that, but most people wouldn't start out with an objective to build a web-site out of both node.js and Apache.
One thing to keep in mind is that node.js/Express are conceptually a bit different from Apache in how you build a simple web-site. A node.js/Express web server serves NO content at all by default. So, you don't just drop a directory hierarchy of web pages on your node.js server and expect it to serve those pages by default. You can do that pretty easily with express.static() (a feature of the Express library) if that's part of your site design, but you have to consciously configure that in node.js (it takes just two lines of code to do so).
If you want to write a "simple" chess game, you're best bet is to start learning Canvas. This tutorial by the Mozilla Foundation is one I personally used and enjoyed a lot. If you want the computer to play as CPU opponent, then you would likely need to use a server(node.js!).
You can use Node.js to build a simple website, but that would be like using a screwdriver as a hammer. Node.js is used for making desktop apps and for programming servers. Servers(backend) analyze user inputs and provide some sort of feedback. Let's use StackOverflow as an example. The frontend(HTML, CSS, Javascript) is what you see. All of that is done in the browser. The way you get that code to someone's computer so they can render your website is via a server. Servers do other cool things. When you do a search on a website or save a post, the server is dealing with storing that data or finding you the right results. If you want to build an API, like the one used for Google maps, or for Yahoo Finance, you'd use a server.
If you want to make your own server using Node.js, I'd recommend using Digital Ocean or Heroku. They are beginner-friendly and are respected in the industry. Heroku is free and owned by Salesforce if that makes a difference. However, this is unnecessary, for beginners. I recommend using a free or low-cost hosting platform that deals with that for you.
The thing about Node.js is you can use it to create websites via template engines, but I wouldn't recommend that. You are essentially writing server-side javascript to create HTML. That's foolish most of the time when you can just write the HTML itself. Just have node.js deploy it.
I have a small python program to help my colleagues to analyse some tsv data. The data is not big, usually below 20MB. I developed the GUI with PyQT. I want to change this desktop program to a web app so my colleagues don't have to upgrade the program every time I change it or fix a bug. They can just go to a website and use Chrome as the GUI.
So how do I do this? I spend most of my time developing desktop program and just know some basic web developing knowledges. I have read some framework such as flask and web2py, and know how to use HTML and Javascript to make buttons but no clue to achieve my purpose.
Can someone give me a practical way to do this?
It'd be better if the user don't have to upload the local data to the server. Maybe just download the python code from server then execute in Chrome. Is this possible?
Thanks.
No, you cannot run Python code in a web browser.[1] You'd have to port the core of your application to JavaScript to do it all locally.
Just do the upload. 20MB isn't all that much data, and if it's stored on the server then they can all look at each others' results, too.
[1] There are some tools that try to transpile Python to JavaScript: pyjs compiles directly, and Emscripten is an entire LLVM interpreter in JS that can run CPython itself. I wouldn't really recommend relying on these.
The whole point of a web application is that the GUI is written in HTML, CSS, and JavaScript, not Python. However, it talks to a web service, which can be written in Python.
For a well-written desktop app, the transition should be pretty easy. If you've already got a clean separation between the GUI part and the engine part of your code, the engine part will only need minor changes (and maybe stick it behind, e.g., a WSGI server). You will have to rewrite the GUI part for the web, but in a complex app, that should be the easy part.
However, many desktop GUI apps don't have such a clean separation. For example, if you have button handlers that directly do stuff to your model, there's really no way to make that work without duplicating the model on both sides (the Python web service and the JS client app) and synchronizing the two, which is a lot of work and leads to a bad experience. In that case, you have to decide between rewriting most of your app from scratch, or refactoring it to the point where you can web-service-ify it.
If you do choose to go the refactoring route, I'd consider adding a second local interface (maybe using the cmd module to build a CLI, or tkinter for an alternate GUI), because that's much easier to do. Once the same backend code can support your PyQt GUI and your cmd GUI, adding a web interface is much easier.
If I get your point correctly, you want
Web connection, so your python program updated on server, client get it before using it.
Data store on local to avoid upload big file.
You can write a python program to check a server location to get your latest program if needed. You need a url / server file for program version / created date/time information to determine if you need to update or not.
After get latest python program, then start this python program to run locally.
With this said, What you need is to update your program to add below features:
Access your server, to get latest version information
Check against current version to see if you need to download latest program
Download latest version and use that to run locally.
Does this solve your problem?