Basically, there is an existing web app built in ReactJS that the developer no longer maintains, but has a public GitHub repo for the app. I was hoping I could simply clone the repo and deploy it to Netlify to get a working clone of the app that I could then make edits to (I have the developer's permission for this), but when I attempt to do this, the web app doesn't appear to build, as the webpage is blank except for the site name and favicon. This is without making any edits to the production code that is already successfully deployed elsewhere. I have very little experience with React (and web development in general), so would really appreciate any help in troubleshooting this. Is there something else I need to do to get my fork of the repo to build properly when deploying? All I'm trying to do at the moment is successfully publish a clone of the existing app before I can begin making updates.
Some relevant links in case they are useful:
Original GitHub repo: https://github.com/Huuums/baseball-superstars-deckbuilder
Existing (working) web app: https://basu2020-deckbuilder.netlify.app/
My fork of the GitHub repo: https://github.com/ryangillman/baseball-superstars-deckbuilder
My (not working) deployed app: https://basuclone.netlify.app/
Let me know if anything else is needed from me. Thanks in advance for any help.
This app uses api under the hood and requires some information from the database (Firebase database).
Error from the browser console:
Your API key is invalid, please check you have copied it correctly.
Required API key, from the https://github.com/ryangillman/baseball-superstars-deckbuilder/blob/master/src/firebase.js file:
apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
As I understand, you can't use this code without database.
Related
I'm trying to Publish/Host a ReactJS project on Bitbucket. the project was bootstrapped using create react app, therefore the index.html file is within a public folder i.e. root/public/index.html.
i have followed the instructions on https://support.atlassian.com/bitbucket-cloud/docs/publishing-a-website-on-bitbucket-cloud/ but i cant seem to get the site to show.
the url's i have tried are [workspaceID]/ui-library.bitbucket.io and [workspaceID]/ui-library.bitbucket.io/public (ui-library being the repo name). Both of these return repo not found or just google search results.
am i doing something wrong here? i'm new to Bitbucket, i would have previously used GitHub and GitHub pages for things like this.
thanks...
Here is my directory structure
app
frontend
backend
I don't have a package.json file in the main directory but both the frontend and backend have package.json files.
The frontend is a fully functional NextJS app and the backend is an Express server handling api/data requests.
I have one repository for the entire app. My goal is to push this app in its current structure to Heroku, set up whatever environment variables I need, and have Heroku deal with the build details. I have yet to find any tutorials or any SO questions that target my instance specifically.
So far I just tried to push the whole repo but this is there error message I'm getting:
remote: Compressing source files... done.
remote: Building source:
remote:
remote: ! No default language could be detected for this app.
remote: HINT: This occurs when Heroku cannot detect the buildpack to use for this application automatically.
remote: See https://devcenter.heroku.com/articles/buildpacks
remote:
remote: ! Push failed
I'm assuming this is because there is no package.json file in the root directory to tell Heroku what to do. I don't have enough experience to know if this really is my problem or not. Unfortunately, I don't really know the direction I need to go here and I'm having a really hard time finding tutorials or any help when I search about this. I'm coming to understand the process and details a little more as I go along but I could definitely use a good explanation as to what I need to do, how I need to do it, and why I need to do it. I know I'm asking for a lot but anything helps. Thank you.
I would suggest restructuring the project so that it has a package.json in the root folder. A simple way to make it work is by letting the Express app serve the NextJS app.
I was having the same issue as you. I realized that deploying a NextJS app isn't as straight-forward as deploying a Create-React-App app. I ended up following the official recommendation of the NextJS team for deployment, which is to let Vercel serve it.
It was actually incredibly easy. I managed to deploy the NextJS app in a matter of minutes. Create a Vercel account, add a new app and deploy it.
The downside of this is that you will use Heroku for deploying your backend, and Vercel for deploying your frontend. But if you are using GitHub for example, Vercel will automatically re-deploy your NextJS app everytime you push to your main branch. So, in actuality you won't even have to do much in Vercel after deploying it the first time.
There are probably other ways and workarounds, but according to Vercel (who by the way are the creators of NextJS), deploying it with Vercel is the easiest way.
Hi everybody im actually working for a company and they are asking me to show them my React Website while im working on it. They have a website that is connected to our GitLab Project and if i type http.websitename/folderOnGitLab it actually comes out whats inside the folder but with react it shows the code , not the website , because the only way i know how to open react app is by "npm run start" from local, i dont really know how to "append my app in that website from GitLab" . I have already pushed all my React App but i dont really know how to make that visible to everyone as a website not only as a code. The website is a website they host so is always online and is connected to the project as i said. So i kinda have all the material but dont know how to make that work. For example i have pushed Test.txt and if i type website/Test.txt it shows the inside of it , so the website works.
It depends on how your app was set up, but probably you need to run npm run build, which will package up your app to be used on a production website.
This will be in the /build folder, the contents of which can be hosted online.
I'm not sure how you've managed to get that folder working on that website, it definitely isn't best practice to have all the code hosted online like that, but for a temporary solution you can just go to http.websitename/folderOnGitLab/build and it will probably work.
In the future you want to copy just the contents of the /build folder to be visible on http.websitename/folderOnGitLab.
Edit: The /build folder will be excluded from git, don't put that on GitLab, just the other source files, as you can re-generate it any time by running np run build
You can try using heroku. Once you push to heroku, it deploys your code and provides a url which you can share. It's free.
https://blog.heroku.com/deploying-react-with-zero-configuration
Are you using gitlab pipelines?
If yes, you can configure ngrok in one of your jobs.
If someone wants to see your work, this person just need to play the job that have the ngrok tool and it will receive a custom link with the application.
To stop the app, you just need to click in the cancel button
I want to know why deploying a React app to GitHub Pages is different than the usual way of creating a repository by naming it as {username}.github.io then pushing the build files there.
According to GitHub documentation not following the naming convention won't work but gh-pages creates a repository that doesn't follow the convention and still works but at http://{username}.github.io/{repo_name}.
And why is that we cannot deploy the app at http://{username}.github.io?
Thank you.
I need to create one demo app which will have the technology stack as
UI: angular.js
backend: node.js
Database: MongoDB
I can use Github to store the repository and need to deploy it on heroku.
can anyone suggest me how can i Do that?
There are so many tutorials for this. Just look on the Heroku website if your problem is that you don't know how to deploy (Look at the Heroku git toolbelt), if your problem is that you don't know how to make a MEAN app (MongoDb, Express, Angular and Node) then I can forward you to this tutorial which I found really helpful https://scotch.io/tutorials/setting-up-a-mean-stack-single-page-application and https://thinkster.io/mean-stack-tutorial. I would also advise that you look into technologies such as Gulp and using Typescript with AngularJs if you weren't already.