I finished my first fullstack (React/Go) app and everything works locally but I'm having trouble with the next steps especially since I'm new to this. I read Heroku was a good choice and I was able to successfully deploy my Go code there and test it via Postman, however I'm having trouble getting my React code introduced so when I visit the Heroku app it displays the React UI. Is this an option on Heroku? Both my frontend and backend code are in the same Github repo if that makes any difference. Any advice how to both deployed together?
I'm pretty sure I have to use the build version of my React code but not sure how to go from there. Go can also be compiled into an executable. Could I theoretically do everything using just this executable and the React build project? Thanks for your help!
I'd recommend trying https://firebase.google.com - you can deploy apps for free, you'll get a free '.web.app' host, and you have some DB solutions also available for free, if you ever need them. The easiest way would - to compile everything into a build folder or something and simply upload it there. You can later buy a domain name and link it, but for the start is should be sufficient as it is.
Related
I know you may find this question idea based, but as I'm newbie to react, I haven't had other places to ask.
I have created a single page react app using create-react-app and exported production version into build directory using the command npm run build.
Due to SEO friendly problems that react apps have, I decided to go with react-snapshot and react-snap but the first one is too old and deprecated and the second one has too many issues in its GitHub repo.
I should mention that I know about NextJs, Gatsby, Cloud pre-rendering and other ways. But I want to deploy my app to a serverless cloud like Vercel.
I wonder what happens if I render the production version in my browser (Lets say Chrome) and export rendered html, js and css into a single static HTML file? Remember that my app is made of several components, but the URL won't change because the whole app is in a single path/route.
I guess there would be some problems in different browsers!
I have found that it is possible to host a NextJs application on vercel. Besides, I went for vps.
Anyway, for future readers, I guess the best decision in my case was NextJs, which is very fast and light in production.
Note: If you find this Q&A useless, just let me know in the comments so I'll delete it.
I have created a three page react application using react-router-dom that also uses a proxy to make calls to the node API on my web server. When running the application in development everything runs as expected. My issues are after building it no longer renders anything on the screen. The weird thing is that I'm not receiving any errors in the console but through debugging I've noticed it does load the page until I call my API and then it goes blank. Does anyone know why this may be affecting the production build but not the development build? I've added:
"homepage": "."
to my package.json as it worked for someone else who asked the same question but it has made no difference for me. I've linked the code if anyone wants to take a look. Any insight would be greatly appreciated. Link to code
For anyone else who may stumble across this. It was due to issues with the proxy in the package.json. After removing the proxy and calling the API manually, there were no longer any issues.
I made a simple CRUD application that is supposed to be an appointment manager based on Traversy's Task Manager (found here: https://www.youtube.com/watch?v=w7ejDZ8SWv8), and now I'm trying to publish it.
I have found a number of guides but none have helped me. I'll list them below:
https://dev.to/nikita_guliaev/deploying-create-react-app-with-json-server-as-backend-to-github-3pp9
https://github.com/YoussefZidan/fake-server
https://www.youtube.com/watch?v=5cbFLDe4OAA
The one that I believe came the closest to help me do what I want is the first one listed. If I follow it to the letter, all I get is the background but nothing else. I experimented trying to run it on my pc, changing the fetch requests from localhost to https://my-json-server.typicode.com/jmiguelcastellanosj/ap-m/appointments but it didn't work. I removed the homepage property from the package.json file and it worked on my computer (changes didn't persist, but from my understanding that's expected from the service provided by typicode), tried deploying it but it didn't even load the background.
I could describe my other attempts with the other two guides, but other than finding out that heroku exists, I don't think I got much useful learning from them.
Ideally, I would like the changes to persist after reloading the application, but right now that seems like a pipedream considering it doesn't even work once deployed.
I have a feeling that the reason for this app not working is related to the fetch requests (found in Dashboard.js, AddAppointmentForm.js, EditAppointment.js, Appointment.js), but I really don't know.
This is my first time trying to deploy anything, so I have no idea what it is that I'm missing or doing wrong, and having spent days trying and failing at this, I'm at a complete loss on what to do. Help would be greatly appreciated. Thank you.
My repo can be found here: https://github.com/jmiguelcastellanosj/ap-m
Right now it should be able to work locally with json-server as backend.
Before building set your "homepage" in package.json to "https://jmiguelcastellanosj.github.io/ap-m", this will let github pages load your files properly.
Also if your routing doesn't work properly, in each of your routes add "/ap-m" in front of your path (So path='/' becomes path="/ap-m")
I have hosted my react app in https://dev.newrohanamotors.lk/frontend/ here.
But it doesn't load the login page.
But It will change the title of the page.
Working well in local.
Can you please help me ?
Thank you
Try building as a production build and try again, Sometimes I also face a similar kinda situation, It's just that you have to reinstall all the supporting packages and build an optimized build and they try deploying. Coz, Its subjective reasons may differ from case to case!
I have finally decided to start a full stack project, a note taking app similar to Google Keep.
I made an REST API using this tutorial:
Build a Node.js API in 30 Minutes or Less
Only problem is I don't know how to use it, outside of Postman.
I am fairly proficient at the front end, but the back end is now what I need to focus on learning how to use. I understand what is going on with CRUD and the general idea of what a REST API is (not 100% sure about this just yet), but hooking it into the front end is still eluding me.
I have built other apps before using Angular, just not with my own API. So, I am sort of treading water here.
So you don't need to go through the tutorial.
Backbone of the API that the Tut uses these:
MongoDB (MongoClient, hooks into an mLab database)
Express
bodyParser
nodemon (only used for restarting the server on saves)
In order to get the server to start, I have to run "npm run dev" or "npm start" from a Terminal, both achieve the same thing and open port 8000. Once it is running, I can use Postman. Everything works just fine on the backend and things save properly to my database.
The tutorial, unfortunately doesn't explain how to hook things up to the front end. I was told that I needed to use ajax calls to get it to work. I can do that, I've done it before with both Angular 1.x and jQuery. I just don't quite know how to set up the front end.
The big thing, is I want it to be all in the same repo, rather than in separate repos. Any help would be appreciated!
(Github repo will be here soon)
Was pointed to a tutorial that helps with exactly this!
Creating a Single Page Angular App with Node and Angular