3

I do already know how to integrate Python-flask and WordPress with Bootstrap. I do also know how to add and change the behaviour and views of new CRUD modules with the yeomon CRUD module sub-generator of generator-meanjs. However I am overwhelmed by the file structure generated with the meanjs.org mean stack app generator at the moment. I know the general file structure and interaction related to the MVC pattern. But how do I have to integrate the default app generated with meanjs.org v0.4.2 with a bootstrap v3.3.7 theme. I could make it work somehow for sure but I would prefer to set it up the right way right from the beginning.

After installing all dependencies of meanjs (nodejs, npm, bower ruby, sass, grunt-cli) including the yeamon generator with meanjs skeleton globally:

sudo npm install -g yo
sudo npm install -g generator-meanjs

And generating the default app skeleton:

yo meanjs

With this CLI menu selections:

What mean.js version would you like to generate? 0.4.2
In which folder would you like the project to be generated? This can be changed later. (mean)
What would you like to call your application? (MEAN)
How would you describe your application? (Full-Stack JavaScript with MongoDB, Express, AngularJS, and Node.js)
How would you describe your application in comma separated key words? (MongoDB, Express, AngularJS, and Node.js)
What is your company/author name? AUTHOR
Would you like to generate the article example CRUD module? Y
Would you like to generate the chat example module? Y

This folder structure with possibly bootstrap related files pointed out is generated:

/mean
  /config
    (some folders and files with configurations)
  /modules
    /core
      /client
        /controllers
          header.client.controller.js
          home.client.controller.js
        /css
          core.css
        /views
          (some other html files)
        (some other folders)
      /server
        /controllers
          core.server.controllers.js
          errors.server.controller.js
        /routes
          core.server.routes.js
        /services
          menus.client.service.js
          (another folder and js file)
        /views
          index.server.view.html
          layout.server.view.html
          (some other html files)
        (another js file)
      /tests
        (nested folders /client and /server)
    /users
      (same structure like /core folder)
    (and /articles and /chat which yould not be existend dependent on the cli menu selection)
  /node_modules
    (a lot of node modules)
  /public
    /lib
      /angular-bootstrap
        (some js, json and css files)
      /bootstrap
        (some folders and files)
      (some other angular, jquery and other stuff)
  /scripts
    (shell and js script)
  .bluemix
  .git
(a lot of environment/tool configuration files)
(some javascript files ~ environment/tools)

The theme folder/file structure is as follows:

/css
  bootstrap.css (= bootstrap v3.3.7 !?)
  bootstrap.min.css (= bootstrap v3.3.7 !?)
  scrolling-nav.css (theme specfic)
/fonts
  (.eot, .svg, .ttf, woff and .woff2 glyphicons)
/js
  bootstrap.js (= bootstrap v3.3.7 !?)
  bootstrap.min.js (= bootstrap v3.3.7 !?)
  jquery.easing.min.js (= bootstrap v3.3.7 !?)
  jquery.js (= bootstrap v3.3.7 !?)
  scrolling-nav.js (theme specifc)
index.hmtl (theme specific)
(license and readme file)
thinwybk
  • 4,193
  • 2
  • 40
  • 76

1 Answers1

0

I am not really sure what you mean by integrating bootstrap with Meanjs, according to me it is already integrated in the default app. If you go to config/assets/default.js and config/assets/production.js (one is for development and the other for production) under client.lib.css and client.lib.js the bootstrap modules are specified. These modules are loaded in modules/core/server/views/layout.server.view.html just under the comments <!-- Application CSS Files --> and <!--Application JavaScript Files--> when the application starts.

If you want to upgrade to the latest Bootstrap just change the version number in your bower.json file and run the command bower update.

Luke Kroon
  • 1,016
  • 12
  • 19
  • Thanks a lot for this answer. It is more about integrating the theme, not bootstrap itself. I would also like to ease the updating of the theme as much as possible. For me the question about how to handle the theme index.html is still open. Because the html related stuff is spread over /core/server/views/index. ... . html, layout. ... .html and some other html files in nodejs. How should I merge the theme specific html file with these nodejs html files? (I want to avoid future merging when updating the theme as much as possible.) – thinwybk Sep 05 '16 at 16:33
  • 1
    You can override the theme css by adding your own css files in every module. In `module/client` you can create a folder called css and add it there. The node html files is already merged with the theme specific html file. – Luke Kroon Mar 08 '17 at 07:26
  • Thanks for pointing me to the concept of "css overriding" ... I need to search for some tutorials. – thinwybk Apr 10 '17 at 21:34