diff --git a/app/views/how-tos/github-collaborate.html b/app/views/how-tos/github-collaborate.html new file mode 100644 index 0000000..270bd7f --- /dev/null +++ b/app/views/how-tos/github-collaborate.html @@ -0,0 +1,129 @@ +{% extends "layout.html" %} {% block pageTitle %} Collaborate on prototypes +using GitHub Desktop - NHS prototype kit {% endblock %} {% block beforeContent +%} {% include "how-tos/includes/breadcrumb.html" %} {% endblock %} {% block +content %} + +
+
+

+ Collaborate on prototypes using GitHub Desktop +

+ +

+ When you store a prototype on GitHub, you can collaborate on your code + with anyone in your team. +

+

+ You can make a 'branch' (a separate version) so it doesn't affect anyone + else. +

+

+ When you are ready to suggest your changes, you can make a 'pull request' + to the main branch. This will share your suggested changes + with the rest of the team for them to review. +

+

+ If you are working on your own, you can make changes on + main without using branches. +

+

Create a branch

+ +
    +
  1. + In Github Desktop top bar, select + Current branch. +
    2. +
  2. + Select + New branch. +
    3. +
  3. + Enter a branch name and select + Create branch based on 'main'. +
    4. +
+

Save and share changes

+ +

+ Make your changes to the prototype and save them in your code editor, then + you can share them by creating a 'pull request'. +

+

GitHub Desktop will show you the files that have changed.

+
    +
  1. + In Github Desktop, bottom left, enter a summary in the box above the + description (leave the description blank). +
    2. +
  2. Select Commit to branch-name
    3. +
  3. + Click Publish repository - this publishes your code to + GitHub. +
    4. +
  4. + If you make more changes, commit them and select + Push origin. +
    5. +
+ +

Make a pull request

+ +
    +
  1. + Select Create a pull request - this tells others about + your new branch, so they can review and suggest changes. +
    + If you can't see that button, select the Branch menu, + then Create a pull request. +
    2. +
  2. + Creating a pull request will open GitHub website. Write a title and + description of your changes and select + Create pull request. +
    3. +
+

Review a pull request

+

Another member of the team should review the pull request on GitHub.

+ +

They should:

+
    +
  1. Go to the Files Changed tab.
    2. +
  2. Select Review changes.
    3. +
+

When they have approved the pull request:

+
    +
  1. Go to the Conversation tab
    2. +
  2. Select Merge pull request
    3. +
+ +

Download changes

+ +

+ When a pull request is merged, you'll need to update your version (also + called 'pulling' changes). +

+ +
    +
  1. + In Github Desktop top bar, select Current branch. +
    2. +
  2. Select main.
    3. +
  3. + Click Fetch origin and then + Pull origin. +
    4. +
  4. + Select Open in Visual Studio Code to view the changes. +
    5. +
+

Dealing with conflicts

+

+ If 2 people edit the same file at the same time, it can sometimes cause an + error in GitHub called a conflict. +

+

+ If there is a conflict, you must manually resolve the change - ask a + developer on your team to help. +

+
+
+{% endblock %} diff --git a/app/views/how-tos/github-desktop.html b/app/views/how-tos/github-desktop.html new file mode 100644 index 0000000..d584209 --- /dev/null +++ b/app/views/how-tos/github-desktop.html @@ -0,0 +1,63 @@ +{% extends "layout.html" %} {% block pageTitle %} Store your code online with +GitHub and GitHub Desktop - NHS prototype kit {% endblock %} {% block +beforeContent %} {% include "how-tos/includes/breadcrumb.html" %} {% endblock %} +{% block content %} + +
+
+

+ Store your code online with GitHub and GitHub Desktop +

+ +

+ GitHub is a way to store code online so you can collaborate with others. + It also makes it easier to publish your prototype online using a hosting + service. +

+ +

Some concepts:

+ +

Set up GitHub Desktop

+ +
    +
  1. + Create a free GitHub account. +
    2. + +
  2. + Download the GitHub Desktop app. +
    3. + +
  3. Run GitHub Desktop.
    4. + +
  4. Sign in with your GitHub account details.
    5. +
+ +

Using GitHub Desktop

+

Use GitHub Desktop to work with repositories. +

+

A repository contains all of the files in a prototype. You can use the repository to view the file history and work on your prototype with others. +

+

You can now:

+ + + +

You can also find out about how to use GitHub Desktop on the GitHub website.

+ +
+
+{% endblock %} diff --git a/app/views/how-tos/github-download-existing-prototype.html b/app/views/how-tos/github-download-existing-prototype.html new file mode 100644 index 0000000..64ed66f --- /dev/null +++ b/app/views/how-tos/github-download-existing-prototype.html @@ -0,0 +1,47 @@ +{% extends "layout.html" %} {% block pageTitle %} Download an existing prototype from GitHub +- NHS prototype kit {% endblock %} {% block beforeContent %} {% include +"how-tos/includes/breadcrumb.html" %} {% endblock %} {% block content %} + +
+
+

Download an existing prototype from GitHub

+ +

+ To store your new prototype in GitHub, you need to + set up GitHub Desktop. +

+

+ You can work with others on an existing prototype. For example, if you're joining a team that has a prototype. +

+

+ Download the prototype +

+

To work on an existing prototype, you'll need to download (or 'clone') the repository. +

+
    +
  1. + Go to the prototype's repository on GitHub (if you do not have a link, ask your team). +
    2. +
  2. + Select the Code button and Open with GitHub Desktop. +
    3. +
  3. + Choose a local path. This should be your prototypes folder. +
    4. +
+

+ Open the prototype +

+ +
    +
  1. + In GitHub Desktop, select Open in Visual Studio Code. +
    2. +
  2. + Go to the terminal in Visual Studio Code. Select Terminal and New Terminal. +
    3. +
  3. In the terminal, run npm install
    4. +
+
+
+{% endblock %} diff --git a/app/views/how-tos/github-store-new-prototype.html b/app/views/how-tos/github-store-new-prototype.html new file mode 100644 index 0000000..380612e --- /dev/null +++ b/app/views/how-tos/github-store-new-prototype.html @@ -0,0 +1,60 @@ +{% extends "layout.html" %} {% block pageTitle %} Store your new prototype in +GitHub - NHS prototype kit {% endblock %} {% block beforeContent %} {% include +"how-tos/includes/breadcrumb.html" %} {% endblock %} {% block content %} + +
+
+

Store your new prototype in GitHub

+ +

+ To store your new prototype in GitHub, you need to + set up GitHub Desktop. +

+ +

+ Add the prototype on your computer to Github +

+ +
    +
  1. + In GitHub Desktop, select + Add an Existing Repository (if it's not on the screen, + click the File menu and select + Add Local Repository). +
    2. +
  2. + Click the Choose button and select your prototype + folder. +
    3. +
+

If Github Desktop shows a warning

+

+ You may get a warning saying that the directory does not appear to be a + Git directory - this is the correct process. +

+
    +
  1. + In the warning, click the create a repository link. +
    2. +
  2. + On the next screen, titled Create a repository, click + the Create repository button. +
    3. +
+

Upload your prototype to GitHub

+ +
    +
  1. In the top right, click publish repository.
    2. +
  2. + Make sure 'Keep this code private' is not ticked, as we + need others to be able to see and collaborate on it. +
    3. +
  3. Click publish repository.
    4. +
+

+ Your prototype code is now on GitHub, which means other people can see and + collaborate on your code. +

+
+
+{% endblock %} diff --git a/app/views/how-tos/index.html b/app/views/how-tos/index.html index fb17a0a..b8fa4fd 100755 --- a/app/views/how-tos/index.html +++ b/app/views/how-tos/index.html @@ -26,7 +26,7 @@

Guides

-
+

Download and install

    @@ -81,7 +81,7 @@

    Build a basic prototype tutorial

-
+

General use

@@ -93,13 +93,31 @@

General use

  • Branching – show a different page based on user input
    • -

    Share your prototype

    +

    Version control and collaboration

    + + +
    +
    +

    Sharing your prototype

    + + +

    Updating the kit