NativeScript Documentation

Home of the NativeScript documentation content that lives at http://docs.nativescript.org. Start contributing today!

• Contributing 🍺
• About Jekyll 🔩
• Configuration ⚙️
• Tutorials 📖
• Local Setup 💻
• Contributors ❤️

Contributing

The NativeScript documentation is completely open source and we love contributions. Whether you want to fix a typo, or write an entire article, the NativeScript documentation is a great way to get started contributing to an open source project.

Don’t know where to start? Check out the list of issues with the “help wanted” label. New to git or GitHub? Join our community Slack chat and we’ll be happy to help get you up and running.

The master branch contains the most up-to-date version of the NativeScript documentation and its contents are uploaded to docs.nativescript.org. When contributing to the documentation, always create a branch for your work from master as this will facilitate easier pull request management.

About Jekyll

This documentation is built using Jekyll. More info on how to control the template, table of content and the project structure in general can be found in the Build README

Configuration

There are two versions of the NativeScript documentation that generate similar output: nativescript and angular. The former builds the vanilla NativeScript docs at docs.nativescript.org, while the latter discusses Angular-specific topics at docs.nativescript.org/angular/start/introduction.

Most of the content in this repository is shared between the two environments, but occasionally you may need to add environment-specific content. When you have this need you have a few options.

1. If you would like a page to appear in a single environment, add an environment: angular or environment: nativescript property to that page's front matter. Pages marked with an environment property will appear in a single environment, and pages not marked with an environment property will be shared across all environments.

2. If you have a page that should be appear in both environments but has different content for certain sections, you can use our built-in environment block tags. The blocks are named angular and nativescript, respectively, and can be used like this:

{% nativescript %}This paragraph appears only in the vanilla NativeScript documentation{% endnativescript %}

This paragraph appears in both environments.

{% angular %}This appears only in the Angular NativeScript documentation{% endangular %}

Tutorials

The NativeScript documentation contains two full getting started tutorials, one for using NativeScript with vanilla JavaScript, and another for using NativeScript with Angular. The contents of these two tutorials are in this repository’s /tutorial folder.

When making changes to either of these tutorials you might need to additional alter one of the four templates these tutorials use. Readers use these templates through the tns create command, for example tns create HelloWorld --template nativescript-template-tutorial.

• JavaScript
  • nativescript-template-tutorial
    • Hello world template used by the JavaScript tutorial.
  • nativescript-template-groceries
    • Starting point for the Groceries example used by the JavaScript tutorial.
• Angular
  • nativescript-template-ng-tutorial
    • Hello world template used by the Angular tutorial.
  • nativescript-template-ng-groceries
    • Starting point for the Groceries example used by the Angular tutorial.

Local Setup

If you plan to work on a non-trivial change, you will most probably want to run the documentation locally in order to give your change a try before submitting a pull request. To provide you with this opportunity without installing a ton of libraries and loose time in configuration, we have prepared a virtual environment based on a docker image, where everything is prepared for you in advance.

Prerequisites

Docker should be installed on your machine:

• Open the official Docker install page and follow the instructions.

The NativeScript documentation is composed from multiple repositories:

• NativeScript Docs
• NativeScript Modules
• NativeScript Angular
• NativeScript JavaScript SDK examples
• NativeScript Angular SDK examples

Building the docker image

Start by cloning all required git repositories in some local folder (ns-docs in the following examples):

Open a console box (Windows users should run a Git bash session!) and clone the required git repositories:

mkdir ns-docs
cd ns-docs
git clone https://github.com/NativeScript/docs.git
git clone https://github.com/NativeScript/NativeScript.git
git clone https://github.com/NativeScript/nativescript-angular.git
git clone https://github.com/NativeScript/nativescript-sdk-examples-js.git
git clone https://github.com/NativeScript/nativescript-sdk-examples-ng.git
git clone https://github.com/NativeScript/nativescript-cli.git
cd nativescript-cli
git submodule update --init
cd ..

NOTE: If you have these repositories locally from previous work with the documentation, be sure to delete them and start from scratch as some old files can cause problems with the current setup.

Then build the docker image by using the following command from the ns-docs folder:

sudo docker build -t ns-docs:1.0 docs/build

Building the documentation

Start the docker image created in the previous step from the ns-docs folder:

sudo docker run --rm -t -i -v $(pwd):/root -p 9192:9192 -t ns-docs:1.0

Due to the poor performance of mounted volumes on Mac OS you may use the delegated mount strategy:

sudo docker run --rm -t -i -v $(pwd):/root:delegated -p 9192:9192 -t ns-docs:1.0

Adding content

Edit an article in some of the repositories and navigate to http://localhost:9192 on the host machine. Notice that it might take some time for the changes to be reflected in the browser.

Making changes

• Edit some files.
• Refresh your browser (depending on which files have been modified it might take more or less time for the changes to take effect).

Contributors

The following is a list of all the people that have contributed to the NativeScript documentation. Thanks for your contributions!