I am a backend django-developper with very limited knowledge of frontend technologies. I decided to challenge myself into building a full-stack application using a pre-made Boostrap Admin dashboard. The problem is the dashboard I chose makes use of npm and gulp, which I know nothing about. Of course, I can try to learn it, but I am wondering if it's possible to remove them and create a compiled version that has all dependencies linked directly in the head tag and at the end of the body tag and style the frontend using vanilla bootstrap.
Your help will be greatly appreciated. Thanks
Related
I'd like to integrate VueJS through WebPack in one of my custom Odoo modules, and have it start up automatically when I launch Odoo-bin.
Does anyone have a solution?
Is it even possible?
I know you can include VueJS as a simple .JS file in the module's template, but that means I can't use the .vue components supported by WebPack.
I also read that Odoo has its own JS framework, but I couldn't find good tutorials/documentation for it.
EDIT: To anyone that might be wondering how I solved this, here's what I did:
I initialized a package.json file in the root of my Odoo folder using npm init. I added a start script to the package that launches webpack and bundles all vue components in myAddons folder (where I store my custom modules), then launches Odoo through the python odoo-bin ... command. All that's left is to use npm start to start it all up.
This way, the vue components get bundled into single JS files, that I then add to the templates of my modules. This has a small inconvenient in that the first bundle has to be done manually in order to know which JS files need to be imported to the templates. Also, i'm still trying to figure out how to bundle the components of every single module separately. Will update this once I find a proper way to do it. ...Hopefully.
By default, odoo frontend part is heavily built upon backbone, jquery, underscore. If you want to use any other JS library, you have to make sure the compatibility in between them. The odoo backend parts of JS functionalities are written under web module can be found in odoo/addons/web/static/src/js directory in odoo community codes. The ecommerce/website part is under website* modules.
Along with the fact that the Odoo JS API documentation is basically non-existent (as of the time I am posting this) .. I would add the fact that its going to be like working with a moving target compared to calling Odoo's JSON-RPC API directly since their JSON-RPC API changes very little over different versions of Odoo.
Moreover, making JSON-RPC API calls with Axios is extremely simple. So just go directly to the server's JSON-RPC API from your Vue project.
This is what I am doing with at odooinvue.org which is basically a Vue project that uses Odoo in the back-end. That project is designed specifically as a resource for Vue developers that are trying to use Odoo in the back-end but have difficulty because they are new to Odoo development.
I suggest trying #StartupGuy's odooinvue, which is really nice.
With Odoo 14 they created a new modern frontend framework: Owl framework.
I have not tried it myself.
I'm a noob and have read a couple articles about build tools but want to verify what I know:
Build tools minify and concatenate your front end code into a package of executable files that you can then put on a development server so that it can be served to your backend server (liker rails) to show stuff? Not sure if that's correct, but any help in the most layman terms would be greatly appreciated!
NPM is the node package manager where from you can install libraries and such.
Yes you can put your front-end .js files together and minify them with grunt to a build directory at the server. You can also turn for example less into css or typescript into js depending on how you configurate your Grunt.
Take a look at their documentation and there is also a quite excellent tutorial there also https://scotch.io/tutorials/a-simple-guide-to-getting-started-with-grunt
I am using the Aurelia CLI for creating a SPA and it makes everything a lot easier compared to using Jspm.
However now we have some custom elements like: <my-custom-element></my-custom-element> that we want to package into an npm package so we can use it in multiple/other Aurelia CLI projects.
How would I go about creating it? I can't find any examples or documentation about this.
My guess is that I need to transpile my custom element files so that I end up with an npm package containing .js files (we use typescript) and the correct module loader synax (CommonJS?)?
My understanding is that I can't simply create an npm package that contains my my-custom.element.ts + my-custom-element.html file since it all needs to be transpiled, bundled and so on.
I am also guessing that I can't simply do an au build and use my bundles since that would bundle the entire SPA and not just my custom element files?
So what steps do I need to perform to create an npm package that contains a custom element that can be added to my Aurelia CLI project?
Any help or samples would be very welcome! Thank you!
There are a heap of ways you can do this. However, to keep things simple I am going to recommend the official Aurelia plugin skeleton for developing plugins, which you can get on Github here. If you venture into the src folder, you'll see a very basic example of a custom element and how you can make it global. The plugin skeleton uses Gulp for build tasks, which can be found in the build/tasks directory.
At present, you cannot use the Aurelia CLI to create a plugin. But in the future, you will most likely see this feature added into the CLI as it becomes more than just a CLI for creating applications.
Finally, I start to work with Aurelia. There is a starter kit available Here which facilitates initializing Aurelia. But it is a template which should be used within a Web Site template.
I have a pre-configured WebApi project and I want to use Aurelia in it. I've just added the starter kit files and folders to my project. But unfortunately it shows 27651 errors fo files in jspm_packages.
What am I doing wrong? Is there any Nuget bootstrapper for Aurelia available?
Start with the aspnetcore template from Here
You can use web api from the template.
You will be up and running in minutes.
If you are using Web API, starting from an MVC5 project might be faster.
The following link is an Aurelia starter kit with MVC5.
You will have to update it to the latest version of Aurelia, but I managed to make it work with web api 2 and oAuth authentication.
https://github.com/rmourato/Mvc5-Aurelia
A tutorial can be found here.
http://ruimourato.com/2016/01/26/running-aurelia-on-mvc5.html
Hope this helps.
Well you asked what the errors are from. First thing is that you should exclude the jspm_packages folder from VisualStudios solution explorer Right click on it and mark 'exclude from project'.
Next, setup your project on source control (git) if not already and add the following to your git .ignore file
jspm_packages/
node_modules/`
I would suggest creating a second project aside from your WebAPI project that can contain static html, css and js files and do your Aurelia application there separate from your Web API project but in the same solution.
I could possibly give you a solution that is already setup, that shows how to use web api along with aurelia. But it would take some time for me to setup.
For all of my projects using Aurelia, I use the aurelia-cli which you get through npm and I would also recommend this approach.
You can be up and running with hello world in under 5 minutes.
You will then be able to build all the appropriate bits and pieces to talk to your api.
http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/the-aurelia-cli/1
I'm a front end dev who wants make a blog/portfolio site using express js.
I've used codekit in the past to compile,minify & autoprefix my JADE/SASS files, and to minify my JS files, but I have no idea where to start when going full stack. I've been reading up on gulp (as I assume this will do all the things that codekit does) but I don't understand fully what I need.
Do I need bower aswell? Do I control all the gulp plugins using NPM?
How do I get all this to work with Zurb Foundation 6?
If you are planning to use Express, then Gulp is a good choice. Like you said, gulp can automatically do all the stuff you need; also is very customizable. You don't need Bower to use it, personally I don't use Bower but I use Gulp. All the packages are managed by Node Package Manager (npm). Finally I don't know about support of Zurb Foundation 6. By a quick research I see there is a npm plugin for version 5, but I think there's not one for version 6.
Here's a link with all npm packages and a guide to begin using Gulp:
https://css-tricks.com/gulp-for-beginners/
https://www.npmjs.com/
I hope my answer help you.