I have created a simple CRUD RESTful API using Firebase Functions/Hosting.
Now I would like to build the corresponding frontend using React to query my API.
However, I have no idea how to cleanly add a new React app to my project folder and deploy it to Firebase Hosting.
This is my folder structure at the moment:
https://imgur.com/a/WwDxji7
The whole API lives in "index.ts" in the functions folder. (I know, not good to have it all in one file).
Where/how do I add a React App and deploy it to Hosting?
Your API using Cloud Functions is a separate project and your front-end App is a separate project. You may keep the two projects separate or together in the same folder is your personal choice.
Having said that, firebase-tools installs the project for cloud functions in the functions folder, so that your main front-end project can reside as the parent folder. Firebase has few files in the parent folder to store the firebase settings which generally do not interfere with your front-end app.
For deployment, you can deploy API and front-end app in same hosting or different, choice again is yours. In case, you deploy on the same firebase hosting, you can set up rules in firebase.json to differentiate the routes for your functions and app.
Related
How to publish ASP.NET 6 Web API with React Project to IIS
I followed this MS tutorial for creating an ASP.NET Core project with a React front-end - https://learn.microsoft.com/en-us/visualstudio/javascript/tutorial-asp-net-core-with-react?view=vs-2022. I choose the option to create my client app in a separate project outside of the ASP.NET core project.
I am trying to publish my project to a local IIS server but I’m running into a few snags.
I’ve followed the instructions in the Publish the project section of the same guide. When I follow those steps, my web api project and dependencies are deployed to the root of my IIS project folder, and the react web files are placed in a wwwroot directory within my IIS project folder. If I navigate to the site, I get a can’t reach this page.
I was under the impression that my single asp.net app could host both the react web files as well as my web API. If I should be deploying the react app and the web API to separate sites within IIS, what is the most effective way to update all my API paths in react once deployed? Right now all my web api calls are relative links “/api/resourcesA”. Finding this all a bit confusing as someone coming from Razor Pages and MVC.
From what I gather I will also need to update the “homepage” property in package.json to my site’s URL, and I will also need to install and configure a URL rewriter as I am using react-router. However, I feel like I am getting stuck before getting to these steps. Any advice/direction appreciated.
I refer to the document(https://learn.microsoft.com/en-us/visualstudio/javascript/tutorial-asp-net-core-with-react?view=vs-2022) on my side and I am able to reproduce the said issue.
It might create confusion as its combines the React project and .Net Core API in the single folder while publishing it.
You could refer to the steps below may help to fix the issue.
I assume that your project is running successfully from the VisualStudio and showing the data.
Go to Program.cs file and add these 2 lines.
app.MapFallbackToFile("index.html");
app.UseStaticFiles();
It should look like below.
For simplicity, try to publish it to Folder.
While creating the site in the IIS, set physical path like below.
While setting physical path, Select the site folder(don't select the wwwroot folder in it).
Visit the site in the browser.
I'm a novice to web development, and I'm making a website with react.js. I have a workflow set up with Github to deploy the website to Firebase Hosting whenever i push/PR.
The problem is, i have a config.js file that is gitignored because it contains the authentication to the firestore database for the site. The workflow will fail because there is no config.js (since i import it).
How can i deploy to Firebase through Github while keeping the configuration secure?
I finished my Udacity Cloud Developer nanodegree and I want to make a custom domain to showcase on my portfolio.
The stack I use includes: Api Gateway, Lambda, DynamoDB, Nodejs, S3 and Serverless framework. Frontend is : React.
However, Im stuck on comprehending how to deploy the full app, with React frontend?
Something like: anc.com would navigate to my app. I found many solutions mentioning about using serverless-domain-manager.
But what about my React front end? I read some solutions saying to deploy static web using S3.
But my app currently has S3 to store the uploaded images.
If I deploy my frontend with S3, do I have to make 2 S3 buckets?
Currently, I have to use 2 terminals, SLS deploy for backend, and npm run start to run the front end at localhost.
My github code:
https://github.com/ploratran/DogLookBook
The team at Serverless has also released a tool called components, one of which looks like its perfect for what you want to do; it automatically handles everything on the cloud to get your React files hosted and a domain assigned too: https://github.com/serverless-components/website
I am very new to deploy Django and AWS. So now I would like to deploy my separate project (drf + react) to AWS.
So How can I deploy the separate project to AWS?
EC2 vs Elastic BeanStalk which one is better for that kind of environment?
I already search for one day but I found nothing useful information and found the similar thing but I don't understand like that=>
Deploying Separate React Frontend and Django DRF API
You asked a difficult question. I think I can make it bit easy for you.
First let's look at the differences in the options.
Serving the front end app
Option1: Django to serve react app
In this option, the Django app will serve your app in a route for e.g /app/. Basically the route /app will load react app's index.html. it's that simple.
In order for this to work, you need to build your react app using npm run build and copy the files to Django's static folder. good so far?
One of the benefits option 1 gives, option 2 doesn't is, you can use the same domain for backend and frontend for e.g www.example.com.
Option 2: deploy front end in S3
You still need to build the react app using npm run build, but you will not copy that to Django, in other words, you don't want to Django to serve your front end app, you want s3 to serve the static website. this method requires a separate subdomain or domain to host the react app.
Thats is the only difference between the options. Your frontend app will make api calls to the Django api, thats same for both options.My preferred option is option 2 to reduce complexity.
Deployment
I would pick elasticbeanstalk because it's easy to start with. You can do everything in the elasticbeanstalk console from load balancer to SSL, Healthcheck, Changing EC2 Keypair for EC2 Instance etc. Deployment is very easy. It supports multiple environments, You can use one AWS account for your test and production environments.
I have a react JS web app hosted on firebase.
I would like to know how to deploy different versions of the web app.
Example myapp.com/1.0.0 and then another version myapp.com/ -> being the main version
Firebase Hosting represents your public directory exactly as-is. If you want to deploy different "versions" of your app to the same Firebase Hosting site, you'll need to have some kind of process that can put all of the versions you want to deploy into a directory structure and deploy the whole thing.