As the title says I'm dealing with Spring Boot and react JavaScript at the moment. I would really appreciate it if someone would be able to answer me on a few small questions.
I created a separate react project using vscode IDE. Now I need to add it to my Spring Boot application. I have used Eclipse to code my Spring Boot application.Can I just transfer the react JavaScript files to the Eclipse IDE? Will it work like that?
Also, to configure these two together I read that I should use thymeleaf. What are you thoughts on this and do you think its better to use this.
You may not require to transfer any code from one IDE to another. I assume both this front-end(react) and middle layer(spring boot) are two separate project.
You can still run the boot project in eclipse pointing to same localhost(for development) with a different port and front-end in a different port.
I found this example is quite useful
The modern way to think about your React and Spring apps as of two completely separate applications. The React app is the "front end" application that is displayed to the user and holds the logic for all the user interactions. Spring boot is the "back end" service that holds the state of your application and helps you to save and fetch data.
To get started try building and running your React app from something like Create React App. It is easy to set up a local development server. You should also understand that the React app that you get after building is just some static files - so you can host them very easily and cheaply without need for an actual server. I personally use S3.
Now to your Spring application. This is your 'API' layer and you should read about using APIs for example here: Official Spring Docs .
You still theoretically CAN bundle both together and serve the React bundle out of the Spring static files directory but you will likely find this will get awkward fast. Here is an example of someone doing exactly this
As for Thymeleaf - in the React world you will likely end up using JSX for your templating needs. It is a wonderful way of closely integrating your js and html code and creating highly reusable components.
You can build an automated container deployment. This allows you to test, build and deploy your backend and frontend with every git push to your server.
For example google some keywords: Kubernetes, Docker, Gitlab CI.
There are much more solutions and platforms to build a system for automating deployment.
Related
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.
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 got confuse while searching top JS backend framework then I found NextJS is one of the top list, I thought nextjs is just a simplify of CRA and still need like nodejs as the backend. Back to my confusion, so when we normally create a full JS app we will need frontend and backend tech like (nodejs + reactjs) so with this nextjs we can make a app just with nextjs ? **sorry for my bad English
Simply said, NextJS is basically React on wheels and has NodeJS built-in. It has lots of other features built-in so you need almost zero-configuration to build a full-stack app.
If you have 10 minutes to spare, take a look at this video
Essentially NextJS is a full-stack framework. Which means that developers can write both front-end and back-end code in a single environment. It can provide multiple benefits among various use cases. Which can be things like seo optimization, image optimization or quickly switching between different rendering methods (SSR, CSR, ISR or SSG).
As for your question "Can we make an app just with nextjs ?", you certainly can but it depends heavily on what type your app is.
I'm trying to create a project all day long (in vain) to be able to write an SPA (Single Page Application) for learning purposes with JavaEE and AngularJS but I have no idea how to proceed...
I need in following topics your help:
How or which project I have to create/choose in Eclipse to be able to write in JavaEE(Backend) and AngularJS(Frontend Clientside)
What do I need to do this so?
I could not find any continue bringing sources in the net like step by step guides in setting up the project and if needed any dependencies which I will need for the project.
I would really appreciate if someone could help me at least in setting up the project so I can start coding with JavaEE and AngularJS
Thanks!
First of all you have to define your learnig criteria.There are number of ways to start learn on this.
On github you can get some boilerplates available.Using this boilerplates you can start easily.
ex. https://github.com/radcortez/javaee7-angular
you can also refer [https://medium.com/#swhp/build-single-page-application-with-java-ee-and-angularjs-4eaacbdfcd][1]
On client side you can create the application using AngularJS,Bootstrap and integrate this application with backend using API.
On server side you can create API either with latest spring boot
https://www.blazemeter.com/blog/creating-a-simple-spring-boot-api-from-scratch
or
you can create simple java application using JAX-RS and Jersey.
I stumbled upon google's material design web components ("https://material.io/") and would like to implement it in my projects. The only problem is that I've never used a javascript frontend before.
Note: Google's Material Design is the successor of Material Design Lite.
I received a recommendation to learn angular and implement Google's material design components through angular and have my frontend (angular) communicate with my backend (django) through an API.
1- Is this really the best way to proceed if only the web components are needed? Can we not just import the CSS and JS like we did with bootstrap and use Django/jinja to render views?
2- It seems like node.js / NPM is required to use angular and Google's material design, however, is that just during development? Or will we face complications when trying to deploy a django backend and javascript front end?
You can certainly separate your frontend and backend, but I don't think that's necessary in this case. You can definitely import your needed JS and CSS without separating the two, (just make sure that you have them in your base template so that they're accessible to all pages). All you need is a CDN. If you want to use raw SCSS as mentioned in the webpage you linked, you can always use Django scss https://github.com/jrief/django-sass-processor
Onto your second question. Node.js is essentially a platform so that Javascript can run on a server as a backend , as opposed to in a browser. Angular is a frontend framework (just like Django is for python). You don't need node.js to use angular.
NPM (node package manager) is a javascript package manager for node.js, just like pip is a package manager for python. It's not necessary if you're not using node.js.
I don't see anything that would suggest that splitting frontend and backend is necessary for using material design, so you should definitely be either to do so either way. Entirely up to you.