Common way to build and deploy a react web project - reactjs

I finished a part of my project and bought a webspace with a domain and a database to publish on. So I create a React-Typescript project with followed structure:
API: has my controllers
BLL: the services
Question do I have to create a Build and publish it on the webspace, with the API, BLL... or only the Web component? So that the API, BLL... are on a seperate server and the fetches from the Web-Component are via IP:Port address?
What is the common way here?

The in and outs of web hosting is massively large problem space. And the strategies and approaches number in the thousands. I couldn't hope to do justice to that in a single answer. But in short, you probably want them on the same server, and you want your backend to deliver your front end assets to browsers somehow. And your frontend makes requests without a domain like /api/mydata/ to pull data from the same domain as the frontend. This question will likely get closed now, as it's way too broad to answer.
– Alex Wayne

Related

Several react apps for different part of a web app?

Here is a question on how to structure a web app based on react.
We are planning on deploying the front-end of an app that will contain several parts like main part, a customer account part and say a backoffice part for the company staff to track customer's data etc...
The plan is to deploy this app on Netlify and use subdomains like example.com, backoffice.example.com and clients.example.com.
My question is: shall we use a single React app to handle these 3 parts or use 3 different React apps ?
Initially we thought using 3 different apps would be better in terms of maintenance and evolution but any professional feedback with pros and cons would be appreciated.
Thx a lot.
We do something similar (but with Angular). It works well as each of the teams is responsible for their own app as far as maintenance and release cycles is concerned. It is pretty scalable as well - no problems to just keep adding new apps (as we are doing).
We have the whole lot behind NGINX, and so in the code we can just refer to simple paths like /client-services, /marketing and /sales - i.e. no server/protocol configurations.
You need to keep the following in mind :
How the apps interact with each other i.e. a standard data object, or cookies/localStorage
Authentication
You will be using app/internal routing for modules within your app, and external routing to redirect to other apps
We've been burnt before with one monolithic app...

Firebase - Add many apps to one project

This is the first time i'm working with firebase. My goal is to have a bounch of client apps (more and more over time), all of them managed by an admin app (One app to rule them all).
The thing is that the client apps have a certain content that needs to be updated from the admin app. My best approach is to create a firebase project, put the admin app there and adding client apps over time. I'have read that is possible to have an unlimited number of apps inside one Firebase project. On addition, someone told me to create one project for each client app and connect them to the same database somehow. I simply don't know what to do.
Which would be the best solution for my problem? thank you
firebaser here
A Firebase project can currently contain up to 30 app definitions. This is meant to support variations of the same logical application. For example, having an Admin app in addition to the app for regular users, and/or having an iOS, Android, and Web version of the same app, and for example having a free and a pro version of the app (if that is allowed by the stores where you deliver them).
Adding multiple apps to a project is expressly not meant to be used for white labeling apps, where you ship essentially the same app with different branding to different user segments, as you'd be sharing the backend services between them. For some backend services (such as database and storage) this is not necessarily a problem, as you can isolate the customers with security rules. But for other services (such as authentication and analytics) this is not possible, which is why this use-case is not supported.
If you need to define a separate app in the project for each customer, the only supported approach is to create a separate project for each customer.
I'have read that is possible to have an unlimited number of apps inside one Firebase project.
In that case please provide a link, so we can either fix it, or (if it's not in the Firebase documentation) leave a comment to clarify.

How to make Ionic app work with an API written in Laravel but still works offline

I would like to ask how to create an ionic app that talks to Laravel API but still works offline when there's no connection.
Let's say i have to write a quiz mobile app in Ionic and it requests for Laravel API to retrieve the questions as well as store the scores in db.
I'm just starting to learn Ionic and i'm really confused right now on how to approach this.
What confuses me most are:
Does the Ionic source live inside the Laravel source code w/c serves the API?
If i want the Ionic app to be installable, should the Laravel source code be included as well during the compilation process?
Thanks in advance for any help.
Your php or in general server side code is completely independent from your ionic application. If you want your app to work offline you should think about something like fetching a high number of information initially and work with this data without making any additional requests.
However your ionic app does only contain the frontend. You could implement some logic for local storage, but if you want to keep information hidden from the user (e.g. solutions) you have to put that logic on a dedicated server.
In the few details you provided, I can say the Laravel code does not live inside the ionic app. The ionic app is separate from the backend API by Laravel. You are possibly trying for a ReST based architecture where you communicate with your Laravel Server with an API. You need to keep those codes separate.
However without any internet, you won't be able to access those APIs, so you will just be able to show some static data, or you could serve from a DB and show later. For how to use the sqlite db you can look here
In your backend you can have an API like
http://example.com/api/v1/questions/1/
Which will fetch a question with options and if you want the app to have the answer for offline storage you may have that as well. When a user answers, you may check whether you have internet access and send answer and verify if you do, else you may save the answer in your DB and sync when you do have access. You can fetch multiple questions so that a user may answer multiple questions in case he/she will not have internet access.
Hope it helps. :)

Multiple domains with the same application running firebase as the backend [duplicate]

This question already has answers here:
How do I make a custom subdomain on Firebase?
(2 answers)
Closed 6 years ago.
I'm looking to build a single page application, preferably with angular on the client and firebase as the backend. As for the general data storage there are no need for advanced queries and no need for something like Mongodb along with the MEAN stack for example (which I'm most comfortable developing in otherwise). On the server side firebase has sufficient requirements for what we are looking to build. My question is and what seams to be very hard to find any information about is:
Is it possible to use **multiple domains with firebase running in the background with the same application and database for each and every domain?** (Possibly using node as a static file server alongside with it if firebase isn't enough to tackle this on its own). What I mean by this is that we want to be able to build the same system for our clients but on their separate domains.
The goal is to have a server side application running all the same backend-logic with multiple websites and with angular change the front-end components depending on what domain the user visits. (This has already been fixed and works properly with angular).
I'm not able to find any information about this other than using multiple applications with the same domain. This is not what I aim to do. And the firebase documentation isn't as much help either. The firebase hosting capabilities are the issue for me here and if anyone could point me in the right direction on where to get started it would be very much appreciated!
I've looked around for other alternatives when it comes to routing such as using vhost middlevare with the express framework or Nginx to setup some proxy of some sort but I recon that this shouldn't be necessary or at all possible to use with firebase. And I hope that there's maybe a more straigh-forward approach.
Here is an active issue on using a proxy with firebase:
(Active as of now: June 2016)
https://github.com/firebase/firebase-tools/issues/155
Thanks and I hope this is appropriate to ask in this forum, otherwise please do let me know where I can find more information about this.
I eventually found out what I had to do and it now works the way I need it to. Hopefully this can help if anyone is wondering the same thing in the future.
In the firebase console you can add authorized domains by going to:
https://console.firebase.google.com/project/THE_PROJECT_ID/authentication/providers
and adding the set of domains to your application. (Initially localhost and the firebase-app domain is set when creating the app)
and for test purposes setting the hosts in the GNU. (I'm using mac.)
sudo nano /private/etc/hosts
I'm now able to serve the same application on both: foo.com:5000 and bar.com:5001 just as I was looking to do from the beginning.

Website that communicates with Server

I'm a newbie. Im thinking about developing a website that people can be come members of and login. I know that ill need to have a server with a database to store info. What i need to know is, do i just need to create the server host site host it and then have my website hosted somewhere else. To sum up, what's needed in the process of developing this type of site?
No, you can host everything in the same server. Back-end and front-end are words just to describe the organization of your code, being HTML, CSS and Javascript files your front-end, and the rest your backend.
Most host services today have Ruby, PHP and ASP supported by all plans, just as MySQL. There are no need for developing two parts in your application - but you can do that if you want.
I suggest you start by studying what is the MVC structure.

Resources