I am new to using Reactjs, I just finished a project for a client and I need to upload it to a domain on GoDaddy. I ran npm run build already and I now have a build folder. I'm just not sure how to proceed. Can somebody please help me?
A domain name is not enough, you need to host your application somewhere. You can use netlify or zeit (both have free tiers) to deploy your application. After deploying the app you can link your domain to navigate to the application.
There's a few options, but heres a simple one to get you up and running quick. Upload to github repo and link your github account to netlify. In the netlify account deploy your project which will show at a random netlify domain. Change the nameservers in netlify to point to your godaddy domain and your app is live.
Related
Being kinda new to React and everything clientside related, I am trying to build a Electron application with React.
At this point I can't tell if that's a good idea, but I wanted to try it.
Currently it works fine (see Github).
However I now wanted to add #react-oauth/google to give users the option to sign into their Google Account to allow the application to access their google drive and I'm struggling with that.
See the testing_auth_2 branch for that.
I enabled the drive-api in GCP and created credentials for a web application, adding http://localhost and http://localhost:3000 as authorised Javascript origins.
Now it works, but only when I start it as a webpage (npm start in my Github)
Starting it as an electron app failes, probably because electron doesnt run under localhost somehow (npm run electron:dev in my github code).
I tried creating Desktop and ios credentials since those dont ned authorised origins but the error persists.
Steps to recreate:
Enable drive api and create credentials in GCP
clone git#github.com:Urr4/electron-archive.git
checkout testing_auth_2 branch
Replace XXX in index.tsx with the client_id
The Google login should work using npm start, but not using npm run electron:dev
Any help is appreciated
So I have this normal React app that is deployed in Netlify.
Then I tried using AWS Amplify for my authentication. All went well in my local.
The problem is, I think I would not be able to deploy it properly to Netlify anymore because of the aws-exports.js that is dynamically generated. Or can I? Is it still possible to deploy a React + Amplify app to Netlify? Or I have no choice but to deploy it to AWS?
UPDATE: I was able to deploy it successfully on Netlify by commenting out the aws-exports.js in the .gitignore. The problem now is how could I have different version of the file for different environments (e.g. Dev, Stage, Prod).
I am new to React. I have created a simple React application. I wanted to explore deployment and hosting options for React. I have worked previously in Angular and it can be deployed in IIS. can we do the same for React. Please enlighten me.
According to your description, I suggest you could follow below steps to host or publish the application to IIS.
1.Open cmd and locate your react application folder
2.Build the project to production folder.
npm run build
3.Open IIS management console and create a new web sites and use the build path as the physical path. for example: D:\ReactAppTest\my-app\build
Notice: You should pay attention to your port number.
4.Then you could use that port number to access your react application. For example: http://localhost:9965/
I am currently trying to deploy the default react web app to Azure and I am encountering an issue where though I deploy the contents of my build folder to the azure hosted /site/wwwroot folder I end up on the following page when going to my hosted address: https://[project_name].azurewebsites.net/
Landing Page :
I intend to deploy the default create-react-app react application so that I may have the process down for when I deploy my real site.
The process I have followed is pretty much exactly what is mentioned in this article https://medium.com/#to_pe/deploying-create-react-app-on-microsoft-azure-c0f6686a4321
Create the default React App with create-react-app
Run "npm run build" to get the build folder
Go into the Azure React Portal and create a new Web App ***
FTP / Git deploy the contents of the local build folder into the Azure website's /site/wwwroot/ folder
For overkill I added the below web.config file to handle future routes, but have also tried without this step
In the end my Azure site's contents look like this
Folder contents :
At this point when I try to access the Azure site I get the "Hey, Node developers!" page which implies my code is not deployed. Any thoughts as to why this might be the case?
*** I have a hunch that during the configuring of the Azure Web Api something is not set up correctly perhaps because I select Node 10.14 as my Runtime stack simply because that is the version of Node that I have installed and am using with my local React app.
Thank you folks for your time.
Another approach is to configure Azure Linux Web App Service to run a startup command to serve your React app in "Settings > General settings > Startup Command":
pm2 serve /home/site/wwwroot/ --no-daemon
Remember to change the path to your build path (The path to your index.html file).
If you use react-router and wants to make any direct access on custom routes be handled by index.html you need to add --spa option on the same command.
pm2 serve /home/site/wwwroot/ --no-daemon --spa
Using --spa option pm2 will automatically redirect all queries to the index.html and then react router will do its magic.
You can find more information about it in pm2 documentation: https://pm2.keymetrics.io/docs/usage/pm2-doc-single-page/#serving-spa-redirect-all-to-indexhtml
I've coped with the same problem recently: React router direct links not working on Azure Web App Linux
You have created a Linux App Service - your web.config won't work because there is no IIS.
If you don't select node as the runtime stack, your app will work for the most part because it serves the files like a static web host. However I would suggest to keep the runtime stack as node and add the following file to your deployment in the wwwroot folder:
ecosystem.config.js
module.exports = {
apps: [
{
script: "npx serve -s"
}
]
};
https://burkeknowswords.com/this-is-how-to-easily-deploy-a-static-site-to-azure-96c77f0301ff
There's an extremely simple way to overcome this problem, and although it is not perfect, it works both on AWS, Microsoft Azure, and probably any other hosting:
Just point the error document to: index.html
I found it out here:
https://stackoverflow.com/a/52343542/3231884
Disclaimer: This solution is not perfect and impacts SEO. Google doesn't rank well sites that throw 404s.
So I finished the Tour of Heroes tutorial. I understand it and can alter and have fun and what not. Got a git repository from Visual Studio Team Services for the app. Now here is where I'm lost I just want to build web based apps for now. How do I get the app on to my hosting to display as a website. I can't seem to find any tutorials (or once that I can understand) online for this.
If anyone can help with this or point me in the right direction it would be greatly appreciated.
Thank you
You can refer to these articles to deploy angular app (part 1 and part 2).
Simple steps:
Use NPM and gulp build tasks to build and package your app
Deploy package to azure or IIS.
There is IIS Web App Deploy task in IIS Web App Deployment Using WinRM extension, so you can install this extension and deploy packaged app to IIS if you want to deploy app to IIS.
Your hosting provider probably gave you a FTP access to a root directory for your website.
Upload the project over there and make sure there is an index.html file there, that pulls all the relevant JS files into place.