Read guide below if you would like to know how to run this application in your local environment to test out features you'd like to implement!
Note that this guide walks you through using Github Desktop + Visual Studio Code
(although you can use a different editor such as Visual Studio because most of the guide uses Github Desktop as the main subject)
Getting started
Objectives
Methodology
Tools
Helpful extensions
Documentation
Issues or something looks confusing and needs fixing?
Contribute
Step 1 - Clone and open in Visual Studio Code
Step 2 - Run the NextJS application
Step 3 - Exit the application
Step 4 - Commit the changes and make a pull request
Step 5 - Celebrate!
The main objective of this file is a walkthrough of how to setup and run this application locally and is for maintainers and contributors alike! If at any point anything becomes unclear, please create an issue with which steps are confusing and tag win21H2.
- Clone this github repository and open it in Github Desktop
- Open the repository in Visual Studio Code using Github Desktop
- Make a new branch
- Commit to that branch and via Github Desktop, create a pull request
Github Desktop
Visual Studio Code
Firstly, you want to head over to the green code button. Next, you will have to go to the HTTPS section and copy the URL which is provided (you can click the small copy icon to the right of the link).
Now go ahead and open up Github Desktop and click File and then Clone repository..., you should then see a Clone repository window pop up, go to the URL section on the top menu and paste the link in the URL or username/repository section. After that, click Clone
You should then see something like the below
Which means you have cloned the repository to your local computer. After that, go ahead an click on the Fetch origin button around the top right and after it fetches, click on the button on the top that says Current branch and click New branch and name your branch. An example is win21H2-card
Go ahead and click the Create branch button and then Publish branch.
At this point, do not click Create Pull Request because you have not added anything and there is no point making a pull request with nothing in it. Now, click the Open in Visual Studio Code button.
Note that the editor you use does not have to be Visual Studio Code and if you would like to change it, there is a link Options, click on that and change the editor to the one you want to use.
Firstly, you will need to run in the integrated terminal (VSCode) the either of the commands below
npm
npm i
yarn
yarn
This will look in the package.json file and install the needed packages for the application to run.
↓↓ It should look something like the below ↓↓
Then, you want to type out either of the commands below
npm
npm i next
yarn
yarn add next
which will install next.js which allows you to run the application
↓↓ It should look something like the below ↓↓
And at last in order to run the application, type out either of the commands below
npm
npm run dev
yarn
yarn dev
which will start up a development server @ the address: http://localhost:3000
↓↓ It should look something like the below ↓↓
Well done! You have just learnt how to start up a NextJS application using a CLI
In order to stop the application, all you have to do is go to the terminal and hit Ctrl + C and then type out y and it should close down the localhost address.
Note that you wont see any changes past this point since http://localhost:3000 is no longer running. If you want to get it back up and running, simply type out either of the commands below
npm
npm run dev
yarn
yarn dev
Once you have made changes to the files e.g. adding in some lines of code, you now have to commit the changes to the branch. Go back to Github Desktop and you should now see some red and green lines (if you changed the files)
↓↓ It should look something like the below ↓↓
Now, enter a summary such as added CSS styling for darkmode and a description (which is optional) such as Added styling for darkmode effects etc.
↓↓ It should now look something like the below ↓↓
Now, click the Commit to button and you should be brought back to the main page and now you have to click the Push origin button which will push your commit to the branch you made.
↓↓ It should now look something like the below ↓↓
Now you can click the Create Pull Request button which should bring you to the Github website.
↓↓ It should look something like the below ↓↓
From here you can edit any details (such as the title or the description) although if you want to keep it the same, click the Create pull request button.
↓↓ It should look something like the below ↓↓
Congrats! You have learnt how to clone, open, run this application and then commit, and create a pull request for maintainers to review!
Please create an issue here and we will try to get back as soon as possible with a fix