React.js: How to create Google Authentication with separate Frontend and backend folders - node.js

I'm currently building a project in React.js (Node.js + Firebase) where I have my frontend and backend folders separately. Both front and backend folders are located in the root map named "Fullstackproject", and each has a package.json.
As I have installed firebase-admin to my backend project. I have already created a database that is working fine!
Now I'm trying to implement Google authentication by creating a Login page in the frontend project, but it seems like I'm not able to import Firebase settings such as (import {sign} from 'firebase/auth') because my frontend doesn't have the Firebase package installed
Do I have to install firebase to my frontend project as well?

Related

Heroku Angular Preview app connecting to backend preview app

I have an Angular app that connects to several Nodejs apps. Each of these apps are in different repos.
Frontend
/ \
Backend1 Backend2
In the Angular app we have a typical environment.ts and several environment.<env>.ts In each of these files we have the URLs to the different backend services that we make calls to.
I would like to setup the heroku preview app for each repo when we make a new Pull Request in any repo(I think). In many usecases I have the normal preview apps working fine.
✓ Make style changes in the angular app
✓ Make a change to the computation of data in one of the back end services
✘ Format data in a new way to display in a new component
This example creates a new change in the Backend1 service and the Angular App
The preview environment for Angular app will use the normal Backend1 URLs and not get the changes from the new Backend1 Preview app.
Somehow the environment.ts needs to change or a environment.<preview_id>.ts needs to be created and used in the build.
Is there any configuration for this or am I looking at some heavy devops work?

Can I only deploy the server side of my react native app to Heroku?

I have a react native app that I'm building using expo. For the backend, I am using node.js and Express.
My app hierarchy is such that I have a frontend folder and a backend (server) folder. For example,
Root
|
|Frontend
|Various screens & associated files
|Server
|Routes & other files
For my project, is it possible to just host the backend and not the rest of the app? Such that when I fetch data in the frontend using HTTP requests, instead of routing through localhost (http: //RandomIP:PORT/route) I would use the heroku address as the routing address. I would also host the SQL database along with it.
I tried to follow along with the Heroku documentation, but it seemed like that was for hosting the entirety of the app / web apps instead of mobile, and I ran into constant errors.
I would like to point out that, unlike web pages, mobile apps cannot be hosted on the server and fetched on-demand. In other words, do not try to upload your react-native code to Heroku instead just upload your backend only and then make HTTP requests through the URL provided by Heroku after you have deployed your code.
Therefore go into your backend codebase, initialize a git repository and just deploy that Heroku. Also, you will need to host your SQL database on another service such as Google's Cloud SQL or Amazons AWS Database Services.

Deploy a nodejs project in Microsoft Azure containing backend only

I am developing a angular project with node js as backend. In the backend microservices are used. Frontend and backend are seperate projects. I am trying to deploy both in azure. I was able to deploy the front end properly. I tried to deploy the backend too. But it was not successful. Does anyone know how to deploy a node js project with backend only in azure ?
UPDATE:
The thing is that I don't have a dist folder to build the node project. It just contains a server with microservices. What we do is we will use npm start to run it. When I try to hit the backend from the frontend, I get an saying that "You don't have the permission to view the directory or page".

How to hide node_modules in azure web app

I'm running an azure app service that includes both a front end (Vue) and a backend service (express). I was notified that the node_modules folder containing the packages used in the backend was still browsable. Considering the security implications of revealing which (versions of) packages are being used, I would like to prevent access to this folder.
The folder structure of the app looks something like this:
wwwroot
---node_modules
---src (contains built express api)
---static (contains built vue app)
---web.config
I'm using Azure pipelines to build and deploy the app. This pipeline includes node modules in the deployed .zip archive.
The app is deployed on a windows app service, using iisnode to run the app.
What steps can I take to shield the node_modules folder from browsing?

how to deploy the nodejs expressjs for api, reactjs for frontend and angular for admin

How can we deploy the nodejs with SSL certificates,
I have expressjs for API, reactjs for front-end and angular for backend,
i need a path like - https://www.domainname.com - for frontend https://www.domainname.com/admin for admin and expressjs api run on background with https. like https://www.domainname.com/api/register
I have merge the expressjs and reactjs into one project and it works fine on local machine but how i can run the admin like - http://localhost/admin (it works with port like http://localhost:4200) but i want with admin. Please let me how to achieve.
You could host your admin application separately and use a CDN like Cloudflare to serve it as a subdomain (admin.domainname.com). Cloudflare comes with free SSL.

Resources