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!
Don’t forget to sign up for the newsletter on devdactic to never miss the latest stuff going on!
So long,
Saimon
