created a sample react application which is running in localhost:3000. Now i need to host the same react application in sharepoint online. Any solutions to this.
Please check the steps in the blog below:
Build And Deploy The Client Side Web Part (SPFx) In SharePoint Online
1) Once you are done with the your local development, we need to configure a CDN path where we can host our files.
Go to the config > write-manifests.json file.
Here, enter your CDN path. It should be a path that can be accessible by the end users. It could be Azure or SharePoint or any thing else.
Modify it as below (sample code) and save the file:
{
"$schema": "https://dev.office.com/json-schemas/spfx-build/write-manifests.schema.json",
"cdnBasePath": ""
}
2) Now, you need to generate the files to be deployed.
For that run the below command:
gulp bundle –-ship
After this is done, you will find the a temp > deploy folder inside your solution as below:
Once this is generated, upload all the files inside the deploy folder to your CDN or Site Assets (as in our case). This task can also automated using advanced gulp tasks.
3) Now, we will create spapp file to be uploaded to app catalog.
For that, run the below command:
gulp package-solution –-ship
This will generate an sppkg file inside sharepoint folder as below:
Upload it to the app catalog. SharePoint will show you a popup and ask you to trust the client-side solution to deploy.
Click Deploy.
After that, you can add it like you add an App in a SharePoint site.
Related
Today i've deployed my client react app to Azure App Service. The problem is, that instead of displaying site im interested in, it returns structure of wwwroot. Even if I change directory to /src/App.js it return code of the App. What is the problem?
When you run a node application on Windows Azure Web Apps, IIS is used as the webserver together with iisnode and most likely some configuration is wrong so IIS doesn't know what to start. I'd suggest to let Azure handle the creation of the web.config and you don't touch it unless you know what you're doing:
Create a file .deployment with the following content
[config]
SCM_DO_BUILD_DURING_DEPLOYMENT = true
Put the .deployment file as well as the content of your React app (don't include web.config, you also don't have to include the node_modules folder, Azure will handle this as SCM_DO_BUILD_DURING_DEPLOYMENT is set to true) into an upload.zip file.
Delete the content of /wwwroot in Azure
Run az webapp deployment source config-zip -g <ResourceGroupName> -n <AppServiceName> --src upload.zip
A new web.config should get created which should contain a handler for server.js which will be the file to be served by Node.js.
This is solved. Thanks to #azium
The only thing i needed to do is run
npm run build
in local before deployment
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.
I am wondering if it is possible to deploy react.js web app that I've built to a share hosting site that does not have node.js installed?
I use webpack to build the application and it creates normal html, js, css file. I uploaded the static folder that includes all those html, js(bundle.js) and css files, but when I request the site, the server reply with 404 bundle.js not found response.
Use npm run build, you should get a folder with the index html file inside that will run your app. Try this with xampp first before you actually deploy to your server.
Here is everything step by step
npm run build
or
yarn run build
it will generate a build folder that looks like this:
Copy everything and move it to the htdocs in xampp or ftp upload the directory to the public_html file in your hosting
Yes you sure can put react on a shared hosting provider.
Seeing as you're getting a 404 error (not found), you are probably referencing your react file/bundle incorrectly. It might not even be named bundle.js if you're using a boilerplate to create your application.
Can you give more information? What does your index.html file look like? What does your directory structure look like? If you are able to post these files I can tell you what the issue is.
Update:
The answer below should be accepted. (Although this would assume that you have the ability to make a build which you have not verified or not.)
Make a build using the build command through whatever boilerplate you used. Deploy those files on your shared hosting server. Make sure that index.html is at the root of where your server is expecting the root to be and your app should be live.
For deploying a react app on a shared hosting you need to create a production build. Production build is a pack of all your react code and its dependencies.
in most shared hosting we put our site/app inside a public_html directory so if we hit www.yourdomain.com it serves the code from public_html directory.
so if your react app is ready to go, edit your package.json file add a new key value:
"homepage":"http://yourdomain.com"
then create a build using following command:
npm run build
after running the command you will see a new directory named build in your app root. It will contain js and css for the app and a index.html file. You need to upload all the content inside build directory to public_html directory, and that's all, go to your domain and your app will be working just fine.
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.
My Azure web app deployment from Dropbox does not work.
I have an App service running. I am trying to deploy my React Webpack app. I have tried deploy from my Bitbucket repo, but that whole project is loaded into D:\home\site\wwwroot and just sits there since Kudu apparently thinks it is a node.js app. From what I've read Kudu does that with any git deployment with a package.json file. So I tried to deploy from Dropbox instead. I set up my app's source correctly to my Dropbox/Apps/Azure/ directory and then clicked Sync. I got the following result:
Title
Synchronization Request Submitted
Description
The repository for web app is being updated.
Status
Informational
Timestamp
Wed Nov 23 2016 08:44:09 GMT-0500 (Eastern Standard Time)
UTC Timestamp
Wed, 23 Nov 2016 13:44:09 GMT
Correlation IDs
447bf0d0-a533-49dd-898a-57b5be6b5738
Percent Completed
100
But the bits at D:\home\site\wwwroot still show the code from the old git repo deploys. At my Dropbox page I have the bits that I want to deploy, namely from the build folder after a Webpack build run. They have index.html at the root, so I expect it would be served correctly if just copied over to Azure.
I am quite new at this whole Azure thing, can someone help?
EDITED WITH MORE INFORMATION BELOW.
To be clear, I am not deploying any code like app.js/server.js contained in a wwwroot folder. I have copied only the results from a Webpack build run over to the Dropbox folder that is specified to Azure as the source. That Dropbox folder looks like this:
asset-manifest.json
favicon.ico
index.html
splash.css
static
css
main.63e4d058.css
main.63e4d058.css.map
js
main.68797484.js
main.68797484.js.map
media
dell-300-426.b435b6bd.png
duck.1d942aad.svg
example1.9443ef49.png
icon_question.3672f035.png
ipad-montecarlo-demo.2d964854.png
moneyplan-imac-300-552-new.8814ce0f.png
web.config
The index.html file has a script tag with code that points to the main.68797484.js file, which is the bundled app code.
But in Azure Deployment options, after clicking Sync,
the result reads "No deployments found", even though there was a notification that "The repository for web app is being updated."
I created a repo that should solve this problem with automatic deploys.
https://github.com/ulrikaugustsson/azure-appservice-static
In short it will build the project and then copy the build folder to wwwroot.
Per my experience, if app.js/server.js is contained in wwwroot floder, then Kudu will think it is a node.js app and generate the web.config. So if your app is not node.js app, the wwwroot floder should not cover neither app.js nor server.js.
For your reference, I wrote the react & webpack hello world project and successfully deployed to Azure. Below is the concrete steps, could you please have a try?
Put your project to GitHub repo which is similar to Bitbucket. And both of them offer great Git services, here you can use Bitbuket instead.
In your app's menu blade in the Azure portal, click APP DEPLOYMENT > Deployment options. Click Choose Source, then select the deployment source.
In the Deployment source blade, choose the project and branch to deploy from. When you're done, click OK.
In the Azure portal, click APP DEPLOYMENT > Deployment options. Then click Sync in the blade.
Set your entry HTML file in the Default documents as below:
Eventually, browse your website and you will see something like this: