-
Notifications
You must be signed in to change notification settings - Fork 10
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #27 from CiscoDevNet/images-missing
Removes LLP and substitutes previewer from BitBucket and containers.c…
- Loading branch information
Showing
4 changed files
with
11 additions
and
553 deletions.
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,176 +1,20 @@ | ||
| ## Step 7. Installing and Running the Learning Lab Previewer Tool on Linux | ||
| ## Step 9. Writing Learning Labs - The Next Step | ||
|
|
||
| Markdown previewers vary in their rendering capabilities as well as in their interpretations of various flavors of Markdown. To preview your lab content as it will appear on the DevNet site, you must install the __Learning Lab Previewer (LLP)__ tool on your computer. To download and install the LLP tool on a Linux platform, follow these instructions. If you are not using a Linux machine to write your lab content, see the following: | ||
| Now that you've learned the concepts and practice of writing a learning lab we suggest that you use one of our provided templates to get started. | ||
|
|
||
| * [Installing and Running the Learning Lab Previewer Tool on Windows 7]() | ||
| * [Installing and Running the Learning Lab Previewer Tool in Docker]() | ||
| #### Steps to get Started | ||
| 1. Create your own git repository in Github for the learning labs that you will create and clone this repository to your workstation. Recall that your repository must have a **labs** parent directory which is where the labs nested in their own folders will be placed. | ||
|
|
||
| 2. Clone the git repository https://github.com/CiscoDevNet/devnet-guidelines by entering on your terminal the command `git clone https://github.com/CiscoDevNet/devnet-guidelines.git` | ||
|
|
||
| ### Downloading the Learning Lab Previewer | ||
| 3. In the **labs** directory locate a template folder such as `00-labs-02-basic_template`. Copy the template folder into your **labs** directory of your repository files on your workstation. | ||
|
|
||
| 1. Browse to the public repository at https://stash-eng.cisco.com/bitbucket/projects/DLL/repos/learning-labs-previewer/browse by clicking the link or entering the URL into your Web browser. | ||
| 4. Rename the directory to something that fits your lab naming structure such as: 01-npk-01-title which stands for module 1 npk lab 1 followed by a brief lab title. Open the file 1.md and begin editing the file. | ||
|
|
||
| * If requested, accept the security exception. | ||
| 5. Use the Learning Lab Previewer tool to preview your work real time. As you edit and save your markdown files the LLP tool will automatically refresh showing your changes. You will need to refresh the browser if you make changes to the json file of a lab. | ||
| * The LLP tool does not fully reflect how labs will appear in the production environment. After reviewing labs using the LLP tool, the next step is to push and review the completed labs in the Learning Labs Staged environment before putting them into production. | ||
|
|
||
| * If you are prompted to log in, you've entered an incorrect URL. Recheck the URL for typos and correct them. You do not need to log into Bitbucket to access this repository. | ||
| 6. Refer to this lab as needed for guidelines. | ||
|
|
||
| 3. Click the ellipsis (...) button next to the branch name and then click **Download** and save the file. | ||
| #### Congratulations! You've completed the getting started lab! Happy Writing! | ||
|
|
||
| <b>Figure: Downloading the LLP archive</b> | ||
| <br/><br/> | ||
|  | ||
|
|
||
| The __learning-labs-previewer-master@_commitNumber_.zip__ downloads to your computer. This file should be approximately 33 KB in size. As of this writing, the LLP download file is named `[email protected]`, but a future version of this file might provide a different commit number. | ||
|
|
||
| * The user interface for saving this download varies according to your browser and your personal settings. | ||
|
|
||
| * If you see the "Bitbucket is queueing requests" warning, responses from the server may be slow. You may need to try your request more than once. | ||
|
|
||
| ### Installing LLP on Ubuntu | ||
| These instructions were created using Ubuntu 16.10 Yakkety Yak (Final). | ||
|
|
||
| 1. On your workstation, create the directory into which you will install the LLP tool, then set that directory as your working directory. | ||
|
|
||
| For example, the following commands create the `llp` directory in the user's home folder and then set `~/llp` as the working directory. | ||
|
|
||
| ``` | ||
| ~$ cd | ||
| ~$ mkdir llp | ||
| ~$ cd llp | ||
| ~/llp$ | ||
| ``` | ||
|
|
||
| 1. Move the __learning-labs-previewer-master@_commitNumber_.zip__ file to the `llp` folder that you created in the previous step. | ||
|
|
||
| 1. Using a linux decompression tool such as `unzip`, extract the LLP files into your `llp` directory. If your decompression tools placed the files in their own directory inside of `llp`, move the files to the top level of the `llp` directory. The extracted fileset should look similar to the following figure. | ||
|
|
||
| <b>Figure: Extracted contents of the LLP archive</b> | ||
| <br/><br/> | ||
|  | ||
|
|
||
| 2. Use `apt-get` to [install Nodejs](https://www.digitalocean.com/community/tutorials/how-to-install-node-js-on-ubuntu-16-04). | ||
| * Open a terminal then enter the following commands one at a time, pressing the `Enter` key after each command. Provide the requested sudo password. Accept all requests. | ||
| * `sudo apt-get update` | ||
| * `sudo apt-get install nodejs` | ||
| * `sudo apt-get install npm` | ||
| * Once NodeJS has been installed, type `npm` and press the `Enter` key. You should see output like the following figure shows. | ||
|
|
||
| <b>Figure: Nodejs installed successfully</b> | ||
| <br/><br/> | ||
|  | ||
|
|
||
| >To learn more about Nodejs, you can read [this article]([Nodejs](https://nodejs.org/en/about/). | ||
| 3. Install `NodeJs-legacy` by typing the following command into your terminal window and then pressing __Enter__. | ||
|
|
||
| `sudo apt install nodejs-legacy` | ||
|
|
||
| The [nodejs-legacy package](http://packages.debian.org/search?searchon=names&keywords=nodejs-legacy) installs a node symlink that many modules need in order to build and run correctly. | ||
| <br/><br/> | ||
| <b>Figure: Installing nodejs-legacy</b> | ||
| <br/><br/> | ||
|  | ||
|
|
||
| 3. Install a `git` client if your workstation does not provide one: | ||
| * To determine whether `git` is installed, type `git --version` in the command window and press the __Enter__ key. | ||
|
|
||
| * If the response provides a `git` version number like the following example does, you're ready to use `git`: | ||
|
|
||
| ```bash | ||
| $ git --version | ||
| $ git version 2.9.3 (Apple Git-75) | ||
| ``` | ||
| * If the response does not provide a `git` version number, install it now. In the Ubuntu terminal, enter the command `sudo apt install git`.<br/><br/> | ||
|
|
||
| 4. In the command window, use `git` to clone the [Angular JS generator](https://github.com/yeoman/generator-angular) into your `llp` directory. | ||
| <br/> | ||
| ```bash | ||
| cd ~/llp | ||
| git clone https://github.com/yeoman/generator-angular | ||
| ``` | ||
| <br/> | ||
| <b>Figure: Cloning the Angular JS generator into the llp directory</b> | ||
| <br/><br/> | ||
|  | ||
| <br/> | ||
|
|
||
| 5. Install the Angular JS generator: | ||
| * Continuing to use your `llp` directory as the working directory, type the following command in the terminal window and then press the __Enter__ key: | ||
| ```bash | ||
| $ sudo npm install -g grunt-cli bower yo generator-karma generator-angular | ||
| ``` | ||
| * You should see output like the following figure shows. | ||
|
|
||
| <b>Figure: Installing Angular JS in the llp directory</b> | ||
| <br/><br/> | ||
|  | ||
|
|
||
| 6. Install `npm`: | ||
| * From within your `llp` directory, type `npm install` then press the `Enter` key. | ||
| * You should see output like the following figure shows. | ||
|
|
||
| <b>Figure: Installing npm in the llp directory</b> | ||
| <br/><br/> | ||
|  | ||
|
|
||
| 7. Install `bower`: | ||
| * From within your `llp` directory, type `bower install` then press the `Enter` key. | ||
| * You should see output like the following figure shows. | ||
|
|
||
| <b>Figure: Installing bower in the llp directory</b> | ||
| <br/><br/> | ||
|  | ||
|
|
||
| 8. Install Ruby: | ||
| * Type `sudo apt-get install ruby` | ||
| * Accept the installation requests. | ||
| * After Ruby is installed, switch to the `llp` directory, type `gem` and press the __Enter__ key. You should see output like the following figure shows. | ||
|
|
||
| <b>Figure: Installing Ruby</b> | ||
| <br/><br/> | ||
|  | ||
|
|
||
| 9. Install the Ruby development tools: | ||
| * Type `sudo apt-get install ruby-dev` and press the __Enter__ key. | ||
| * Accept the installation requests. | ||
| * If you see an error about not being able to resolve `es.archive.ubuntu.com`, try disconnecting Cisco VPN, or disconnect and reconnect your network connection, or see [this article](http://askubuntu.com/questions/29071/apt-get-update-cannot-find-ubuntu-servers) for additional suggestions. <br/><br/> | ||
|
|
||
| 1. With your `llp` directory as the working directory, use the Ruby `gem` package installer to install the `compass` package: | ||
| * Type `sudo gem install compass` then press the __Enter__ key. | ||
| * You should see output like the following figure shows. | ||
|
|
||
| <b>Figure: Installing compass</b> | ||
| <br/><br/> | ||
| <br/><br/> | ||
|
|
||
| 1. In the `llp` directory, edit the `config.json` file to specify the local filesystem path to the `labs` folder that contains the labs to be previewed. | ||
|
|
||
| For example, the author's entry is: `{"labPath": "/home/brett/dev/devnet-guidelines/labs/"}` | ||
| 12. In the command window, with the `llp` directory as your working directory, type `grunt serve` and press the __Enter__ key. | ||
| * Output similar to the following figure appears: | ||
| <b>Figure: Starting the grunt server</b> | ||
| <br/><br/> | ||
|  | ||
| * After this command-line output finishes, a browser window opens and displays the Learning Lab Previewer. The previewer displays labs that you can preview; these labs are in the directory that you specified by editing the `config.json` file. | ||
| <b>Figure: Learning Labs Previewer output in browser</b> | ||
| <br/><br/> | ||
|  | ||
| 1. To use the previewer, click the **Preview** button that appears next to the lab to preview. At the top of the page that appears, a row of numbered buttons provide access to previews of individual pages of the selected lab. | ||
| <b>Figure: Numbered buttons provide access to individual lab pages</b> | ||
| <br/><br/> | ||
|  | ||
| 1. To preview a different location, take the following steps: | ||
| * Use the command window to exit `grunt` (ctrl+C) | ||
| * Edit `config.json` to specify a new location and then save the `config.json` file. | ||
| * In the command window, issue the `grunt serve` command again. | ||
| <br/> | ||
| <br/> | ||
| #### Next Step: Installing and Running Learning Lab Previewer Tool Using Docker |
Oops, something went wrong.