I am having an issue where my grunt build file is building correctly, but the website I'm working on is not getting all of the css files. It is only getting the master.css file. I'm using nodejs, with kraken, on top of express. I can't tell if there is some configuration option I need to change, I don't really know where I would do that.
For anyone interested, the issue was with the changing structure of the project. Going from angular to a dustjs w/ backbone combo changes the project form a SPA structure to a multi-page structure. This makes a huge difference because now instead of sending everything at once we are sending pages as they are needed, this also means that when a user switches to a different view, the server will be building an html version of that view and sending it back as fully fleshed out html. When the server builds the page it has access to the file structure, which means that the build folder that was necessary for the angular project, is no longer necessary.
Related
I made the shift from Vue over to React and I enjoy using the CRA tool to make interfaces on SharePoint. My normal methodology involves building the app and linking the build index.html file to a SharePoint Content Editor Web Part (CEWP).
I recently needed to have two CRA builds on the same page and I am running into the issue where control of the DOM by one build overwrites the content of the other build on the page.
It is now my understanding that multiple CRAs cannot exist on the same page. I do not want to eject my apps. In my research, it seems that webpack is assigning this["jsonpFunction...] to both apps. One suggestion I read involved finding and replacing all instances of this in one of the apps and changing it to "window.jsonpFunction...". I could not get that working either.
I want to continue using CRA and linking the index.html of the builds to different web parts on the same page.
Any suggestions appreciated.
Very Respectfully,
I solved my SharePoint on-premise issue with multiple React builds working in separate web parts by doing the following.
In package.json ensure the "name" field is unique. Also, ensure you have a "homepage" variable set to the location you intend to copy the build index.html file.
In index.js set the document.getElementById to a unique name not used by other React projects that will exist on the same page.
In index.html make sure the name used for the root div is identical to the one used in step 2 above.
In the manifest.json, provide a short name and name for your App. This step doesn't seem mandatory but I did it for consistency in my projects.
Now you can build and copy to SharePoint. I use Content Editor web parts with each pointing to the applicable index.html file for the app. Works great!
I write my first Gatsby Page. I also use Laravel as backend server.
In my project i have many slug pages. I used createPages and api connection to create them. User can add files like images, audio files and pdf. When it happen, page should change a bit content and show this file on specify address. Develop version works fine (i bind button to start npm run refresh). I used gatsby refresh endpoint and add to scripts:
"refresh": "curl -X POST http://localhost:8000/__refresh"
And it's work fine. But i don't know how change this to use it properly on production build. Can anyone help me? Thanks
The ENABLE_GATSBY_REFRESH_ENDPOINT environment variable is only working on development. According to the documentation:
During local development, it can be useful to refresh sourced content
without restarting the development server. To facilitate this, Gatsby
exposes an environment variable called ENABLE_GATSBY_REFRESH_ENDPOINT.
What you need is called a webhook. Basically, a webhook is a way for an application to trigger a change that happens in real-time in a CMS.
Each CMS has its own way of implementing webhooks, but the idea is to trigger a build process once a change in your CMS occurs.
I have an existing angular application and I want to start changing some of it to a vueJS application.
My application, in dev mode, loads all scripts in the main html file (in production mode its bundled into app.js but I want to start testing to dev mode).
I want to change on of the states to use vue, so I read it's possible in the following way: https://medium.lucaskatayama.com/migrating-from-angular-to-vuejs-71277cdc3dd9
However, I want to use a .vue files syntax and I don't know if that's possible without using webpack or any other bundler in dev mode.
So my question is - Is that possible? Can I use .vue files inside my ng app with the current configurations? Furthermore, is there a nice way to webpack only the vue files and components (even though I have to initialize them inside and angular controller as it seems).
If there are any good tutorials for adding vue into angular app, I would love to get them, as I failed finding good ones.
Thanks
ngVue member here :)
At Dawex (the company I'm working at), we're using Vue within a big AngularJS application, with ngVue. It's in production for several months now and it works very well. You can find more informations on this article I wrote before last summer: https://medium.com/dailyjs/how-to-migrate-from-angularjs-to-vue-4a1e9721bea8. Hope that helps!
That could be tough, because the build for the vue code will basically be a separate application.
One thing you could do is build them as completely different parallel apps, use two build steps, include two javscript files and then use window.postMessage to communicate between the two.
So for example your current application will come to a point where a particular div is to contain vue code instead of angular. You could then post a message from your angular code, telling the vue app to load into that div, e.g.:
window.postMessage({ app: 'vue', bind: '#vue-content' })
The vue app, instead of binding on DOMContentReady would listen to window events, and then bind to the element it receives. It would then communicate back to the host app by posting messages also. This would keep them fairly seperate and allow you to build them independently.
I'm a complete noob at programming with nodejs.
I'm developing an webapp with angularjs with this structure:
So, when I run the command "nw ." with the prompt command my application loads correctly.
All I want now is transform all this structure on an single Windows executable for distribute it for my customers.
I'm looking for any solutions like Bat to Exe, APPJS, and a lot of others. But I do not have any success either.
How can I do this?
You are probably going to need to looking at use a tool like ng-template to build everything into a single package or distributing a basic web server along with your site in order to make things work.
This is mainly due to the issue with the browser not allowing XHR requests from disk as AngularJS runs and request the various html files as your views change.
The best thing is to look using a tool like ng-template to compile all of the html partials into a single .js file that can be loaded from disk along with your AngularJS app. This way AngularJS will load all your partials into the $template cache and won't have to make any XHR calls to load them.
The other possibility is to look at something simple like the Cassini Web server or something similar that you can add to your directory and launch with a simple batch file. I say this because you are talking about distributing something to people who may not have Node.js installed, meaning you probably can't rely on them being able perform a bunch of installs just to get to your app.
How to package and distribute your apps solved my problem!
I'm trying to host my first website. I've made it using angularjs, bootstrap and yeoman as a generator. However when I tried to upload it, I realized that the full size of everything in my folder (including the generated stuff by yeoman) was nearly 100mb.
What files do I actually need to host? Node is nearly 60mb and grunt isn't much smaller. Any advice would be greatly appreciated.
Assuming you have a web server like nginx or apache already on that server, you just need to upload the dist folder that is created when you run grunt build.
You don't need all that generator and node stuff just to host a simple test project.
What you actually need is a single HTML file, called index.html. Include Angular and bootstrap (you can omit this, too, if you can go without fancy styles) and create a file app.js which will hold your application logic.
http://angularjs.org shows this in a neat way on their landing page, just scroll down to 'The basics'
As static angularjs application will contain mainly HTML, CSS and JS files you can host your project on simple apache webserver. (Apache - http://httpd.apache.org/)
If you are making a dynamic angularjs application you will have webservices returning you JSON data. If you implement the restful webservices in Java (using Jersey) you can deploy you entire angularjs application with java webserivce implementation to tomcat web server. (Tomcat - http://tomcat.apache.org/)
Hope this helps!
Decided to answer this old question because its one of the few that show on google when searched.
You do not need to use Grunt anymore, I do not know if this was needed at the time of this question.
instead just do
ng build my-app
this would have saved me some hours.
link to current doc