I am new for SharePoint SPFx and React. I am searching for best practice code structure for SharePoint SPFx development using React. Basically I am looking for the code structure where I can put components, models, services and html files in separate folders.
How to use HTML templates file from folder name templates into component file (.tsx)
I have created new folder name 'common-library' inside root folder 'src' and putting all common/shared code like base configurations, models, services in separate folder which can be used in any webpart and react component.
Base code/folder structure
You can check complete code here.
Related
Hello guys i need to download files from my database or my Onedrive and save them into react, this files is for my 3d models and the types is obj and mtl. For can i load dinamyc objects from database i need this feature, how can i do this ? I'm using three.js in this project.
Today the project is loading the files stored in project but i like to find a away to pick this from a database or a storage provider.
I tried to do using fetch or something like else but i can't find a away to do this correctly. I don't now if three.js supports url files i try to find but i don't see anything can help me.
Unless three.js provides a feature to take input from memory (in which case you can simply download the file into memory and pass it to three.js), doing this solely from a react app isn't possible. You will need to host your website on a server to have dynamic access to the public directory serving the react website.
Standalone react builds have static assets and can't be updated without creating another build
I need to place a single my_custom_app.js file (a bundled-with-webpack React app) somewhere inside the default project structure of a Rails app.
Then I plan to reference said file only from a single view (
app/views/dashboard/index.html.erb).
I think that I don't need this file to be part of the asset pipeline. I would like Rails to version it's filename by adding that hash but I definitely don't want it concatenated with the rest of the JS of the site.
Any ideas?
I'm new to Sharepoint Framework but I used the 'yo #microsoft/sharepoint' command to create a new React/SPFx project. However, in doing so it seems that I don't have access to some of the CSS classes available in OfficeUI Fabric. For example if I try to create a typical grid layout, the ms-Grid-row and ms-Grid-col classes work as expected but the sizing utility classes do not (ms-sm6, ms-lg6). Other fabric classes work as well such as ms-bgColor-neutralLight, ms-font-xl, and ms-fontWeight-semibold ... so a portion of that styling is coming through.
If I add a link reference to the workbench.html file pointing to the CDN of fabric.css I get those classes working again....but that is not a solution since that file is just a temporary file build for testing at compile time.
Is there something else that needs to be done to include fabric.css (or fabric.min.css) in my project?
I am running into the same issue. Yeoman generated SPFX webpart (React) for an on premises instance. Digging into the node module, I found the classes didn't match the documentation. Where the documentation would say to use ms-md6, the css file has ms-u-md6. Seems like all of the layout classes follow this pattern of ms-u- rather than just ms-... Adding the -u to the className is now giving me appropriately sized columns.
The path to the file I found the classes in is: .../node_modules/office-ui-fabric/dist/css/fabric.css (YMMV)
Hello I am merging two of my projects you can say CMS and web into a single project.
Both projects have different controllers and CSS. I have created separate folders for admin and web.
But need to load controllers on the basis of path like /admin/home or /web/home. I am unable to found any solution.
I tried to do that according to the state name, but with that my controllers are not loading.
I have an ASP.NET MVC project that will have an Angular SPA inside it. At first, I decided to create a new Area for the SPA but then I realized that I'm not going to use any Models or Controllers inside the area but just JavaScript files. So, now my idea is to place all the scripts for the SPA in the main ~\Scripts\ folder of the ASP.NET MVC project but inside another folder ~\Scripts\MySPAName\ and load the SPA just trough a ASP.NET MVC View.
What's the best way to structure a project in this scenario?
Well, if you want to create such kind of project I suggest you use MVC + WebAPI + Angularjs. You really need only 2 MVC controllers: Account for all login/logout logic and Home with only one simple method Index This Index method returns view which contains only one line of code - div or section or whatever you want ng-view attribute. This will be your main application page. Why its better to use WebAPI? Because these controllers works faster than MVC ones and WebAPI provide you with great REST possibility. What bout project structure. I can suggest you my personal structure of MVC + Angularjs project:
So you have API folder for WebAPI controllers, standard Controllers folder for MVC controllers. In Scripts folder you have separate folders for your angular controllers services ang general libraries and one .js file - its your angular module and application file. Moreover, its better and cleaner if you have additional subfolders in Scripts/Controllers folder so you can split all you *.js file by category (e.g Home, Mangers, Prices etc). Also you can see that I have folder Templates in root of my project. Here you can place all your html files which you will use as angular views/templates. And I also suggest you to create additional subfolders here as in Scripts/Controllers subfolder for better and cleaner structure
Hope that will help you
ASP.NET MVC is better suited to traditional web sites. For a single page app, use ASP.NET Web API instead. Here's a tutorial:
http://www.asp.net/web-api/overview/getting-started-with-aspnet-web-api/build-a-single-page-application-(spa)-with-aspnet-web-api-and-angularjs
In this, There are two web projects, one is or web api and another one is for client web page (SPA).
You just need a empty web project to start an angular project.
Index.html - It is the main html page for your application. All other pages (partial pages) for your project can be placed Inside the directory Pages.
Scripts - All your js files can be placed inside this directory. You can differentiate all your js files into it's sub-directories.