New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

02: Bootstrap Bundle JavaScript #2

Open
wants to merge 2 commits into
base: 01-sulu-admin
from

Conversation

Projects
None yet
2 participants
@wachterjohannes
Copy link
Member

wachterjohannes commented Jan 19, 2016

This part of the tutorial bootstraps the Bundle JavaScript extension and start a simple component with the route 'example/news'.

Link to the Blog-Post: http://blog.sulu.io/how-to-develop-a-bundle-in-the-sulu-admin-2

@wachterjohannes wachterjohannes changed the title 01: Bootstrap Bundle JavaScript 02: Bootstrap Bundle JavaScript Jan 19, 2016

public function getJsBundleName()
{
return 'examplenews';

This comment has been minimized.

@wachterjohannes

wachterjohannes Jan 19, 2016

Member

this is the lowercase bundle short name - following symfony2 standard http://symfony.com/doc/current/cookbook/bundles/best_practices.html

@@ -0,0 +1,10 @@
define(function() {

'use strict';

This comment has been minimized.

@wachterjohannes
@@ -0,0 +1,28 @@
require.config({
paths: {
examplenews: '../../examplenews/js',

This comment has been minimized.

@wachterjohannes

wachterjohannes Jan 19, 2016

Member

relative path to /bundles/suluadmin/js/main.js

app.sandbox.mvc.routes.push({
route: 'example/news',
callback: function() {
return '<div data-aura-component="news/list@examplenews" data-aura-name="sulu" />';

This comment has been minimized.

@wachterjohannes

return {
initialize: function() {
this.$el.html('<h1>Hello awesome ' + this.options.name + ' world</h1>');

This comment has been minimized.

@wachterjohannes
app.components.addSource('examplenews', '/bundles/examplenews/js/components');

app.sandbox.mvc.routes.push({
route: 'example/news',

This comment has been minimized.

@gusdecool

This comment has been minimized.

Copy link

gusdecool commented May 18, 2016

@wachterjohannes Looks like the tutorial is intended for symfony dev environment and most our reader new to sulu and without his knowledge using prod environment

So related with your tutorial, at the step we add file // file: Resources/public/js/main.js, for prod env it will give us error because the js looking for file at root/bundles/examplejs/dist/main/js, new guy will not get why sulu looking for dist folder that not exist and will be great if you explain how we can generate the dist folder.

@wachterjohannes

This comment has been minimized.

Copy link
Member

wachterjohannes commented May 18, 2016

@gusdecool in the last part of the tutorial there is a explanation how to build the dist files. http://blog.sulu.io/how-to-develop-a-bundle-in-the-sulu-admin-5

@wachterjohannes

This comment has been minimized.

Copy link
Member

wachterjohannes commented May 18, 2016

when you are runing symfony in develop you will see that the js/main.js file is loaded.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment