I have multiple portfolios made in React and each one of them has their own Node.js API.
I'd like to gather all frontends in only one domain so all I would have to do is using "/name-of-the-project" for each one of them. I did the steps below:
Created a new Node.js server that will work as a "general server";
In this general server, I set the folder public to be used for static files;
Built any of the React apps (npm run build);
Moved the deploy codes to the public folder of the general server;
Set the cors() in the API's (the ones I mentioned React apps were built with) of the frontends to allow requests from the general;
An example of how the general server became with a React deploy:
When I access http://localhost, it works. But remember I said I had multiple projects? So I created folders inside the public folder to put each React deploy in their respective folder. Let's say:
Now if I enter http://localhost/frontend-1, for example, it doesn't work
What I tried to do before creating this question?
I created a simple index.html inside each folder and they work. Only React deploys don't.
If it helps anyway, this is the general Node.js code:
I think what you are missing is the setting up the basename's of each of the react apps that you have.. I assume that you have routing in each of your application, with that you have to update its basename to point into the right directory/url.
I had a similar issue. I was building an e-commerce store with 2 separate apps - customer and admin apps.
I believe in your case the issue is that the npm run build doesn't have the relative path.
For instance, all the static files like .css in frontend-1 app should be prepended by /frontend-1 and same for others. \
To do this update the build script in your individual react apps and add PUBLIC_URL. For example in this code block i have added that for an admin app.
For more detailed explanation you can refer this youtube video.
Related
I have no fullstack code experience with Spring Boot and I am wondering what is the most proper way or common approach for keeping frontend code in Spring Boot projects.
So, should I create a folder called frontend under src/main and keep Angular or React code in this directory as shown below?
- my-app-name
|
-- src
|
-- main
|
---- frontend
---- java
---- resources
Or should I prefer src/main/resource ?
As it was already pointed out by multiple people in the comments, you should bundle the frontend and backend separately. The reason for this is also that you need to build, package and deploy them separately and you need a separate pipeline for each of them. For example your spring boot app will be built as a docker container and deployed to kubernetes while it does not make much sense to host the frontend in such way, it could be hosted in a CDN.
This leaves us with your second point - monorepo vs multiple repositories. Both have their pros and cons. You can find a lot of articles on this topic online. I assume, that this is a small project and you'll work on both frontend and backend by yourself at once. In such case, you can do very well with the monorepo approach. You can do a change across both frontend and backend in a single commit, the refactoring will be easier etc. But if you choose to go with mutliple repositories, there is nothing wrong with it.
One more thing to consider is where and how you'll manage your API contract between the frontend and backend. There are again multiple approaches here. I'd advise not to go without the API contract specs (like doing everything by hand on both server and client side) and in case you go with monorepo don't create your dependency between the frontend and backend directly (on the file level), that create unecessarry coupling between those two.
Currently I have a problem with connecting two applications. They are independent.
I would like to connect them into one application.
First application:
It is a login/registere form. It had been written in Node.js, Express.js, React.js using MySQL. Files structure is as follow:
Second application:
It is a to_do_list. It had been written in Node.js using MySQL.
Files stucture is as follow:
I would like to run this two application in two ways (make some type of template for future projects) :
ad.1 First users register/login (www.example.com/) to application and then there is a redirect to to_do_list application (www.example.com/to_do_list).
ad.2 First users see a to_do_list application (www.example.com/) and then if user want to change/ update something in to_do_list, it's require a login in so there is a redirect to login page(www.example.com/login).
I don't know how to proper connect this two applications (mainly how to create a proper files structure).
I have two reasons but don't sure that is proper line of thinking.
Currently this two applications run on two independent servers (every have own package.json and node start initialization).
For ad.1 : Create directory in Back-end part of register_app and copy all files from to_do_list app. Then install in package.js of register_app all require scripts that to_do_list uses. Finally I should make a proper redirections and dependences for all filles.
For ad.2: Create a folder called to_do_list and copy there all to_do_list app files. Create second folder called register/login and copy there all register/login_app files. Uses some type of proxy to connect this applications (but it is impossible to run two application on the same port so ... ?).
If you have any kind of reason how to in easy way connect this 2 apps I will be so grateful. I am at beggining of my fullstack way.
If you are passing non-sensitive data between the two pages, you could include the data as a query param (see this question)
If it is sensitive, then you should separate your backend and have one uniform API that both apps interact with, and the backend should be agnostic to which it is interacting with.
If you want to simply merge the two projects into one, then that should be simple as moving the files, updating references, and adding required packages.
You could use monorepo like yarn workspace or lerna.
my issue: I have server written using Spring Boot, Spring Data, MongoDB and postgreSQL. My client is written with React/Redux. I keep them in two separated git repos. Now I’d like to deploy them to Heroku. I already deployed back end but now I’m not sure how to add frontend. I’d prefer to have it as one app because then I wouldn’t have to worty about csrf.
what solutions I was thinking about: As far as I’m concerned I see two solutions:
1) deploying front end as a separated app and make calls to backend (already deployed app)
2) somehow making it into one app. I read a couple of solutions and one suggested making a Procfile, but in that question there was one git repo. Deploy two separate heroku apps from same git repo
I’m using Maven and Yarn.
If your client project is also a maven project, you can make it a dependency of your server project.
You can then make the build copy your client artifact into the src/main/resources/static folder and have your server application serve the client as static content.
Update: This link is a good guide how to do it: https://blog.jdriven.com/2016/12/angular2-spring-boot-getting-started/
It describes a multi module maven project with a spring rest backend- and an angularjs frontend module. But I am certain that the principle will work also with a react/redux frontend in a separate project.
It will require some tweaking though:)
I recently abandoned the awesome LAMP solution for Node/AngularJS and I have some serious (and noob) difficulties to begin.
I took an existing AngularJS project based on Angular Seed and I didn't figure out how can I add some backend javascript code.
In online tutorials, I always find an app.js file, in which there is some "requires" and where I can add an extra server code. To launch this kind of project I have to node app.js
In my Angular-seed based project, there is only a package.json that contains script commands.
Also, I noticed that to launch it, I have to npm start.
Where can I put my NodeJS code in this project ?
Thanks in advance !
Usually you will have two differents projects. The backend (Nodejs) and the frontend (Angular). You can expose your backend logic using a public API that your frontend will use. For example you can expose a REST API using nodejs with help of express. I recommend you to take a look at swagger that can help you to define your api.
After that using your angular app you can send different requests to that API and consume the info that receive from it.
To sum up you will have two different projects. Hope this helps
I'm curious if anyone has developed a best practice for organizing Meteor applications that contain external shell scripts, or other back-end processes that happen outside of the node.js server code and the client side js code.
For instance, I have a meteor app that is structured like this:
project-name
client
lib
models
packages
public
server
I have a shell script that processes some external data sources, and a Python script that does some other heavy lifting. These all then help by inserting new data into the Mongo instance. Yes, I know that's a bit of a jumble, but so are the backend data systems. My question is should I put these sorts of projects within the meteor app folder, or should they live outside of the system? Just curious how others are structuring apps like this.
Option #1
project-name
client
...
server
data-processor.sh
other-utility.py
Option #2
project-name
client
...
private
data-processor.sh
other-utility.py
Option #3
bin
data-processor.sh
other-utility.py
meteor-project-name
client
...
private
You shouldn't put any non-meteor files inside your meteor project directory, all of those CAN be picked up by some package, even if standard meteor-platform packages don't recognize the extension. So putting them in the /server might cause problems in the future. The /private folder on the other hand is meant for resources used by your application, so placing the scripts there is unsemantic and inelegant.
To avoid moving those scripts outside of the project folder you can store them inside a hidden directory, that is any directory with name starting with a dot, i.e. /.scripts. Files placed there will not be picked up by Meteor application.