diff --git a/app/assets/images/install/codespaces/create-a-codespace.png b/app/assets/images/install/codespaces/create-a-codespace.png index f9610d1b..ff575586 100644 Binary files a/app/assets/images/install/codespaces/create-a-codespace.png and b/app/assets/images/install/codespaces/create-a-codespace.png differ diff --git a/app/assets/images/install/creating-a-new-prototype/github-create-new-repository.png b/app/assets/images/install/creating-a-new-prototype/github-create-new-repository.png new file mode 100644 index 00000000..1c728aeb Binary files /dev/null and b/app/assets/images/install/creating-a-new-prototype/github-create-new-repository.png differ diff --git a/app/assets/images/install/creating-a-new-prototype/use-this-template.png b/app/assets/images/install/creating-a-new-prototype/use-this-template.png new file mode 100644 index 00000000..30e2cfd8 Binary files /dev/null and b/app/assets/images/install/creating-a-new-prototype/use-this-template.png differ diff --git a/app/install.md b/app/install.md index 5933877a..59bd496d 100644 --- a/app/install.md +++ b/app/install.md @@ -2,6 +2,10 @@ layout: hub title: Get started groups: + - title: Creating a new prototype + items: collections.setup + clickable: true + columns: 3 - title: Installing the kit on your computer items: collections.install-local clickable: true diff --git a/app/install/_partials/download.md b/app/install/_partials/download.md index c7990de8..8a9ae4bc 100644 --- a/app/install/_partials/download.md +++ b/app/install/_partials/download.md @@ -1,4 +1,8 @@ -## 1. Create a folder +## 1. Create a new prototype on GitHub + +Follow the [Create a new prototype guide](/install/creating-a-new-prototype/) to create a new prototype using the template. + +## 2. Create a folder {% if slug == "windows" %} Create a folder called Projects in your Documents folder. @@ -8,32 +12,10 @@ Create a folder called Projects in your home folder. You can open your home folder by opening a new finder window and selecting Go and then Home from the top menu. {% endif %} -## 2. Download the kit - -The simplest way to get the kit is to [download it as a ZIP]({{downloadUrl}}). - -You'll use a new copy of the kit for each new prototype you make. That way your prototypes don't interfere with each other. - -## 3. Unzip the kit - -Unzip the kit you downloaded. It should be in your Downloads folder. - -You should end up with a ZIP file called nhsuk-prototype-kit followed by the version number. - -Unpack that ZIP file by double clicking on it. You should then see another folder named nhsuk-prototype-kit followed by the version number. - -![Screenshot of the opened zip file](/assets/images/install/{{slug}}/download-unzip.png) - -## 4. Rename the folder - -Rename the unpacked folder to something descriptive for your prototype. - -For this guide, call the folder find-a-pharmacy - -![Screenshot of the renamed folder.](/assets/images/install/{{slug}}/download-rename.png) +## 3. Download your prototype -## 5. Move the folder +The simplest way to download your prototype is to use the [GitHub Desktop](https://desktop.github.com/download/) application. Once you install this you can click on the ‘Code’ button on your project on GitHub, and then click ‘Open with GitHub Desktop’. -Move the folder into the Projects folder you created in step 1. +Alternatively if you use Visual Studio Code you can open a new window and select ‘Clone Git Repository’ and then paste in the URL of your prototype on GitHub. -![Screenshot of the projects folder.](/assets/images/install/{{slug}}/download-move.png) +You can also click the ‘Code’ button and select the ‘Download ZIP’ option – however if you do this you will not be able to synchronies your changes as easily. diff --git a/app/install/advanced.md b/app/install/advanced.md index 3a199cb0..85048a8c 100644 --- a/app/install/advanced.md +++ b/app/install/advanced.md @@ -12,11 +12,11 @@ The kit is built on the [Express](http://expressjs.com/) framework, and uses [NH [Node.js](https://nodejs.org) version 20 or higher. -## Download the kit +## Create a new prototype -The simplest way to get the kit is to [download it as a zip]({{downloadUrl}}). +The best way to create a new prototype is to [use the template repository on GitHub](/install/creating-a-new-prototype/). -You can also clone or download a copy from [GitHub](https://github.com/nhsuk/nhsuk-prototype-kit). +If you do not want to use GitHub you can [download it as a zip]({{downloadUrl}}) instead. ## Install dependencies diff --git a/app/install/codespaces.md b/app/install/codespaces.md index 23ce1208..bd4ec3e4 100644 --- a/app/install/codespaces.md +++ b/app/install/codespaces.md @@ -16,7 +16,7 @@ This avoids the need to install Node.js on your computer. Instead, you will run You do not need any technical knowledge to use this guide. -You will need a [GitHub account](https://github.com/signup?ref_cta=Sign+up&ref_loc=header+logged+out). +You will need a [GitHub account](https://github.com/signup?ref_cta=Sign+up&ref_loc=header+logged+out) and should have already followed the guide to [create a new prototype](/install/creating-a-new-prototype/). We will show you how to: diff --git a/app/install/codespaces/create-a-codespace.md b/app/install/codespaces/create-a-codespace.md index c91f1219..31b454bf 100644 --- a/app/install/codespaces/create-a-codespace.md +++ b/app/install/codespaces/create-a-codespace.md @@ -1,22 +1,11 @@ --- title: Create a codespace caption: "Step 1 of 2: Codespaces" -description: To use the kit within a Codespace you will first need to create one. --- -## 1. Create a new prototype +Before following this guide you should already have [created your prototype](/install/creating-a-new-prototype/) on GitHub. -To create a new prototype, visit the [NHS prototype kit on GitHub](https://github.com/nhsuk/nhsuk-prototype-kit), click the Use this template button and select Create a new repository. - -You'll then be taken to a screen where you can enter a repository name -- this should be the name of the service you are prototyping. You can change this later if you are not yet sure of the name. - -You can also enter an optional description. You do not need to select the Include all branches checkbox. - -You can choose to make your prototype public or private. This can also be changed later. - -Click Create repository when you are ready. This will create a copy of the NHS prototype kit which you can then edit. - -## 2. Create a new codespace +## 1. Create a new codespace On every GitHub repository page is a Code button which is used to get a copy of or to use the code held within the git repository. @@ -28,7 +17,7 @@ Next click on the Create codespace on main button. This The Create codespace on main button will either be shown as a large button or a small plus symbol after the label your workspaces in the cloud. -## 3. Wait for the Codespace setup to finish +## 2. Wait for the Codespace setup to finish The Codespace will open in a new tab (or window) and begin the setup process. @@ -36,7 +25,7 @@ You will see an interface building with a progress message showing that the spac This can take between 30 seconds and 5 minutes. -## 4. Check that it has worked +## 3. Check that it has worked Once the Codespace has been created, you will then see the 'terminal' tab with commands being exectuted to start the prototype kit. diff --git a/app/install/creating-a-new-prototype.md b/app/install/creating-a-new-prototype.md new file mode 100644 index 00000000..ed476b52 --- /dev/null +++ b/app/install/creating-a-new-prototype.md @@ -0,0 +1,32 @@ +--- +eleventyNavigation: + key: Creating a new prototype +title: Creating a new prototype +description: Use the template on the GitHub website. + +order: 1 +tags: + - setup +--- + +You will first need to create a free GitHub account if you do not already one, and sign in. + +Then visit the [NHS prototype kit on GitHub](https://github.com/nhsuk/nhsuk-prototype-kit), click the ‘Use this template’ button and select ‘Create a new repository’: + +![Screenshot showing a page on the GitHub.com website with the title ‘nhsuk-prototype-kit’. There are 2 green buttons on the page, one is labelled ‘Use this template’ and is circled in red, the other is labelled ‘Code’ and is not circled.](/assets/images/install/creating-a-new-prototype/use-this-template.png) + +You'll then be taken to a screen where you can enter some details about your project: + +![Screenshow showing a page on the GitHub.com website titled ‘Create a new repository’. It shows ‘Start with a template: nhsuk-prototype-kit’ and then has 4 fields grouped under ‘General’ and ‘Configuration’ followed by a green button labelled ‘Create repository’.](/assets/images/install/creating-a-new-prototype/github-create-new-repository.png) + +Here’s how to complete the fields: + +* **Include all branches**: leave this in the ‘off’ setting +* **Owner**: this should be the name of the organisation you are working for. If you have not yet been added to your organisation on GitHub you should ask to be added. +* **Repository name**: this should be the name of the service you are prototyping. You can change this later if you are not yet sure of the name. By convention it is lowercase and uses hyphens instead of spaces. Add the suffix `-prototype` to make it clear to others in your organisation that it is a prototype. +* **Description**: this is optional and you can leave it blank for now, or enter a short description of what the service you are prototyping will do. +* **Choose visibility**: You can choose to make your prototype code public or private. This can be changed later. + +Click the ‘Create repository’ button when you are ready. This will create a copy of the NHS prototype kit for your new prototype. + +You can then run and edit the prototype either on your computer or in the cloud. See [Get started](/install) for guides to both options. diff --git a/app/install/mac/download.md b/app/install/mac/download.md index f127aea4..5419b778 100644 --- a/app/install/mac/download.md +++ b/app/install/mac/download.md @@ -1,5 +1,5 @@ --- -title: Download and decide where to keep your prototypes +title: Download and decide where to keep your prototype order: 4 --- diff --git a/app/install/windows/download.md b/app/install/windows/download.md index f127aea4..5419b778 100644 --- a/app/install/windows/download.md +++ b/app/install/windows/download.md @@ -1,5 +1,5 @@ --- -title: Download and decide where to keep your prototypes +title: Download and decide where to keep your prototype order: 4 ---