Create GitHub Repository and Prepare Client Site for Local Development

This guide offers a step-by-step approach to creating a GitHub repository and setting up a client site for local development, making it essential for developers working with client sites. It ensures all necessary configurations are made, from naming conventions to repository management and local setup, streamlining the development process.

Josh Mahoney
157 steps
19 minutes

Radancy

GitHub

Site in admin should be created first following [Site Naming Conventions](https://tmpww.sharepoint.com/sites/delivery/SitePages/UID-Naming-Conventions.aspx) and published to preview to reference needed information.

Create GitHub repository for New Client Site Instance

Open link to <https://github.com/radancy-pe>

Click on [[New]]

GitHub has updated its interface, so the layout may look slightly different. The steps below still apply.

Click on dropdown stating [[No Template]]

Select [[radancy-pe/uid-base-gst-local]] as option

If using 10k template, make sure [[radancy-pe/uid-site-us-40324-under_10k-v1]] is selected

Check that your correct template is selected

Click here

Select [[radancy-pe]] if not selected by default

Click in field to begin creating repository name

Type [[uid-site-us- ]]into field

If working on the EU server, [[radancy.eu]], be sure to use the naming convention [[uid-site-eu-]] instead

Click here to open separate tab

Navigate to admin of site currently working on

Click in search bar to highlight tenant ID number

The tenant ID number will be the number appearing after path [[../pagelist/]]

Press [[Cmd/Ctrl]] + [[C]]

Navigate back to create repository page

Click in field, and be cursor appears after latest text

Press [[Cmd]] + [[V]]

Type in [[-]] after text

Navigate back to admin page

Click on [[Settings]] in left hand panel

Click on [[General]] in dropdown

Check out the name in the display name field

Navigate back to repo page and select repo name field to add tenant name

The tenant name will be the Display Name you saw on the admin page, but in all lowercase and the spaces in the name replaced with [[\_]]

Add tenant name to field and with a [[- ]]

Navigate back to admin page

Check version of site

Go back to repo page and click on repo name field

Add version number to field, which in most cases will be [[v1]]

Navigate back to admin page

Click in field to begin highlighting text

Press [[Cmd/Ctrl]] + [[C]]

Navigate back to repository page

Click in description field

Press [[Cmd/Ctrl]] + [[V]]

Navigate back to admin page

Select "Themes & Pages"

Click "Address and search bar"

Press [[Cmd/Ctrl]] + [[C]]

Go back to repository page and select "Description" field

Add a space and [[-]] after text

Press [[Cmd/Ctrl]] + [[V]]

Click button to create repository

Click [[Settings]] tab on page

Click [[Collaborators and teams]]

Click on [[Add teams]]

Type in "ui" into field

Click on [[radancy-pe/ui-delivery-admin]]

Select [[Admin]] as option

Click on [[Add Selection]]

Banner appears above noting access has been granted for [[radancy-pe/ui-delivery-admin]]

Click here

Type in "ui" into field

Click on [[radancy-pe/ui-delivery]]

Select [[Maintain]] as option

Click on [[Add Selection]]

Banner appears above noting access has been granted for [[radancy-pe/ui-delivery]]

Click on [[Code]] tab to go back to main page

Clone Repo to Local Machine

Before starting, be sure all steps in [Development Environment Setup Guide](https://scribehow.com/viewer/Development_Environment_Setup_Guide_Essential_Tools_and_Installation_Commands__QhFxRjyDT-yC0Uj_lPnSbw) are completed.

Go to repo for new site instance created

Click on the green button [[Code]]

Make sure [[HTTPS]] is selected

Click on clipboard icon to copy clone url

Open "Visual Studio Code"

If your VS Code is already open, be sure to click on [[File]] at the top, and then click on [[New Window]] to see startup screen.

Click on [[Clone Git Repository]]

Click on field to be selected

Press [[Cmd/Ctrl]] + [[V]] to copy url in field

Click on option below, [[Clone from URL]]

If not having a folder to contain all your projects, create a "Projects" folder in your desired location

Select the folder where all your projects are and click [[New Folder]]

Name your client folder to your desired liking, and click on [[Create]]

Click on your newly created client folder and click [[Select as Repository Destination]]

Click on [[Open]] to open the cloned repository

Configure Your Project to Run on Local Server

Click [[Terminal]]

Click [[New Terminal]]

Click on terminal to begin typing if cursor not showing in it

Will only run [[npm install]] once at the beginning of a project.

Type in [[npm install]] in your terminal

Press [[Return]] to run command and setup project dependencies

Click on folder name, [[gulpfile.js]]

Click on sub folder name, [[configs]]

Click on file name, [[siteSettings.js]]

Navigate to [[Themes & Pages]] of your client site

Click "Address and search bar"

Click in search bar to highlight **Org ID** number

The **Org ID** number will be the number appearing after path [[../pagelist/]]

Press [[Cmd/Ctrl]] + [[C]] to copy **Org ID** number

Navigate back to [[siteSettings.js]]

Highlight value for [[orgID]]

Press [[Cmd/Ctrl]] + [[V]] to paste updated value

Navigate back to admin page

Highlight **Site ID** number after **Org ID**

Press [[Cmd/Ctrl]] + [[C]] to copy **Site ID** number

Navigate back to [[siteSettings.js]]

Highlight value for [[siteID]]

Press [[Cmd/Ctrl]] + [[V]] to paste updated value

Navigate back to admin page

Click [[Publish]]

Click [[Preview Site]]

Highlight link of **RunMyTests URL**

Press [[Cmd]] + [[C]] to copy URL

Navigate back to [[siteSettings.js]]

Highlight value for [[runmytestsURL]]

Press [[Cmd/Ctrl]] + [[V]] to paste updated value

100

Press [[Cmd/Ctrl]] + [[S]] to save file

101

Click into terminal

102

Type in [[gulp]]

103

Press [[Return]]

104

Click on [[Advanced]]

105

Click on [[Proceed to localhost]]

106

Click on [[Accept]]

107

You are now running your site locally

Making your First Git Commit and Push to Repo

108

Go back to Visual Code

109

Click on icon that shows a number emphasized

110

Click into field

111

Type in "Update site config settings" or any name of your choosing

112

Click on blue button [[Commit]]

113

Click on [[Yes]]

114

Click on [[Sync Changes]] to push your local changes to your GitHub repository

115

Click on [[Ok]]

116

Go to pop up in right hand corner if appearing

117

Click on [[Yes]]

118

Now your repo is completely setup and can proceed to development

Setting up Site for EU Server

Follow these steps only if your site exists on the [[radancy.eu]] server. Otherwise skip these steps.

119

Go to Visual Code

120

Click on folder name, [[gulpfile.js]]

121

Click on sub folder name, [[configs]]

122

Click on file name, [[siteSettings.js]]

123

Highlight value "true"

124

Press [[Delete]]

125

Type in "false"

126

Press [[Cmd/Ctrl]] + [[S]] to save file

127

Click into terminal

128

If gulp is currently running in terminal, press [[Ctrl]] + [[C]]

129

Click on terminal line

130

Type in "gulp"

131

Press [[Return]]

132

Click on folder name, [[build]]

133

Click on sub folder name, [[inside-admin]]

134

Click on sub folder name, [[concatenated]]

135

Click on file name, [[theme-concat-dev.scss]]

136

Once in file, scroll to headline "Imports"

137

To confirm that server is updated, check that file imports begin with [[../../../company/1327]] and not [[../../../company/40324]]

Set up Site for AJD Build

If running `gulp` be sure terminate command in terminal by using `Ctrl + C` before proceeding with steps.

138

Click on folder name, [[gulpfile.js]]

139

Click on sub folder name, [[tasks]]

140

Click on file name, [[concatSass.js]]

141

142

Go to line 97 to update variable [[applyAJDImportRemoval]]

143

Update value from "**true"** to **"false"**

144

Press [[Cmd]] + [[S]] to save file

145

Open terminal if not already open

146

Type in command **"gulp"**

147

Press [[Return/Enter]] to run command

Following steps below indicate how to check AJD styles have been properly added in repo.

148

Click on folder name, [[inside-admin]]

149

Click on sub folder name, [[concatenated]]

150

Click on file name, [[theme-concat-dev.scss]]

151

152

Press [[Cmd/Ctrl]] + [[F]] to open finder

153

Click here

154

Copy "Advanced Job Details (AJD) Template"

155

Press [[Cmd]] + [[V]] to paste in finder

156

You can see AJD styles are present in file

Update Radancy Admin with Sass and Js

157

Proceed to guide, [Upload your Base GST Sass and JS to Admin](https://scribehow.com/o/czjZG6XNQl6UWis9hFCmEg/viewer/Upload_your_Base_GST_Sass_and_JS_to_Admin__Vr0hIGhtQu-7DfcZ83knXw)

Create GitHub Repository and Prepare Client Site for Local Development

Josh Mahoney
157 steps
19 minutes

Radancy

GitHub

Create GitHub repository for New Client Site Instance

Open link to <https://github.com/radancy-pe>

Click on [[New]]

GitHub has updated its interface, so the layout may look slightly different. The steps below still apply.

Click on dropdown stating [[No Template]]

Select [[radancy-pe/uid-base-gst-local]] as option

If using 10k template, make sure [[radancy-pe/uid-site-us-40324-under_10k-v1]] is selected

Check that your correct template is selected

Click here

Select [[radancy-pe]] if not selected by default

Click in field to begin creating repository name

Type [[uid-site-us- ]]into field

If working on the EU server, [[radancy.eu]], be sure to use the naming convention [[uid-site-eu-]] instead

Click here to open separate tab

Navigate to admin of site currently working on

Click in search bar to highlight tenant ID number

The tenant ID number will be the number appearing after path [[../pagelist/]]

Press [[Cmd/Ctrl]] + [[C]]

Navigate back to create repository page

Click in field, and be cursor appears after latest text

Press [[Cmd]] + [[V]]

Type in [[-]] after text

Navigate back to admin page

Click on [[Settings]] in left hand panel

Click on [[General]] in dropdown

Check out the name in the display name field

Navigate back to repo page and select repo name field to add tenant name

The tenant name will be the Display Name you saw on the admin page, but in all lowercase and the spaces in the name replaced with [[\_]]

Add tenant name to field and with a [[- ]]

Navigate back to admin page

Check version of site

Go back to repo page and click on repo name field

Add version number to field, which in most cases will be [[v1]]

Navigate back to admin page

Click in field to begin highlighting text

Press [[Cmd/Ctrl]] + [[C]]

Navigate back to repository page

Click in description field

Press [[Cmd/Ctrl]] + [[V]]

Navigate back to admin page

Select "Themes & Pages"

Click "Address and search bar"

Press [[Cmd/Ctrl]] + [[C]]

Go back to repository page and select "Description" field

Add a space and [[-]] after text

Press [[Cmd/Ctrl]] + [[V]]

Click button to create repository

Click [[Settings]] tab on page

Click [[Collaborators and teams]]

Click on [[Add teams]]

Type in "ui" into field

Click on [[radancy-pe/ui-delivery-admin]]

Select [[Admin]] as option

Click on [[Add Selection]]

Banner appears above noting access has been granted for [[radancy-pe/ui-delivery-admin]]

Click here

Type in "ui" into field

Click on [[radancy-pe/ui-delivery]]

Select [[Maintain]] as option

Click on [[Add Selection]]

Banner appears above noting access has been granted for [[radancy-pe/ui-delivery]]

Click on [[Code]] tab to go back to main page

Clone Repo to Local Machine

Go to repo for new site instance created

Click on the green button [[Code]]

Make sure [[HTTPS]] is selected

Click on clipboard icon to copy clone url

Open "Visual Studio Code"

If your VS Code is already open, be sure to click on [[File]] at the top, and then click on [[New Window]] to see startup screen.

Click on [[Clone Git Repository]]

Click on field to be selected

Press [[Cmd/Ctrl]] + [[V]] to copy url in field

Click on option below, [[Clone from URL]]

If not having a folder to contain all your projects, create a "Projects" folder in your desired location

Select the folder where all your projects are and click [[New Folder]]

Name your client folder to your desired liking, and click on [[Create]]

Click on your newly created client folder and click [[Select as Repository Destination]]

Click on [[Open]] to open the cloned repository

Configure Your Project to Run on Local Server

Click [[Terminal]]

Click [[New Terminal]]

Click on terminal to begin typing if cursor not showing in it

Will only run [[npm install]] once at the beginning of a project.

Type in [[npm install]] in your terminal

Press [[Return]] to run command and setup project dependencies

Click on folder name, [[gulpfile.js]]

Click on sub folder name, [[configs]]

Click on file name, [[siteSettings.js]]

Navigate to [[Themes & Pages]] of your client site

Click "Address and search bar"

Click in search bar to highlight **Org ID** number

The **Org ID** number will be the number appearing after path [[../pagelist/]]

Press [[Cmd/Ctrl]] + [[C]] to copy **Org ID** number

Navigate back to [[siteSettings.js]]

Highlight value for [[orgID]]

Press [[Cmd/Ctrl]] + [[V]] to paste updated value

Navigate back to admin page

Highlight **Site ID** number after **Org ID**

Press [[Cmd/Ctrl]] + [[C]] to copy **Site ID** number

Navigate back to [[siteSettings.js]]

Highlight value for [[siteID]]

Press [[Cmd/Ctrl]] + [[V]] to paste updated value

Navigate back to admin page

Click [[Publish]]

Click [[Preview Site]]

Highlight link of **RunMyTests URL**

Press [[Cmd]] + [[C]] to copy URL

Navigate back to [[siteSettings.js]]

Highlight value for [[runmytestsURL]]

Press [[Cmd/Ctrl]] + [[V]] to paste updated value

100

Press [[Cmd/Ctrl]] + [[S]] to save file

101

Click into terminal

102

Type in [[gulp]]

103

Press [[Return]]

104

Click on [[Advanced]]

105

Click on [[Proceed to localhost]]

106

Click on [[Accept]]

107

You are now running your site locally

Making your First Git Commit and Push to Repo

108

Go back to Visual Code

109

Click on icon that shows a number emphasized

110

Click into field

111

Type in "Update site config settings" or any name of your choosing

112

Click on blue button [[Commit]]

113

Click on [[Yes]]

114

Click on [[Sync Changes]] to push your local changes to your GitHub repository

115

Click on [[Ok]]

116

Go to pop up in right hand corner if appearing

117

Click on [[Yes]]

118

Now your repo is completely setup and can proceed to development

Setting up Site for EU Server

Follow these steps only if your site exists on the [[radancy.eu]] server. Otherwise skip these steps.

119

Go to Visual Code

120

Click on folder name, [[gulpfile.js]]

121

Click on sub folder name, [[configs]]

122

Click on file name, [[siteSettings.js]]

123

Highlight value "true"

124

Press [[Delete]]

125

Type in "false"

126

Press [[Cmd/Ctrl]] + [[S]] to save file

127

Click into terminal

128

If gulp is currently running in terminal, press [[Ctrl]] + [[C]]

129

Click on terminal line

130

Type in "gulp"

131

Press [[Return]]

132

Click on folder name, [[build]]

133

Click on sub folder name, [[inside-admin]]

134

Click on sub folder name, [[concatenated]]

135

Click on file name, [[theme-concat-dev.scss]]

136

Once in file, scroll to headline "Imports"

137

To confirm that server is updated, check that file imports begin with [[../../../company/1327]] and not [[../../../company/40324]]

Set up Site for AJD Build

If running `gulp` be sure terminate command in terminal by using `Ctrl + C` before proceeding with steps.

138

Click on folder name, [[gulpfile.js]]

139

Click on sub folder name, [[tasks]]

140

Click on file name, [[concatSass.js]]

141

142

Go to line 97 to update variable [[applyAJDImportRemoval]]

143

Update value from "**true"** to **"false"**

144

Press [[Cmd]] + [[S]] to save file

145

Open terminal if not already open

146

Type in command **"gulp"**

147

Press [[Return/Enter]] to run command

Following steps below indicate how to check AJD styles have been properly added in repo.

148

Click on folder name, [[inside-admin]]

149

Click on sub folder name, [[concatenated]]

150

Click on file name, [[theme-concat-dev.scss]]

151

152

Press [[Cmd/Ctrl]] + [[F]] to open finder

153

Click here

154

Copy "Advanced Job Details (AJD) Template"

155

Press [[Cmd]] + [[V]] to paste in finder

156

You can see AJD styles are present in file

Update Radancy Admin with Sass and Js

157

Proceed to guide, [Upload your Base GST Sass and JS to Admin](https://scribehow.com/o/czjZG6XNQl6UWis9hFCmEg/viewer/Upload_your_Base_GST_Sass_and_JS_to_Admin__Vr0hIGhtQu-7DfcZ83knXw)