I deployed my React web work as a test at Vercel but the API didn't work and my web now is Empty..
my project and api works perfectly in my localhost !
some one knows why ?
my empty web :-
https://web-3-0-prokect-1.vercel.app/
api code in the useEffect hook:-
https://github.com/Adelndf/web.3.0-prokect-1/blob/master/src/App.js
by the way im new in coding so some of my coding words or terms might be little bit weird :)
hopefully someone understand my issue here
Your API request is not successful because of CORS error. This usually won't be an issue when you try in localhost. To learn more about CORS, click here.
I fixed it with the easy way cuz at the end its just a testing project..
the solution if any one needed it is :-
i added ( https://cors-anywhere.herokuapp.com/ ) before my api ulr and it works..
u can see it in github link at the top
Related
Does anyone have any pointers on how to go about adding a /docs page for website documentation to a next.js app? I've looked up Docusaurus but it seems like it's already a react app itself. Is there a way to integrate it inside an existing next.js app or are there other solutions?
Many Thanks
One idea might be to intercept the request and send the html file that docusaurus builds out, and putting all other files in the public folder.
https://medium.com/wesionary-team/render-html-file-in-pages-of-next-js-59281c46c05
Also checkout this discussion about it.
https://github.com/vercel/next.js/discussions/12373
I have done this with React apps using express. But never with Next. At first it looks like it would be possible with multi-zone in Next but that doesn't seem to do the job. So my other recommendation would be to try to use a docs.domain.com instead and host it separately. Then you have a /docs url or a button that redirects to the doc domain instead.
Firebase has free hosting and allows you to setup multiple sites. So it should be fast to test this setup there
I'm going to actively try to get this to work with Next myself but I do not think it will work because of how they are developed. So I would do the above recommendation and if I find a workaround, I'll post an update.
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")
So I'm trying to deploy my first React application live. It is my portfolio webiste. Anyways, everything is working fine except for my routes. Locally, Everything works fine. However, now that I've deployed the website my routes do not work. When you click on any of the links it says the url cannot be found on the server, and it throws a 404 error.
The application is hosted by namecheap, and they said they cannot see anything wrong from their end. I just have no idea what could be wrong then as it all works find locally.
My website can be found at andrewschubert.website and the github repo for this can be found at https://github.com/theschubinator/my-portfolio If anyone has any ideas what I'm doing wrong I would greatly appreciate it!
By the way, it is a React Application. There is no database or API, just strictly front-end. The only links that are actually working are the ones that redirect you to an area outside of my application...like my blog on medium.
I can see that you've been using react-router lib for your routing. It is based on HTML5 history API, which is not supported by every host out there. If you are talking about your portfolio website and it's not so much of and issue where do you deploy it, try out some different hosts (e.g. surge is great for deploying static sites: https://surge.sh/).
React applications are single page. Routing in React means changing the components displayed when user requests a different url. You will need an api.
On every client request you return the same "index.html" which will display only one component. By creating a controller in your server you can map "/contact" to "index.html#contact" and your hashrouter can return the ContactUs component.
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
I am taking baby steps with AngularJS. I am a bit confused about requiring a webserver to run an AngularJS sample or demo. The reason is for study purpose I have downloaded running examples and demos, but not having any luck with it. A very simple demo of displaying a name is not working for me. Do I have to do anything specific to get a simple app running. I feel very weird asking my doubt requing a webserver as AngularJS is a client side Framework. Nevertheless, hoping someone can throw some light on this.
Thanks in adavnce.
If you use Firefox, then you don't need any server to have your basic app running. If you use Chrome, then for security reasons it doesn't like file-access to librairies. Librairies must be serve in another way. So you can have the hello-world AngularJS working by opening the classic index.html with Firefox, so that you don't have to start any web server.
Here is a sample application with explanations in the README :
https://github.com/davidb583/white-angularjs-app
Actually, you don't need a webserver to run AngularJS application since it is client-side framework.