I am setting up two websites under the same Firebase project for the first time and need some guidance.
The first website is a React app and it already works.
For the second site I created a folder named SecondSite. I also created a subfolder called public under SecondSite. At this point public only contains a static HTML file (index.html) that I am able to serve on the second web site. I did that following a couple of documents and tutorial that I found.
Now this is what I want to do next with my second site, I want it to serve JSON contents that I plan to get from the contents of the realtime database in my Firebase project. What is the minimum I need to do for that?
I believe I need to do some more setting up inside the SecondSite folder (to be able to connect to the DB), like installing some node.js modules, but I am not sure how to go.
Related
I'm working on a project for adding an external pre-registration page with Stripe to a Wordpress website.
The wordpress is already in place. But the pre-registration page needed the Stripe module, working on back-end...
So I've decided to make a SPA outside this wordpress to have this pre-registrations set up for the next customers.
But now, I'm struggling from days to find how to put this project online, I may definitely need your help for that.
I have this file structure:
File structure
It's nothing more than a single page + a single css file and a single server.js file, that I need to start to interact with the Stripe API.
But I also need some modules like Stripe, which is the key function of this project.
I thought about bundling it with webpack (only the back-end, as the front is only composed of 1 html and 1 css file). Then upload it on my web host.
Haven't found any working way to do so.
I'd like to try some cloud services like Netlify, but I don't even think that it could work without bundling the server side
Everything works perfectly on localhost, but I'm absolutely unable to make it works in prod with a real domain name. And I'm already late to deliver it.
Do you have an idea on how I could do that?
Thanks
And then I should run node.js in putty?. Is this correct to deploy my app in a vps?
No. If your Express app is in the public folder, then anyone can look at the source code of your backend by browsing the public folder, which means that if there are any security vulnerabilities in routes, or connection credentials or passwords in the source, someone who's interested enough would be able to identify them (and possibly crate problems for you) simply by opening the file. The express app should live in a separate folder, one not visible to the public. The public folder should only contain files that you want clients to be able to access easily.
The current folder structure is like this:
root
-.github/workflows
-frontend
-backend
The back end uses NodeJS-NestJS/Express and serve static files from a React front end. The front end must be served by back end because some specific cookies are provided along with the static asset. For example, user must reach example.com/ to see the website, and the API is like example.com/someapi. Deploying the front end to example1234.com and make API call to example.com/someapi will not work due to missing important cookies.
App engine is used to store the back end, with Identity Aware Proxy enabled. Currently, I'm aware of 2 options:
Using dispatch.yaml, I believe this will not work as front end and back end are on 2 different instances, so different domains (e.g., example1234.com and example.com).
Using Cloud Storage Bucket, this will work but static asset must be publicly available. This is not allowed because an application is for internal use only. IAM is necessary, that said, an application itself also has a separate authentication layer.
Any suggestion or correction on my thought is appreciated!
Update - Solution
Based on the accepted answer, here is how I solved this.
Build React, and copy its build folder to a folder inside back end.
In nest-cli.json, include the static React build in NestJS build
"compilerOptions": {
"assets": [
"resources/build"
]}
Dynamically load static serve path during compile time.
All of this is done in a CI/CD pipeline.
If you must go through the backend to serve static files, serve them directly from the backend (and remove the value of static files that are served without any check).
IAP is a solution to prevent the access to static files but if it's not enough, you haven't other solution than my previous remarks (at least with serverless product, I'm sure you can do more customizable things with Nginx in a container or a VM)
I need to build a page builder where we want to drag and drop elements to a screen which become a config json object. Then I have to save that config object into a config.json file in the project folder (or somewhere where I can load it when re-rendering the app). We want live reload when editing the pages via this page builder.
The FE drag and drop app is built with React, and I can reach the point where I have the JSON object in memory.
How do you recommend me to do the architecture this for the BE side?
Is is possible to expose an API endpoint (with Express for example), and save the json file somewhere into the React App "/src" folder? or I can edit only files in "/public" folder?
What if I refactor my FE React app into a Next.js app? If Next is rendered in the server, does it mean that I can do the config file editing just before it gets rendered?
Is it better to create an independent Express App where I save all the config.json files? and then exposing them via API endpoints both for editing and reading?
Thanks in advance!
From your question I see that you are developing a app similar to wordpress where the users can easily create a page using drag and drop of elements. So here a configuration is need to persist the placement of elements.
I read all the three approaches mentioned by you and it seem the third approach will help you. You can run a express app and use a db to store the config setting as I find storing it in the file is not a good practice. Once the editing is complete you can make an api call to post the data to db and similarly while reading you can pull the data from db using api call.
I want my angular app to show a list of PDF files which were previously indexed by a solr server. The PDF file should then open in my app (pdf-viewer installed and working with external PDF files like this one. Since Angular can't access/display local files I thought I might use a node API which I'm currently using in my angular app to get some data from a db to also get the list of PDF files.
I just don't know how...
The indexed files have three fields (fileName, fileDir, fileAbsolutePath) which I can get by using the solr query (https://myServerAdress/solr/CoreName/select?fl=fileDir%2C%20fileName%2C%20fileAbsolutePath&q=*%3A*) in case it's relevant.
I don't need a exact tutorial on how to do this. A rough approach on how to do this would be sufficient and very helpful!
Screenshot and notes of the actual goal
You have to map the file name indexed to a path that your node application have access to - then make a request to your node application that returns the file. Either directly or through something like X-Sendfile.
Exactly how you do this will depend on the framework you're using in node.
Solr does not have any method to retrieve the actual raw file content for serving, so the absolute path you've indexed (or file name if you have a static dir) will have to be used. Be careful about not serving files or documents outside of your intended path.