In the last post I wrote about the awesome Yeoman and what he can do for you. This time, I’m gonna show you how you can setup a custom yeoman generator to fit your needs. The goal will be to run a simple yo command to setup a folder with files, replace some strings with custom user input and install dependencies via bower. I won’t include grunt in this case, because I just don’t need it and want this introduction to be as easy as possible.
[Read more…] about Creating your own Custom Yeoman Generator
Blog
Yeoman: Speed up your development
As an up-to-date webdeveloper, you might have some problems following every new trend, framework and building tool. But there is a solution which will eliminate all your problems and give you the power to develop great apps, clean code and solid architecture in nearly no time: Yeoman!
What is Yeoman?
Yeoman is a command line tool for scaffolding your web projects. It uses modern toolkits and combines them in great way to enhance your development process and reduce time. Awesome! Or as you might later think: yo.
So if your just about to set up a new project, please don’t start to copy&paste all that bootstrap, jQuery and other stuff in your folders and take a minute to setup yeoman, you won’t regret it.
Yeoman combines 3 powerful tools:
yo
yo is the command to start all actions with yeoman. You can start a clean project including a git file if you wish to set it up later, and later you can generate even more code to keep things clean.
Grunt
Grunt is a easy way to test your code. With the grunt build system you can test and preview your webapp easy on your local machine without needing a webserver.
Bower
The beautiful little bird Bower has its strengths when it comes to dependency management. Having all dependencies in one file and installing and updating with no effort is a must have in nowadays web development.
Install Yeoman
Yeoman is based on node.js, so make sure to install it before trying to get yeoman running. If you got node, you can simply install yeoman via the command line using npm. Additional, install bower aswell to have everything ready(-g is for global installation):
npm install -g yo bower
Finished! Have fun, yo.
Creating a small webapp
At this point you have not seen any benefit in using yeoman? Seems legit, but wait. Let’s try to start a small webapp, therefore we install another yeoman tool via npm:
npm install -g generator-angular
Generators are yeoman packages aimed to create a new project or add classes/controllers/whatever to your project without the need to copy stuff in 5 different classes, only to fail because you missed to copy it in 1 more file. The command above install the yeoman generator for an angular project.
You can find all the generators on yeoman.io
So create a new folder, and try the magic:
mkdir my-project cd my-project yo angular
You should see a message like that, asking whether you would like to install Sass(no) and Bootstrap(yes). Finally, yeoman asks which angular modules you would like to include. For now, leave the default and press enter and yeoman will load A LOT of files. It might take some time depending on your bandwidth, so you could grab a coffee for sure. If you are familiar with angular, obviously you can select whatever you need for your new project. If you don’t select it right now, no worries, you can still add everything later on.
When yeoman is finished, have a look at the folder structure:
I won’t cover the details about everything in this folder in this post(maybe in the next time), but as you can see:
- .gitignore for the most annoying files you don’t need to commit
- bower.json including all your dependencies like bootstrap and angular
- package.json including your npm dependencies
- Gruntfiles.js to setup all the grunt task for an easy start
Start the local server to see what you got with nearly no effort:
grunt serve
The nice man should greet you from localhost:9000 with a beautiful starting point for your angular webapp!
Conclusion
Congratulations on your first yeoman project! To setup a project with everything you need in minutes is awesome for developers and yeoman can do even more for you. The next time I will show you an easy way to expand your angular app with some controllers generated with yeoman. If you like yeoman, give the team some credit and recommend their work, because they deserve it!
Don’t forget to sign up for the newsletter on devdactic to never miss the latest stuff going on!
So long,
Simon
iOS custom Framework – the easy way
If you are an iOS developer, you might have come to a point where you want to develop a framework. Maybe you want to structure your code and internal stuff better, maybe you have some functionalities which should be available in a library, or maybe you even want to give out a part of your iOS stuff, but only as functions, so your code stays hidden in a lib.
[Read more…] about iOS custom Framework – the easy way
Easy login control with Dart and Rikulo stream – 3/3
This is the third part of the easy login tutorial. Make sure you have already worked through the other parts!
[Read more…] about Easy login control with Dart and Rikulo stream – 3/3
Easy login control with Dart and Rikulo stream – 2/3
This is the second part of the easy login tutorial.
Make sure you have already worked through the first part!
- 1. Set up dart with Rikulo Stream server
- 2. Use the Rikulo RSP template to get a better structure
- 3. Include Rikulo Security plugin for a sample user authentication
This part will help you to get started with the RSP templates from Rikulo. For more information on RSP, check out their RSP overview.
The RSP (Rikulo Stream Page) will help you to include dynamical content in your webapp, instead of plain html.
Adding RSP files to your project
Start with your project structure from the last part of the tutorial. Create a new folder in the web folder called “webapp”. This will be the place where your compiled RSP files will be located. Then delete your old index.html and move your main.dart to the new webapp folder.
Finally, create a file named “index.rsp.html” in the webapp folder next to your main.dart file. Edit this file and replace with:
[:page partOf="devdactic"]
<!DOCTYPE html>
<html>
<head>
<title>devdactic code school</title>
</head>
<body>
<h1>Everything works, yeaah!</h1>
</body>
</html>
Looks like the one from the last part of the tutorial? Almost. But the first line makes the difference. The :page attribute allows us to insert specific tags to this RSP file. In our case, we add this file to our library called “devdactic”, so the RSP file is a part of it. You will understand why when we edit our main.dart.
Additionaly create a file “build.dart” at the top level of your project and insert this:
import 'package:stream/rspc.dart' show build;
void main(List<String> arguments) {
build(arguments);
}
This file will automatically compile all your RSP templates to *.rsp.dart files and put them in your webapp folder. You will see the files if you edit your index.rsp.html and save it. Cool stuff, huh?
Making our sever display html
In the last part of this tutorial we just started the server with no Information at all, so he just took the index.html file. This won’t work this time. So open your main.dart file and replace with:
library devdactic;
import "package:stream/stream.dart";
part "index.rsp.dart";
//URI mapping
var _mapping = {
"/": index
};
void main() {
new StreamServer(uriMapping: _mapping).start();
}
What’s happening here? Let’s take a closer look.
- We define a library “devdactic”. You remember the partOf tag in our RSP? Now the RSP file is really a part of this library.
- With the part “…” statement we import our RSP file. At this point, we don’t include the html file, but the generated index.rsp.dart file.
- The URI mapping maps the standard starting point “/” of an app to the variable index. “Did I miss something?” you might say. But take a look at the auto generated index.rsp.dart file (or strg+click on index):
Future index(HttpConnect connect) {...}The index variable is a Future object! That’s why the *.rsp.html files get compiled to *.rsp.dart files. In this way, you can import them easy in your Dart code. BTW: the naming was generated from the naming of your RSP template file!
- Finally, we start our server like before, but now with the new mapping we just created. This is an optional constructor variable, we will cover more of that in the part 3 of the tutorial.
This is all for now! Start your server and go to http://localhost:8080/. “Looks like the page from the first part of this tutorial.” you say, well…true story. But now everything you see is created from a dynamical template file! No worries, it will get more exciting in part 3 😉
What we did
In this tutorial you:
- changed your folder structure to match the RSP templates
- created your first RSP template file
- created a build file which compiles your *.rsp.html to *.rsp.dart files
- started your stream server with a specific URI matching
Good job so far! Not that exciting by now, but you are now ready to finally implement the security features you dreamed of when starting this series. If you hard problems with this part, don’t hesitate to contact me!
brotip: You can find all the code from this and the following examples on github in my easy authorization project!
Don’t forget to sign up for the newsletter on devdactic to never miss the latest stuff going on!
So long,
Saimon
Easy login control with Dart and Rikulo stream – 1/3
What does nearly every webapp nowadays need? A login. So let’s start to play around with dart with this easy 3 part authorization tutorial.
[Read more…] about Easy login control with Dart and Rikulo stream – 1/3
Introduction to Dart
So you find out about this ‘dart’ thing from google and are extremely excited about all those new open doors you see ahead? Sit back, drink your coffe and let us take a closer look whats dart about.
[Read more…] about Introduction to Dart
