I am working on a project based on rest api (FOS Rest in Symfony) and React Js.
I have followed following tutorial Code Review Video .
It's amazing and gave me very fine concept for working with React Js with rest api . I also read Limenius/ReactBundle and some other bundles which are manly based on webpack config .
While using webpack config there is two server for running the whole project. first is symfony server for Rest Api and other is webpack server(node js) for React Js.
Is there any way so that the project(with both symfony + reactjs) can run on same server .
If it is please kindly give me idea .
Thanks in Advance .
react.js is only a javascript library.
Just link in the library files with something like: (Im using twig to template in this example)
<script src="{{ asset('bundles/app/external/react.js') }}"></script>
<script src="{{ asset('bundles/app/external/react-dom.js') }}"></script>
<script src="{{ asset('bundles/app/external/browser.min.js') }}"></script>
as you would do with any other file.
There are plenty of resources that give full instructions on which libraries you need in order to get React working, but these are the 3 I use.
A trouble I've personally found with lots of the front-end resource tutorials is they get all hung up with node, bower or any number of other 'package managers'. The truth is, you dont need any of them.
Symfony is just a set of PHP libraries, React is just a javascript library. Theres no magic that needs anything else.
Related
I am currently starting to work with hugo SSG. My goal is to have a reliable, yet uncomplicated application to centralize some components in otherwise vanilla html,css,js website projects. I want to utilize hugo to maintain head, header and footer for me.
Now I migrated all of the html and css of my current project to hugo, which worked fine. It's average Landing Pages with header/footer and a couple of sections. However I seem to be unable to include my Javascript files.
I have started with two first scripts to try out the setup, one navBar.js and one headerShadow.js (simple UI tricks).
I have included those two files in {projectName}/themes/{themeName}/layouts/partials into the footer.html with the following tags:
<script defer language="javascript" type="text/javascript" src="{{ "/js/navBar.js" | urlize | relURL }}"></script>
<script defer language="javascript" type="text/javascript" src="{{ "/js/headerShadow.js" | urlize | relURL }}"></script>
First question: Is that even the best practice? I found this on another post on stackoverflow, which I'm unable to reproduce.
Second question: My visual studio code already flags exactly the part /js/navBar.js" in both tags as faulty. What am I doing wrong here?
I tried:
connecting as "usual" <script src="js/headerShadow.js"></script>
I would be very thankful for advice from someone more experienced with hugo!
Thanks alot in advance :)
I would suggest using hugo pipes and assets as a best practices.
In the docs under:
ASSET MANAGEMENT
JavaScript Building
https://gohugo.io/hugo-pipes/js/
It gives the exact syntax and what to do so I won't bother copy pasting it here. This includes Tree Shaking, minify, etc. etc. Things which are "best practices".
I would suggest of the options (like importing from your node_modules or etc.) that you just keep your JS in the assets folder for simplicity and use that option in the above docs.
Specifically: https://gohugo.io/hugo-pipes/js/#import-js-code-from-assets
This would be, in my opinion, for a simple site, best practice.
If you don't want to use Hugo Pipes (it's a bit advanced for what you need), here's a simple way to approach it that worked fine in my project.
<script src="{{ .Site.BaseURL }}js/navBar.js"></script>
In development (hugo server command), .Site.BaseURL will be overridden to http://localhost:1313/. In production (hugo command) it will be the value of baseURL in config.toml, such as https://www.example.com/.
Files in the static directory are built to your site root, so the file would be located at http://localhost:1313/js/navBar.js. That's why I believe the relative path isn't working.
If that doesn't work, there's likely some other issue in your project that needs addressing, or try clearing your browser cache.
Im looking for best practice methods in Laravel. I understand that when I have mixing set up for JS in laravel it does wonders. But for individual pages what method is best practice? Any insight would be great!
For example as of right now my scripts look like this
<script src="/x/remote/js/js_new/typed.min.js"></script>
but would it be more conducive to the Laravel framework by using the asset method like this instead?
<script src="{{ asset('/x/remote/js/js_new/typed.min.js') }}"></script>
I am teaching myself React.js. For now, I am avoiding having to set up and use node.js, servers, etc. (I want to focus on front-end functionality first). To avoid having to set up my own node server and worry about endpoints, etc., I have been using these CDNs:
<script src="https://unpkg.com/react#15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
These have worked great so far. But now I am trying to use the React.JS CSS transition library. I tried using cloudflare:
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-transition-group/2.3.1/react-transition-group.js"></script>
But this is not working. This is the only cloudflare link I could find on the topic.
Is there a way to use
<ReactCSSTransitionGroup></ReactCSSTransitionGroup>
without having to set up my own node server?
I would like to be able to pull the library in from a web link. Or if I could get the entire JavaScript file, I could simply put that file in the same folder and try to load from a local folder using:
<script src="ReactCSSTransitionGroup.js"></src>
It seems that there should be a way to use ReactCSSTransitionGroup without having to do npm, command line launch server, express, etc.
This may come too late but just in case somebody else is looking, just like me.
As per https://reactcommunity.org/react-transition-group/, the cdn is at https://unpkg.com/react-transition-group/dist/react-transition-group.js
And you can use <ReactTransitionGroup.Transition>...</ReactTransitionGroup.Transition>
or <ReactTransitionGroup.CSSTransition>...</ReactTransitionGroup.CSSTransition>, and the same goes for SwitchTransaction and TransitionGroup, to do the animation.
I'd suggest using Create React App https://github.com/facebook/create-react-app.
Bundling and tests all taken care of for you. Not the best way to learn about build processes, but it's very fast to get going and you get to install and import from npm. win win in my books.
Just a suggestion, but it will save you a lot of time and hassle if you learn npm and just add things like "ReactCSSTransitionGroup" etc. via npm.
Also Webpack + Babel are part of the build most React developers use.
Check out this article to get up and running: https://www.codementor.io/tamizhvendan/beginner-guide-setup-reactjs-environment-npm-babel-6-webpack-du107r9zr.
I have created my own little Symfony2 form type. For this to work properly, I need to include a js library. While that was a simple task when using this new form type in a single web application, it became way more difficult when I decided to move that form type to a dedicated bundle in order to make it reusable.
For now, I am aware of two possible solutions
1) Ask everyone who is using my bundle to add a line into their base.html.twig
2) Add a <script> tag for embedding the library to my form widget
Both of them are not very smart so my question is: how do I do this better? Especially, if my form type can be included several times on a single page. And even worse, if my form type is requiring e.g. JQuery to be present, but I do not know, if JQuery has already been loaded in the application.
Since you don't have any controll about where the users of your bundle actually include the JS (I know projects where they aren't included in the ::base.html.twig file, but in a file called layout.html.twig in the main bundle of the application), a good way is to provide a JavaScript file which can then be included via Assetic like the following:
{% javascripts debug=false output="js/bundles.js"
'#YourVendorAndBundleName/Resources/public/js/formtype.js'
%}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
So you basically just store everything you need in that one file located in {yourBundle}/Resources/public/js. The symfony2 command assets:install will do the rest.
This way the user could store your JS together with other vendor JS in one file and do more stuff with it like minifying etc.
Important: Make sure to add this to your installation/usage guide.
If your JS code relies on third party JS libraries like jQuery, you should not add those, as the Symfony2 Cookbook says: http://symfony.com/doc/master/cookbook/bundles/best_practices.html#vendors
Instead you could require a specific asset with a specific name, like mentioned here: Managing common javascript dependencies in Symfony 2
I've been playing around with AngularJS - which is a kick-ass front end framework by the way.
Today I tried to incorporate the angular-seed starter app (found here: https://github.com/angular/angular-seed) into a currently existing Rails 3.1.3 application.
Had a few issues getting the demo code - here: http://docs.angularjs.org/#!/tutorial - to work in the asset pipeline, so just for testing purposes I put them into the public folder - old school style.
I followed the tutorial and had all of my views, controllers, services set up correctly. However, when I included the js files at the bottom of my index page:
<script src="angular/app/lib/angular/angular.js" ng:autobind></script>
<script src="angular/app/js/services.js"></script>
<script src="angular/app/js/controllers.js"></script>
... none of the controllers would work. I would get the {{ model.property }} tags within my templates instead of the actual output.
No Javascript errors in Chrome's dev tools - and network and resources showed all expected files loaded properly.
I thought that maybe I had overlooked something in my code, but when I looked at the developers guide, there is a link to angular's cdn:
<script src="http://code.angularjs.org/angular-0.9.19.min.js" ng:autobind></script>
Just for the heck of it, I replaced my local angular.js script call with the cdn, and suddenly everything was working as expected.
I double checked, to make sure that I was loading the local copy from the proper directory, and I was - it's the standard directory that comes with the angular-seed file. This file was also showing as a resource that was downloaded properly.
Anyone have ideas on why the cdn worked but the local copy would not?
The angular-seed uses AngularJS 1.0.0rc5 (currently) which is incompatible with 0.9.19. Check out how the seed app is wired. (e.g. remove ng:autobind and add ng:app or ng-app to the html tag in your layout template).
Looks like you are using an old version: You want to read this: http://docs.angularjs.org/#!/guide/dev_guide.bootstrap.auto_bootstrap
What you should be doing is using the new version, and the docs are here: http://docs-next.angularjs.org/guide/dev_guide.bootstrap.auto_bootstrap
For one thing, you're missing a double-quote in your first script reference.