5. Create your own mockup project¶
As seen earlier in this training, one alternative to work with Mockup is to pull the complete source from github, do your changes, removals and modifications and finally compile. This process has obvious disadvantages, and for this we have created a generator, that allows you to generate the bare minimum you need to start your project.
Creating your project¶
We will now create our first project
Without using Vagrant¶
Just create a directory where your project will be. We’ll call it “myproject”. Inside this directory we can run our generator.
Just pull the development version of the generator:
$ git clone firstname.lastname@example.org:collective/generator-plonemockup.git
The relevant files are “Vagrantfile” and “provision.sh”. Understanding and using Vagrant is out of this document’s scope. For now, all you need to care about is running any of the following commands inside the directory you have just cloned, that holds the Vagrantfile:
- vagrant up
Make sure you run “vagrant ssh” to log in to your virtual environment. When inside, you will be user “vagrant”, which has full sudo privileges inside that machine.
the /vagrant directory will be our working directory, and is the same as the directory outside the virtual environment.
So, if you:
vagrant@mockup-generator:~$ cd /vagrant/ vagrant@mockup-generator:/vagrant$ ls
You should see the same content as you had from “the outside”.
Go to /vagrant and create a directory for your project, we’ll call it “myproject” and inside, we’ll run our generator
From this point on, instructions are the same whether you are running vagrant or not:
$ cd myproject/ $ yo plonemockup
The generator will ask a bunch of questions for generating the project and populating the packages.json among other things. They are detailed below:
- Name for the project
This is the name of the whole project, it is used for class and file names. You can put anything here, except for hyphens and spaces (This will get fixed eventually), so for now, we are going to name it “myproject”
Self-explanatory. The version of your project. Make sure you use x.y.z format (ie. 3 numbers)
An optional description, you can use any character in here.
Optional, specify your project’s URL
- Author full name, email and webpage
You can specify your name, email address and a web site to be included as metadata with your project
Choose the license for your project. At the moment, GPLv2, GPLv3 and MIT are supported. You can modify the package later to provide your own if needed.
- Name for your pattern
Here you can specify the name for a pattern you intend to develop. There is no way to not choose one at the moment, there will be in future versions. If you don’t intend to develop a pattern, just put any name here, and you can remove it manually later. We will be developing a new pattern, and we are going to call it “mypattern”. Just like the project name, avoid spaces and hyphens (This will also be fixed in future releases)
After answering all questions, your package is created and all dependencies are pulled in using bower and npm. Just wait until it finishes. If you get an error at this moment, you can re-run ‘npm install’ and ‘bower install’ as needed. When running the automated process for the first time, it may happen that the process just hangs. This might be because at one point, bower asked:
[?] May bower anonymously report usage statistics to improve the tool over time?
and all the npm install output hides it... don’t worry, just type ‘yes’ or ‘no’ and hit ‘Enter’. Or if you intend to respond ‘yes’ anyway, just hit ‘Enter’ directly. You will see the above question printed again...
Working with your new package¶
This will assume we have named our project ‘myproject’ and our pattern, ‘mypattern’
The newly created package has the full structure of files and directories ready to start developing:
├── bower.json ├── config.js ├── dev │ ├── dev.html │ └── dev.js ├── Gruntfile.js ├── js │ ├── bundles │ │ └── myproject.js │ └── patterns │ └── mypattern.js ├── less │ └── myproject.less ├── package.json ├── README.md └── tests ├── config.js └── pattern-mypattern-test.js
The ‘dev’ directory¶
The ‘js’ directory¶
This is where your bundle and pattern(s) will be located. You will be working mostly in js/patterns/mypattern.js if you are developing a new pattern, or in js/bundles/myproject.js if you are bringing additional patterns from mockup.
The ‘less’ directory¶
This is where you will include the less files for your project.
The ‘tests’ directory¶
This is where automated tests for your patterns will be written (And of course you will write them ;) )
In case you add new patterns, libraries, or need to tweak some paths, this is the file where you should do that.
Compiling and testing¶
Once developing is done and you want to compile your work, just go to your project’s root directory and run ‘make’:
If you don’t get any errors, you should end up with a new directory called build, where you will find your files ready to use.