SUMMARY - GitHub Pages · If you are using Windows and want to use "Git Bash" in for the VS Code terminal add the following to your User Settings: "terminal.integrated.shell.windows":

1.1

1.2

1.3

1.4

1.5

1.6

1.7

1.8

1.9

1.10

1.11

1.12

1.13

1.14

1.15

1.16

1.17

1.18

SUMMARYHowTo...

InstallGitLocally

SetupDevenvironmentwithVisualStudioCode

CreatenewGithubrepofromexistinglocalfilefolder

Creategh-pagesbranchforGithubhosting

UsetheVisualStudioCodeTerminal

Killaprocessbasedonportnumber

ValidateHTMLandCSS

SetupSSH

SetupLinuxShellonWindows10(Ubuntu)

HowtoAddanAdminUsertoWordpressusingmySQL

Wordpress:AdditionalPermissions

Codenvy:Getstarted

LetsEncrypt:HTTPSonApache

UsingBootstrapwithVue.js

GitCommandLine

CreateaDropletonDigitalOcean

MigrateVue2CodefromVueCLI2toVueCLI3

1

Howto...ThiscollectionofFAQ'sservetohelpastudentaccomplishtasksneededtodevelopwebsites.

HowTo...

2

Thisistheanswerto"HowtoinstallGitlocally?"

Beforeyoustartthisprocess,createanaccountonGithubathttps://github.com/.

DownloadandInstallGithttps://git-scm.com/downloads

ThiswillinstallaFolderwithanumberoffileandprograms.

Openabashwindow(terminalonMacor'gitbash'onWindows)andtypein

git--version

Thisshouldreturnaconfirmationthatgitisinstalledwithaversionnumber.

ConnecttoyourlocalworkstationtoGithubwithSSHWithoutSSHconnectionsetupyouwillhavetoenteryourusernameandpasswordeverytimeyouconnecttoGithub,whichyouwillusuallyhavetododuringagitpushcommand.BysharingyourworkstationpublickeywithGithub,youwillnothavetoprovidedusernameandpasswordtoconnect.

Openabashsession(terminalonMacor'gitbash'onWindows).Allcommandsbelowshouldbeenteredintothebashsession.

Checktoseeifyoualreadyhaveaprivatekey/publickeysetupbylistinganyfilesinthehiddendirection.ssh.

ls-al~/.ssh

Ifyoudon'tseeanyofthefollowingfilesyouwillneedtocreatethekeyfiles

id_rsa.pubid_ecdsa.pubid_ed25519.pub

Createpublickey/privatekeyfilesiftheydon'talreadyexistYouonlyneedtodothisstepifyoudon'talreadyhavepublic/privatekeyfiles.

YoullfirstcreatethekeyfilesusingtheemailyouprovidedtoGithub.Thiswilllabelthekeyswiththatemail.

ssh-keygen-trsa-b4096-C"[email protected]"

Generatingpublic/privatersakeypair.

Nextyou'llbepromptedtoenterafilenameforyourkeysandyoucanjustpressentertoacceptthedefault.

Enterafileinwhichtosavethekey(/c/Users/you/.ssh/id_rsa):[Pressenter]

Finally,you'llbepromptedtoenterapassphrase.ThisisasecurityfeatureandyouwillhavetoenterthispassphrasewhenyouconnecttoGithub,sobesuretorememberit.Itcanbeassimpleasafourdigitpinnumber.

Enterpassphrase(emptyfornopassphrase):[Typeapassphrase]

Entersamepassphraseagain:[Typepassphraseagain]

InstallGitLocally

3

https://github.com/

https://github.com/

https://git-scm.com/downloads

StartSSHAgentandAddKeysTheSSHAgentisaprocessthatwillallowyoutomanageSSHKeys.You'llstartthatprocessandaddyourkeyswiththefollowingcommand.

eval$(ssh-agent-s)

Youwillseearesponselikethisindicatethattheprocessisrunning.

Agentpid59566

Thecommandbelowaddsyourkeytothesshagent.Ifthenameofyourkeyisdifferentreplaceid_rsawiththenameofyourkey.

ssh-add~/.ssh/id_rsa

AddtheSSHKeytoyouGithubAcccountNowyouneedtoaddthepublickeytoyourGithubaccount.ThiswillallowGithubtodecryptthedatayousenditviaSSH.

WestartbyusingtheclipcommandtocopythecontentofthepublickeySSHfiletoyourlocalbuffer.

clip<~/.ssh/id_rsa.pub

Iftheclipcommandisnotinstalledyoucanlistthefiletotheconsoleandthencopythecontentsintoyourbufferwithctrl-c/cmd-c.Thecatcommandwilllistthefiletotheconsole.

cat~/.ssh/id_rsa.pub

Youcanalsoopenthefilewithatexteditorandcopythecontentintothebufferifyouhavetroublewiththeclipcommand.

Next,gotoyourGithubaccountonlineandclickonyourphoto.ThiswillrevealadropdownselectionwhereyoushouldselectSettings.

InstallGitLocally

4

TheSetingsmenuwillappearontheleftofthescreenandfromthereyouwillclickonSSHandGPGkeys.

AfteryouclickonSSHandGPGkeysyou,youwillyouclickonabuttontoaddanewkey.

ClickontheGreenbuttontoaddthekeyyouhaveinyoubuffer.Youshouldseeaform.EnteraTitlethathelpyoutoremembertheworkstationyougotthekeyfromandthenpastethekeyintothekeytextarea.FinallyclickontheAddSSHkeytoaddittothelistofkeysknowntoGithub.

InstallGitLocally

5

UpdateUserNameandEmailinLocalGitConfigThelocalGitprogrammaintainsconfigurationdataaboutyouthatshouldcorrespondtoyouraccountongithub.com.You'llwanttoprovidetheemailandusernamethatyouusedforgithub.cominwhenyouexecutethefollowingcommands.

gitconfig--globaluser.name"MonaLisa"

gitconfig--globaluser.email"[email protected]"

Youcanexecutethesecommandstoverifythatyouhavesetuptheconfigvariablesproperly.

gitconfig--globaluser.name

gitconfig--globaluser.email

MakingVSCodetheDefaultEditorforGit

YoucanmakeVisualStudioCodethedefaulteditorforgit.Ifyoueverforgettoclosethequoteswhenaddingthemessageduringcommit(gitcommit-m"update)youfindthatgitopenupthedefaulteditor.

BeforerunningthegitconfigtosetVSCodeasthedefaulteditor,checkthattheapplicationisinyourcomputer'spathsothatitcanbefound.Youcancheckthisbygoingtothecommandlineandrunning.

code--help

Ifalistofhelptopicisprintedtothescreen,theVSCodeisinthepath.IfnotinvestigatehowtogetVSCodeintothePath.Ifinthepathexecutethefollowinginthecommandline.

gitconfig--globalcore.editor"code--wait"

testwiththis:gitconfig--global-e

Ifyousetup,thecommandabovewillopenthe.gitconfigfilewhichiswheregitstoresitsconfigvariableinVSCode.

SeetheanswertoaquestionaboutthisonStackOverflowformoreinformation:EditorForGit]

HowtoUseVisualStudioCodeasDefaultEditorForGit

InstallGitLocally

6

https://stackoverflow.com/questions/30024353/how-to-use-visual-studio-code-as-default-editor-for-git

AddingVSCodetoyourcomputerPath

Mac:Select

Mac:ShellCommand:Install'Code'commandinpathfromtheCommandPalette.Windows:MakesureyouselectedAddtoPATHduringtheinstallation.Linux:MakesureyouinstalledCodeviaournew.debor.rpmpackages.

AdditionalReferences

https://help.github.com/articles/connecting-to-github-with-ssh/

InstallGitLocally

7

https://help.github.com/articles/connecting-to-github-with-ssh/

Thisistheanswerto"HowtosetupDevenvironmentwithVisualStudioCode?".

InstallVisualStudioCodeDownloadandinstallVSCodeusingthelinkbelow.

https://code.visualstudio.com/

PluginsPluginsprovideadditionalfunctionality.

Live-ServerpluginLive-ServerwillserveupwebpagesfromyourVSCodeprojecttoyourdefaultbrowser.ItrunsanHTTPserverasabackgroundprocessonthe5500port,whichisadevelopmentport.

Toinstall:

ClickontheExtensionsiconlocatedatthebottomoftheleftnavbarintheVSCodeApplication.

Searchfor'Live-Server'andclickontheGreenInstallbutton.


8

https://code.visualstudio.com/

AftertheExtensionisloaded,clickontheBlueReloadbuttontocompletetheinstallation.

NowyoushouldseeaGoLivebuttoninthebottomstatusbar.Whenyouclickonthat,Live-Serverwillstartandserveyourindex.htmlfilebydefault.


9

Oncetheserverhasbeenstarted,theGoLivebuttonwillchangetoPort:5500whichindicatesthattheserverisrunning.TheGoLiveandPort:5500buttonsoperateasatoggle.Whenyousavechangesinfilesthatarebeingserved,theserverwillautomaticallyreservethefiles.Thiswillensurethatyourbrowserisalwaysrunningthelatestsavedchanges.

BeautifyPlugin


10

TheBeautifyPluginwillhelpwithcodeformatting.Itwillallowyoutoright-clickonadocumentthatyouareeditingandseea"FormatDocument"option.Clickingonthiswillformatyourpage.AswithallVSCodeplugininstalls,yougonavigatetothepluginsection,searchforthepluginyouwanttoinstall,presstheInstallbuttonandthenpresstheReloadbuttontomakethepluginactive.

Thepicturebelowshowstheinstallbutton.

ThepicturebelowshowstheFormatDocumentoptionthatyouseewhenyourightclickinadocument.


11

UserSettingsVSCodeallowsyoutocustomizesettingsforallprojects(UserSettings)orforasingleproject(Workspacesettings).VSCodeprovidesaGUIsettingsmanagerbydefault.TomodifydefaultsettingsbyupgradingJSONconfigurationdirectlyusetheopencommand(CTRL-Shift-PonWindowsorCMD-Shift-PonMac)andtypein"OpenSettins(JSON)".

Youwillsee2filessidebyside.OntheleftarethedefaultsettingsandontherightaretheUsersettingoverrides.

Tochangeadefaultsettingfindthesettingontheleftandthencopyittotherightwithyourdesiredsetting.Forexample,ifyoudon'twanttoseetheminimapontherighthandsideoftheapplication,youcanmakethefollowingentryinthefileontheright.Noticethatoptionsarekey:valuepairsandthattheyarecommasseparated.

{

"editor.minimap.enabled":false

}


12

IfyouareusingWindowsandwanttouse"GitBash"infortheVSCodeterminaladdthefollowingtoyourUserSettings:

"terminal.integrated.shell.windows":"C:\\ProgramFiles\\Git\\bin\\bash.exe"

HowtoEasilyAddVSCodetotheMacPATHItisoftenhandytobeabletoopenVSCodefromthecommandline.Inordertodothisthe"code"commandwhichisthenameoftheVSCodeprogrammustbeinthemachine'slistofprogramswhicharestoredintheenvironmentalPATHvariable.ItwillgetinstalledinthewindowsPATHduringWindowsinstall.FortheMac,youneedtodothis:

OpenVisualStudioCodeandpressCommand+Shift+PthentypeShellincommandpalettenowyouareabletofindthisoptionlikeShellCommand:InstallcodeinPATHfromsuggestedlistincommandpalette.Selectthatoptions.


13

Thisistheanswerto"HowtoinstallcreatenewGithubrepofromexistingfilefolder?"

NewrepositoryfromexistinglocalfolderThisassumesyouhaveinstalledGitlocally.

Online:

Gotoyourgithubaccounthttps://github.com/<accountname>

Intheupper-rightcornerofanypage,clickthe"+"iconandchooseto'NewRepository'

FilloutthenewrepositorynameandgiveitadescriptionintheNewRepositoryform

Makenoteofthenameoftherepo

Local:

OnMac,openterminalandonWindowsopenGitBash.

Followinstructionsbelowsubstitutingyouraccountnameandtherepoyoucreatedaboveinthecommand.

cdtotherootofthefolderyouwanttoaddtogithub

gitinit

[email protected]:<accountname>/<exisistingremoterepo>.git

gitpush-uoriginmaster

gitadd.

gitcommit-m"firstcommit"

IfyouaddedalicenseorReadmewhilesettingupthenewrepositoryyouwillneedto"pull"before"pushing"

gitpulloriginmaster--allow-unrelated-histories

gitpush--set-upstreamoriginmaster

CreatenewGithubrepofromexistinglocalfilefolder

14

https://github.com

Thisistheanswerto"Howtocreategh-pagesbranchforGithubhosting?"

Creategh-pagesbranchforGithubhostingGithubwillhostthewebpagesthatyoucreateinyourRepos.OnewaytosetupGithubhostingistocreateagh-pagesbranchinyourrepo.Anycodeinthatbranchwillbehostedatanaddressthatfollowsthispattern

https://<accountname>.github.io/<reponame>

Forexampleifmyaccountnameisjanedevandmyreponameiswats3010-hello-world,andIhavecreatedagh-pagesbranchonmyrepo,Iwillfindtheindex.htmllocatedintherootofthereposervedupatthisURL:

https://janedev.github.io/wats3010-hello-world

Ifyouhavecreatedagh-pagesbranch,butareunsurewhereitishostedyoucanclickontheSettingstabonthemainpageofyourrepoandthenscrolldowntofindthelinktothehostedwebpages.

Commandstocreategh-pagesWhenyoustartworkingonanewrepoyouwillbeinthemasterbranch.

Fromabashterminal(gitbashonWindoworterminalonMac)

Checkwhichbranchyou'rein

gitstatus

Ifyouareinmasterandyouwanttocreateagh-pagesbranchonGithubenterthefollowingcommands.

Firstpushallyourworktomaster.Youcanaddasinglefileorallfiles.Thedot(.)indicatesallfilesinthisfolderandbelow.

gitadd<filename>orgitadd.

gitcommit-m"mycommentmessage"

gitpush

Nextruncheckout-btocreateanewbranchtobecreatedwiththenamegh-pages


15

gitcheckout-bgh-pages

Nextrunpush-uorigintoupdateGithubwhichisaremotelocation.Specifiygh-pages:gh-pagestellsgithubthatthebranchisnamedgh-pageslocallyandremotely.Theformatislocal:remote.

gitpush-uorigingh-pages:gh-pages

Commandstocontinueworkongh-pagesbranchIfyouarereturningtoworkoncodeinarepothatyouhaveworkedonbefore,youwillnotneedtoruncheckout-bbecauseyoudon'twanttocreateanewbranch,youjustwanttoaccesstheexistingbranch.Startwithgettingstatus.

gitstatus

Ifthestatusindicatesthatyouarealreadyongh-pages,youdon'thavetodoanything.Ifyou'reonmaster,youcancheckoutgh-pages.Noticewedon'tneedthe-bwhenwearenotcreatinganewgh-pagesbranch.

gitcheckoutgh-pages


16

Thisistheanswerto"HowtousetheVisualStudioCodeTerminal?"

UsingIntegratedTerminalVisualStudioCodeallowyoutoaccessaterminalfromwithintheapplication.Youalsohavetheabilitytosetupdifferentterminalinterfaces.Asdevelopers,weusetheterminaltocommunicatewithGithubandissuecommandstomaintaintherepowereworkingon.

ToopentheintegratedterminalfromthemenuclickonViewIntegratedTerminalfromthemenu.YoucanalsousetheshortcutCtrl-Tick.TheTickislocatedontopleftofthekeyboardbelowtheEscapekey.

Thepicturebelowshowstheterminalopenedatthebottomandacommandforgitstatushasbeenissued.ThisterminalwasopenedonaWindows10workstationwherePowershellitthedefaultterminal.OnaMacthedefaultterminalisbash.


17

Windows:Set'GitBash'asthedefaultIntegrateTerminalThedefaultinterfaceforMacistheOSXbash,whichisworkswellwhencommunicatingwithGithub.ForWindowsusers,itisusefultoconfigureyourdevenvironmenttouseGitBashasthedefaultintegrateterminalinVSCode.

YouwillfirstaccessUserSettingsonWindowsfromtheFilePreferencesSetttingsmenu.


18

Thiswillopenuptwodocumentssidebyside.OntheleftarethedefaultsettingsandontherightaretheUseroverridesettings.ToconfigureWindowstouseGitBash,youmustfirsthaveinstalledGit.GitinstallationwillhaveplacedtheGitBashexecutableinthislocation:C:\ProgramFiles\Git\bin\bash.exe.YouwillcreateanentryinyourUsersettingsoverridetousethisfortheintegratedterminal.Inthescreenontherighttypethefollowing.Ifthereareotherentriesinthescreenontheright,theymustbecommaseparated.Theextrabackslashes(\)youseeareescapecharacters.Aftermakingtheentryyoushouldsaveandclosethefile.TomaketheconfigurationcompletecloseandreopenVSCode.

"terminal.integrated.shell.windows":"C:\\ProgramFiles\\Git\\bin\\bash.exe"

Afteryournewconfigurationisinyourterminalshouldlooklikethepicturebelowwithbashastheterminalinterface.


19


20

Thisistheanswerto"Howtokillaprocessbasedonportnumber?"

KillaprocessbasedonportnumberIfyoucloseoutVSCodewithanactivelive-serverrunning,itmaykeeptheserverprocessaliveandyouwon'tbeabletocreateanewserver,justbyopeninganewVSCodeproject.

Ifyoufindyourselfgettingerrorswhentryingtorunlive-server,youmayneedtokillanoldprocessrunninginthebackground.Thecommandtodothisvarydependingonoperatingsysteminterface.Notethatlive-serverrunonport5500bydefault.

WindowsDOSCommandsnetstat-ano|findstr:5500

taskkill/PID<processID>/F

WindowsPowershellCommandsnetstat-a-b-n-o

Stop-Process<pid>

Youcanalsorunresmon.exetofindtheprocessID.

MacOSXCommandslsof-i:5500

kill-9<pid>

Killaprocessbasedonportnumber

21

Thisistheanswerto"HowtovalidateHTMLandCSS?"

HTMLValidationYoucanuseonlinevalidationorachromeextension.Yourwebpagemustberunningontheinternettouseonlinevalidation.

OnlineHTMLValidationTheURLfortheonlineHTMLValidationis:https://validator.w3.org.

1. CopyyourURLinthebufferandpasteitintothew3cvalidationform.2. ChecktheSourceboxasthiswillallowyoutolookatthesourcecodeassociatedwithanyerrors.3. Submittheformtoseetheerrors.

HTMLValidationwithChromeExtensionGotothechromeappstoreandSearchforhtmlvalidator(withExtensionsselected)orgodirectlytotheextension:HtmlValidator.

YouwillfindthevalidationissueslistedinChromeDevToolswhichyoucangettobyright-clickingandselectingInspect.TherewillbeanewtabnamedHTMLValidatorthatwillshowproblemswithHTML.

Thegifbelowshowananalysisofthegooglesearchpage.

ValidateHTMLandCSS

22

https://validator.w3.org

https://chrome.google.com/webstore/detail/html-validator/mpbelhhnfhfjnaehkcnnaknldmnocglk

CSSValidationThereareonlineandchromeextensionoptionsforCSSValidation.

OnlineCSSValidationCopyURLintobufferandtestitatthislocation:https://jigsaw.w3.org/css-validator/

ThepicturebelowshowsaCSSvalidationofthegooglesearchpage.

ValidateHTMLandCSS

23

https://jigsaw.w3.org/css-validator/

CSSValidationwithChromeExtensionGotothechromeappstoreandSearchforhtmlvalidator(withExtensionsselected)orgodirectlytotheextension:StyleValidator.

ClickontheextensioniconinChrometoseeCSSerrors.

ValidateHTMLandCSS

24

https://chrome.google.com/webstore/detail/style-validator/aaeahhnjkelemfcdmkcpaggdhfaffeod

Thisanswersthequestion"HowtosetupSSHonaclient(localmachine)?"

SSHistheacronymfor"SecureShell".AnSSHconnectionallowsyoutoconnectsonenode(machine)inanetworktoanotherwithouthavetotoenterapassword.Therelationshipbetweenthetwomachineswillfollowaclientservermodel.Themachineonwhichyoutype"ssh<username>@<ipaddress"istheclient(aka"localmachine")anthemachinethatyouaretryingtoconnecttoistheserver(aka"hostmachine").Theserveralwaysmaintainstheinformationabouttheusernameandpassword.Amachinemayactaseitherclientorserverdependingonwhethertheuserisloggedontoitortryingtoconnectotit:iftheuserisalreadyloggedontoit,itistheclient.

InorderforaclienttoconnecttoaserverusingSSH,itmustsetupapublickey/privatekeypair.Thepublickeyandprivatekeyprovidetheencryptionneededforsecureauthenticationandauthorization.Analgorithmcanverifythatagiveprivatekeymatchesagivenpublickey.Boththepublicandprivatekeysarestoredontheclient.Beforetheclientcanconnecttotheserver,theservermustrecordthepublickeyoftheclientinanfilecalledauthorized_keyslocatedinthe.sshdirectoryunderthehomedirectoryoftheuserontheservermachine.WhentheuserissuestheSSHcommandfromtheclientmachinethepublickey(andproofthatithasthematchingprivatekey)issenttotheserver.Ifthereisamatchbetweenthepublickeysenttotheserverandoneofthekeysintheauthorized_keysfile,thenatestismadeontheclienttoseeiftheserveristrusted.Duringsshinitializationthehostsendtheclientahostkey.Theclientchecksthehostkeyagainstentriesintheknown_hostsfile.Ifthehostkeyisnotfoundamessagepopsupaskingtheusertoverifythehost.Onceverifiedthehostkeyisaddedtotheclient'sknown_hostsfile.

ForexampleifIwanttoissuethefollowingcommand:[email protected],thefollowingsetupmustexistonthetheclientandservermachines.

Youcanthinkofauthorized_keysasafilethathelpstheservertrusttheclientandknown_hostsasafilethathelpstheclienttrusttheserver.Thepublickey,authorized_keysandknown_hostsfilesarealltextfilesandthecontentsmaybesafelycopyandpasted.Itisalsopossibletoaddaconfigfiletotheclient.sshdirectoryandtheconfigfile

SetupSSH

25

canbeusedtomapserverstodifferentpublic/privatekeyfilesifneeded.Ingeneral,SSHwilllookinthe.sshdirectoryandtryallkeysifneededwhenattemptedtoauthenticate.

Amachinemaycontainbothandauthorized_keysfileandaknown_hostsfilebecauseitcanbeoperatingintheeitherroleatdifferenttimes.

SettingupSSHonaMacorLinuxClient

Checktoseeifkeyfilesalreadyexistbecauseyoudon'twanttoreplacethemiftheymightalreadybeinuse.

ls-la~/.ssh/

Lookforid_rsa__andid_rsa.pub

Generatethekeyfiles

ssh-keygen

Checkthatthekeyfileshavebeenproperlygenerated

ls-la~/.ssh/

Copythepublickeytothebuffer

cat~/.ssh/id_rsa.pub

SelectcontentsoffilefromscreenandCTRL-ctoputinbuffer

Useatexteditorandpastethekeyintotheauthorized_keysfileontheserveryouwishtoaccess.

SettingupSSHonaWindowsClient

IfyouareusingWindows10,youhave3optionsforcreatingthepublic/privatekeyneededforSSHandrunningSSH.

1. UsegitbashtocreatekeysandrunSSH.Whenyoudownloadgittoyouwindowsmachine,youwillgetthegitbashprogramwhichwillprovideabashinterface.Seethisarticleongithub.com:https://help.github.com/articles/testing-your-ssh-connection/.

2. UsepuTTYgentocreatethepublicandprivatekeys.UsepuTTYtocreateanSSHSessionfromaGUI.SeethisyoutubevideoforanexampleofhowtousepuTTYtoconnecttoaserver.

3. InstallalinuxshellonyourWindows10machine.Thiswillcreateanewfilesystem,soyouneedtokeepthisinmindifyou'redevelopingontheWindowsfilesystem.SeeinstructionsforsettinguptheLinuxShellforWindowsintheWATSLabFAQ.

SetupSSH

26

https://git-scm.com/download/win

https://help.github.com/articles/testing-your-ssh-connection/

https://www.chiark.greenend.org.uk/~sgtatham/putty/latest.html

https://www.youtube.com/watch?v=O3ORQQnOgEc&t=2s

Thisarticleanswersthequestion"HowtoSetupaLinuxShellonWindows10?"

ModifytheWindowsFeaturestoaddLinuxSubsystem.ClickonWindowsbutton,keyinSystem,andchooseSystem(ControlPanel).SearchforWindowsFeatures.Clickon"TurnWindowsfeatureonoroff".

Scrolldownandputacheckmarknextto"WindowsSubsystemforLinux"andclickOK.Thiswillaskyoutorestartyourcomputerandyoushouldrespondyes.

Whenthecomputeristhroughrebooting,gototheWindowsStoreandsearchforUbuntu.Clickthe"Gettheapp"buttonandletitdownloadandinstall.


27

Whenit'sthroughinstallingyoucan"Launch"theapp.Youwillbepromptedtocreateausernameandpassword.Youcanusethesameusernameandpasswordthatyouusedtologintoyourwindowscomputerbutitwillbeinadifferentsubsystemandwilluseadifferenthomedirectory.Toaccessityou'llhavetolaunchtheUbuntuapp.You'llbeabletoaccessfilesinthewindowssubsystembyreferencingthe/mnt/c/foldertogettotherootoftheWindowssubsystem.Whenyou'reintheUbuntushellyoucanusethesecommandstohelpidentifywhoyouarewhoamiandwhereyouarepwd.IfmyusernameisbobinbothwindowsandintheUbuntushell,myUbuntuhomewillbe/home/bobandmyWindowshomewillbe\Users\bob.Whenyou'retheUbuntushellyoucangettoyourlinuxhomeusingcd~andyougettoyourWindowshomeusingcd/mnt/c/Users/bob.

HowToGeekProvidesalotofdocumentationonsettingupandworkingwithalinuxshellonWindows10.Seetheselinksformoreinformation:

Howtotellifyouhavea32bitor64bitmachine:https://www.howtogeek.com/howto/21726/how-do-i-know-if-im-running-32-bit-or-64-bit-windows-answers/

Howtoinstalllinuxshellonawindows10machine:https://www.howtogeek.com/249966/how-to-install-and-use-the-linux-bash-shell-on-windows-10/

Howtoinstallubuntubashonawindows10machine:https://www.howtogeek.com/261449/how-to-install-linux-software-in-windows-10s-ubuntu-bash-shell/

UsingthelinuxterminalCLI(commandlineinterface):https://www.howtogeek.com/140679/beginner-geek-how-to-start-using-the-linux-terminal/


28

https://www.howtogeek.com/howto/21726/how-do-i-know-if-im-running-32-bit-or-64-bit-windows-answers/

https://www.howtogeek.com/249966/how-to-install-and-use-the-linux-bash-shell-on-windows-10/

https://www.howtogeek.com/261449/how-to-install-linux-software-in-windows-10s-ubuntu-bash-shell/

https://www.howtogeek.com/140679/beginner-geek-how-to-start-using-the-linux-terminal/

ThisFAQanswerthequestion"HowtoaddanadminusertoWordpressusingmySQL?"

AddAdminUsertoWordpressusingmySQLSignonthemySQL.DigitalOceanprovidestheadminpasswordtosignonintomySQLhere:/root/.digitalocean_password

Copythepasswordintothebufferandpasteafterexecutingthefollowingcommand:

mysql-uroot-p

Thiswilllogyouintomysqlandyoushouldseethe'mysql>'prompt.

Changetothewordpressdatabasebyexecutingthefollowingcommand:

usewordpress;

Noteyoucanfindalldatabaseswiththefollowingcommand

showdatabases;

andalltableswiththiscommand

showtables;

Verifythatyouareinthewordpressdatabasebyexecutingshowtables;andseeingthe"wp_"tables.

Thenexecutethefollowingcommands.Replacethe"<>"withthedatayouwant.Notethatoncethepasswordisinthedatabaseitwillbeone-wayencryptedwithMD5andyouwon'tbeabletoseeitinplaintext.NotethattheIDcannotalreadyexistsoyoumaywanttoissuesthe(select*from`wordpress`.`wp_users`;

toseewhatthecurrentuserID'sareandpickthenextone)

UsethesameIDvalueinall3queries.ForexampleI'musing'4'inthequeriesbelow.

INSERTINTO`wordpress`.`wp_users`(ÌD`,ùser_login`,ùser_pass`,ùser_nicename`,ùser_email`,ùser_url`,

ùser_registered`,ùser_activation_key`,ùser_status`,`display_name`)VALUES('4','demo',MD5('demo'),'<user

nicename>','[email protected]','http://www.test.com/','2018-04-1700:00:00','','0','<userdisplayname>');

INSERTINTO`wordpress`.`wp_usermeta`(ùmeta_id`,ùser_id`,`meta_key`,`meta_value`)VALUES(NULL,'4',

'wp_capabilities','a:1:{s:13:"administrator";s:1:"1";}');

INSERTINTO`wordpress`.`wp_usermeta`(ùmeta_id`,ùser_id`,`meta_key`,`meta_value`)VALUES(NULL,'4',

'wp_user_level','10’);

AWebReference:http://www.wpbeginner.com/wp-tutorials/how-to-add-an-admin-user-to-the-wordpress-database-via-mysql/

HowtoAddanAdminUsertoWordpressusingmySQL

29

http://www.wpbeginner.com/wp-tutorials/how-to-add-an-admin-user-to-the-wordpress-database-via-mysql/

ThisFAQanswerthequestion"HowtoaddanadminusertoWordpressusingmySQL?"

Wordpress:AdditionalPermissionsIfyounavigateto<urltowordpress>/wp-adminandfindthatyouhaveupdatestoprocess,youshouldbeabletorunthemwiththeclickofabutton.Sometimesthesewillfailduetoinadequatepermissionsgrantedtodirectoriesandfilesthattheupdateprocessneedstodoitsjob.

YoucanviewUnixpermissionsforeachfileanddirectorybyrunningls-la.Theoutputwillresemblewhatisshownbelow:

UnixassignsRead(r),Write(w),andExecute(x)permissionstoeachobjectanddirectoryobjectshavea(d)infrontofthepermissionstring.Therwxaregroupedbyowner,group,other.TherwxstringscanbereplacedbyanOctalvaluethatrepresentsthesumofthepermissionsappliedtoanobject.Seethiswebsite,permissions-calculator,toseehowchangingtheoctalvaluechangesthevalueoftheread,write,executeproperties.

Thechmodcommandallowsyoutochangethepermissionsonanobject.IfIwanttoenableallpermissiononaobjectIcouldissuethecommandchmod777<filename.InordertoallowWordpresstosuccessfullyupdateIusedchmod775onthefollowingdirectoriesandfilesundertheWordpressinstallation.Youshouldcdto/var/www/htmlbeforeyouexecutethesecommands.

chmod775wp-contentchmod775wp-admin/includeschmod775wp-adminchmod775wp-includeschmod775wp-login.phpchmod775wp-activate.phpchmod775wp-signup.phpchmod775wp-comments-post.phpchmod775wp-comments-post.php

Ifyouwantedto"loosen"permissionsoneverything-allfilesanddirectories-underagivendirectorythecommandis:

chmod-R775html


30

http://permissions-calculator.org/decode/0775/

The-Rmeansrecursivelyapplythe775toallfilesanddirectoriesunderthehtmldirectory.Forexample,ifyoufindyoustillcan'tinstallwiththedirectedchmodcommandabove,youcannavigatetothedirectoryabovetheserverrootandthensetallfilesanddirectoriesundertheserverroottoallowtheusertowritewiththefollowingcommands:

cd/var/www

chmod-R775html

Whenaddingpermissionstoanyapplication,suchasWordpress,youalwaywanttogivejustenoughbutnottomuchaccess.YoucanreadabouttheLeastPrivilegePrinciplehereintheHardeningWordpressdocument.


31

https://codex.wordpress.org/Hardening_WordPress

ThisFAQanswerthequestion"HowtogetstartedwithCodenvy?"

Codenvy:GetStartedWhenyousignupforCodenvy,youshouldalreadyhaveagithub.comaccountandyouwanttochooseyourgithubaccounttoLoginwith.

AuthorizingOAuth2:ThisallowsCodenvytoclonefromandpushtoGithub.com

Codenvy:Getstarted

32

Whenyou"push"togetbesuretocheckthe"Pushcommittedchanges"checkbox

DirectionstoenterUsernameandEmail

Codenvy:Getstarted

33

AddingUsernameandEmail

Codenvy:Getstarted

34

ThisFAQanswerthequestion"HowtoaddLetsEncrypttoApacheonDigitalOceanUbuntu16.04?"

Let'sEncrypt:HTTPSonApacheCreateanonrootsudoeruser

"sammy"isjustanexampleofauserIhavecreatedonmyserver.

sudousermod-aGsudosammy

LookUpDigitalOceanDocs

https://www.digitalocean.com/community/tutorials/how-to-secure-apache-with-let-s-encrypt-on-ubuntu-14-04

Step1:ExecutestepstodownloadandupdatetheLet'sEncryptClient

Step2:ExecutestepstosetuptheSSLCertificateonjusttheWordpresssubdomain

IhaveinstalledWordpressonmyserverandprovidedthedomainname"wp",soIwilljustinstallthecertificateonthatsubdomain.

sudocertbot--apache-dwp.beckypeltz.online

Ichosetheredirectoptions.Thismeansiftheusertypeshttp://wp.beckypeltz.online,intothebrowser,I'llredirecttohttps://wp.beckypeltz.online.Seetheimagebelowofthischoice.

LetsEncrypt:HTTPSonApache

35

https://www.digitalocean.com/community/tutorials/how-to-secure-apache-with-let-s-encrypt-on-ubuntu-14-04

http://wp.beckypeltz.online

https://wp.beckypeltz.online

ThisFAQanswersthequestion"HowtoaddBootstrap4toVue.jsproject?"

Bootstrap4andVue.jsThisdocumentdescribestwowaystoaddBootstrap4toaVue.jsproject.ThefirstwayislinkingtoCDN'sintheindex.html.ThesecondwayistouseVue-Bootstrapwhichwillloadintotheappsmain.jslikeacomponent.IfyouusetheCDNmethod,youcanusestandardbootstrapclassnamesprovidedbytheBootstrapdocumentation.

Method1:LinkingtoCDN'sLinkingtoCDN'sinaVue.jsprojectissimilartolinkingtotheminanyHTML5document.You'llfollowthedirectionsontheBootstraphomepagetoaddthemtoyourindex.htmlintherootoftheapplicationcode.ThereisonecsslinkandthreeJavaScriptlinks.Bootstrap4requiresjqueryandpopper.js.

Thecodeinyourindex.htmlwilllooksomethinglikethisafteryouretrievethelinksfromtheBS4homepage.

<!DOCTYPEhtml>

<html>

<head>

<metacharset="utf-8">

<metaname="viewport"content="width=device-width,initial-scale=1.0">

<title>Hikes</title>



<linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"integrity

="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"

crossorigin="anonymous">

<linkrel="icon"type="image/png"href="static/images/backpacker.png">

<linkhref="https://fonts.googleapis.com/css?family=Ubuntu"rel="stylesheet">

<linkrel="stylesheet"href="https://use.fontawesome.com/releases/v5.2.0/css/all.css"integrity="sha384-hWVjf

lwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ"crossorigin="anonymous">

</head>

<body>

<divid="app"></div>

<scriptsrc="https://code.jquery.com/jquery-3.2.1.slim.min.js"integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/

rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"


36

https://getbootstrap.com/docs/4.0/getting-started/introduction/

crossorigin="anonymous"></script>

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"integrity="sha384-ApN

bgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"


<scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"integrity="sha384-JZR6Spejh

4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"


</body>

</html>

ThereisasampleprojectdeployedongithubthatusestheCDNapproach.

Method2:UsingVue-BootstrapTousevue-bootstrap,youstartbyinstallingitfromnpm.TheVue-Bootstrapdocumentationprovidestheseinstallinstructions.You'llenterthisnpmcommandintoyourterminal.Usethesaveoptiontorecordthepackageinyourpackage.jsonfile,sothatfutureusersofyourcodewillpickitupwhentheynpminstall.

npmibootstrap-vue--save

You'llnoticethatthebootstrap-vueinstalladdedbothbootstrapandbootstrap-vuetoyournode-modulesdirectory.

Inyourmain.jsfile,addthefollowingcodetoregisterthefunctionalityprovidedbybootstrapasaVueComponentandmaketheCSSavailable.

importVuefrom'vue'

importBootstrapVuefrom'bootstrap-vue'

import'bootstrap/dist/css/bootstrap.css'

import'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue);

Here'sthecodeinasampleapplicationusingBootstrapVue.NoticethatthereisnoreferencetoBootstraporjqueryintheindex.html.

index.html

<!DOCTYPEhtml>

<html>

<head>

<metacharset="utf-8">

<metaname="viewport"content="width=device-width,initial-scale=1.0">

<title>Hikes</title>

<linkhref="https://fonts.googleapis.com/css?family=Ubuntu"rel="stylesheet">

<linkrel="stylesheet"href="https://use.fontawesome.com/releases/v5.2.0/css/all.css"integrity="sha384-hWVjf

lwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ"crossorigin="anonymous">

</head>

<body>

<divid="app"></div>

</body>

</html>

main.js

//TheVuebuildversiontoloadwiththeìmport`command

//(runtime-onlyorstandalone)hasbeensetinwebpack.base.confwithanalias.


37

https://github.com/rebeccapeltz/hikes

https://bootstrap-vue.js.org/docs/

https://github.com/rebeccapeltz/hikes/tree/npm-bs4

importVuefrom'vue'

importAppfrom'./App'

importrouterfrom'./router'

importBootstrapVuefrom'bootstrap-vue'

import'bootstrap/dist/css/bootstrap.css'

import'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue);

Vue.config.productionTip=false

/*eslint-disableno-new*/

newVue({

el:'#app',

router,

components:{App},

template:'<App/>'

})

NetworkDownloads:WhattoExpectfromeachMethod

Thepicturebelowshowsthenetworkdownloadsforthe1stmethodusingCDNs.Notethatthebootstrapfilescanbeseenasdownloads.

InthepicturebelowwhereVue-Bootstrapisusedonabranchfromthecodeabove,youwon'tseethebootstrapfilesinthenetworkdisplay.


38


39

ThisFAQanswersthequestion"HowtousetheGitCommandLine?"

GitCommandLineThisisnotanallinclusivedocumentonhowtousetheGitCommandLine.ThisaquickreferenceonthecommandtoclonearepofromGithub.comandthenpushchangesbacktoGithub.com.

I'mamusingarepo,wats3010-hello-worldfrommyaccount,rebeccapeltz,onGithub.comtodemonstratethesecommands.

CopythesshgitaddressofyourrepointoyourclipboardThepicturebelowshowsthatIhaveclickedonthegreenbutton(seegreenarrowinpicture)labeledCloneorDownload.Ihavealsoclickedonthelinklabeled"UseSSH"(seebluearrowinthepicture)[email protected]:rebeccapeltz/wats3010-andIhaveclickedonthecopyicontocopythisaddressintomyclipboard(seeyellowarrowinthepicture).

ClonecommandYoucanopenacommandlinewindowinvisualstudiocodeorusingterminal(Mac)orgitbash(WindowswithGitinstalled).Fromthecommandlineyoucannavigatetoyourprojectsdirectory(adirectoryyouhavecreatedunderyourhomedirectory)andthenissuetheclonecommandbytypingcloneandthenpastingthegitaddressontothecommandline.

cd~/projects

[email protected]:rebeccapeltz/wats3010-hello-world.git

Youwillseeoutputshowingthatthecodefromgithub.comisbeingcopieddowntoyourlocalmachine.

PushChangesbacktoGithub

GitCommandLine

40

https://www.github.com

Afteryouhavemadechangestoyourcodeandtestedtoseethattheyareworkingasyouexpect,youwillissuethefollowingcommandsintherootofyourprojecttopushthechangesbacktogithub.Lineswitha#atthestartarecomments.Youonlyexecutethecommandthatstartwithgitbelow.

#optionalchecktoseethefileyouhavechangedtheywillappearinred

gitstatus

#addthefiletothelocalgitrepo-youcannameeachfileoruse.tospecifyallfilesbelowcurrent

#directory

gitadd.

#ifyouissuegitstatusnowthefilesaddedwillbegreen

#committhefilestothedirectoryandprovideamessagedescribingthechanges

gitcommit-m"mychangesforthiscommit"

#ifyouissuegitstatusnowyou'llseeanoticethatyouhavefilestopush

#pushthefilestogithub.comrepo

gitpushoriginmaster

Youmightwanttocommittomemory

gitadd.

gitcommit-m"mychanges"

gitpushoriginmaster

DefaultEditorforGitIfyouforgettoenteramessageforyourcommit,you'llfindthataneditorwillopen.ThisdefaulteditorisVIMwhichmaybeunfamiliartoyou.Forthatreason,itagoodideatoconfigureaneditoryou'refamiliarwith,whichwouldbeVisualStudioCode.Youonlyneedtodothisonce.

ToconfigureVisualstudiocode,makesurethatyouhavethisprograminyourpath.Youcantestthis.

code--help

whichshouldshowyouhelpoutput.Ifit'snotinthepathyoucanaddittothepath

MacInstallCodeinPath

InVSCodeenterCTRL-SHIFT-PtoopentheCommandPalleteandtypeinShellCommand:Install'Code'Commandincommandpath

WindowsInstallCodeinPath

YoucancheckaboxduringinstallationtoaddCodetoWindowspath.Ifyoudidn'tdothisyoucanreruntheinstallation.

GitCommandLine

41

SetVSCodeasthedefaulteditorforGit

Onceyou'veverifiedthatVScodeisinthepath,youcanexecutethefollowingcommandtomakeitthedefaulteditorforGit.

gitconfig--globalcore.editor"code--wait"

YoucantestthatVSCodeisyourdefaulteditorforgitbytypingthefollowingcommand.Thiswillopenyourmachine's~/.gitconfigfileinVSCode.Thisisahiddenfileunderyouruserrootthatcontainsallthegitconfigurationsettings.

gitconfig--global-e

GitCommandLine

42

ThisFAQanswersthequestion"HowtocreateaDigitalOceandropletandprovideSSHconnectiontoGithub?"

OverallProcessProvidinganSSHConnectiontoGithubcanbedoneeitherbeforeoraftercreatingtheDigitalOcean(DO)droplet.Itturnsoutthatit'seasiertosetupanSSHkeyinDObeforecreatingthedropletthantomanuallyaddtheSSHkeytotheDOdropletaftercreatingit.Forthatreason,I'lldescribesettinguptheSSHConnectionbeforedescribingsettingupthedroplet.

ProvideSSHConnectiontoGithubSetupSSHKeysfortheAccount

BecausetheapplicationthatrunstosetupadropletpromptstheuserforanexistingSSHkey(orkeys),itmakessensetosetthesekeysupbeforeattemptingtocreatethedroplet.

1. StartbycreatingSSHKeysonyoulocalmachine(SeetheFAQonInstallGitLocally)2. CopythepublicSSHKeyintoyourbuffercat~/.ssh/id_rsa.pubandselectandcopy.3. OpenDigitalOceaninyourbrowserandnavigatetoAccount|Security.ThenusetheAddSSHKeyformtoadd

thepublickeytoDigitalOcean.

TheneteffectofhavinganSSHKeyuploadedtoyouDOaccountisthatyouwillseeitofferedupwhenyouarecreatingyourdroplet.

UploadSSHKeystoDigitalOceanAccount

HowtoAddSSHKeys

HowtoAddanSSHKeyManuallytoanExistingDroplet

IfyoualreadyhaveadropletandyouwanttoaddanSSHkey,youwillneedtodoitmanually.

1. Onyoulocalmachinecopythekeyintothebuffercat~/.ssh/id_rsa.pubandselectandcopy.2. LaunchtheconsolefromDigitalOceandashboardandloginusingyourDOlogincredentials.3. Usels-la~/.ssh/authorized_keystodetermineoftheauthorizedkeysfilesexists.Ifitdoesn'tcreateitwith

touch~/.ssh/authorized_keys

4. Usenanotoedittheauthorized_keysfile(nanohascopy/paste)andpastetheSSHkeyfromyourlocalmachineintotheauthorizedkeysfileandsave.

5. Setpermissionsontheauthorized_keysfiletomakeitaccessible

chmod-Rgo=~/.ssh

chown-R$USER:$USER~/.ssh


43

https://www.digitalocean.com/docs/droplets/how-to/add-ssh-keys/to-account

https://www.digitalocean.com/docs/droplets/how-to/add-ssh-keys

[Uploadkeysonanexistingdroplet](https://www.digitalocean.com/docs/droplets/how-to/add-ssh-keys/to-existing-droplet

CreateaDigitalOceanDropletFollowthestepforcreatingadropletinthelinkbelow.ChooseanUbuntuimages/1GBmemory/25GBdisk/SanFranciscoforyourdatacenterasit'stheclosesttoSeattle.Youwantthesimplestimagesforyourserveraspossibleanditshouldonlycost$5/month.Youdon'tneedabackuporblockstorage.IfyouuploadedanSSHkeyyoushouldseeitavailablewhenunder"AddSSHkey"andyoushouldselectit.Thenjustclickoncreate.Ifyoumakeamistakejustdeletetheimagefromtheconsoleandtryitagain.Don'tgetattachedtoyourserver,especiallywhenthere'snothingonit.MakenoteoftheIPAddress.

Oncetheimageitcreated,gotoyourlocalmachineandloginusingssh.Here'sanexampleifyourIPaddressis203.0.113.0

[email protected]

IfyourusingaMacyoucandothisfromtheterminalandifyou'reusingWindows,IrecommenddoingitfromGitBash.

Createdroplet

ConnectwithSSH


44

https://www.digitalocean.com/docs/droplets/how-to/add-ssh-keys/to-existing-droplet

https://www.digitalocean.com/docs/droplets/how-to/create/

https://www.digitalocean.com/docs/droplets/how-to/connect-with-ssh/


45

ThisFAQanswersthequestion"HowtomigrateVue2codefromVueCLI2toVueCLI3?"

MigrateVue2CodeFromVueCLI2toVueCLI3Vue.jshasrearchitectedthewaythatyoubuildtheVue.js2code.It'simportanttodiscernthedifferencebetweenthewaythatyoucodeVue.jsandthewaythatyoubuildVue.js.Vue.jsreleasedannewversionoftheCLI(thecommandlineinterfaceforbuildingVue.jscodeintoVanillaJavaScriptandCSS)in2017.Theversioningmovedfrom2to3.

ItisnotnecessarytoupgradetheVue.js2code,butifyouwanttocontinuetodevelopinVue.jsyoushouldupgradetheCLItoversion3.ThereareanumberofimportantarchitecturechangestothewaythataprojectisconfiguredandarchitectedinCLI3.Itisnotnecessarytomodifyyourcodetomakethismove.Thechangesrequiredinvolvedmovingnewconfigurationfilesandchangestothefilestructure(whereyourcodeisstored).

ThisdocumentoutlinesaprocesstomigrateyourcoderepoandaddnewconfigfilessothatitcantakeadvantageoftheCLI3.

UpgradeNodeThefirststepshouldbetomakesureyou'reusingthelatestversionofnodeandnpm.Thiscanbedonebyexecutingtheglobalinstallcommand.Thiscommandwillupdatenodeandnpm.

npminstall-gnode

Ifyou'reonaMac,dependingonhowyouinstallednode,youmadeneedtousethesudocommandforpermissiontodothisupgrade.

sudonpminstall-gnode

Itsalwaysagoodideatocheckyourupgradebycheckingversions.

npm--version

node--version

UpgradeVueCLIToupgradeVueCLIyoucanfollowinstructionsonthispage:https://cli.vuejs.org/guide/installation.html

IfyouhaveVue2CLIinstalledyouneedtouninstallit.

npmuninstallvue-cli-g

ThecommandtoinstallCLI3is

npminstall-g@vue/cli

Thenverifytheversion

vue--version

Asofthiswriting,thecurrentversionis3.3.0,butthereisalotofdevelopmenttakingplacewithVue.jsandthismaynotbetheversionthatyouget.Yourmajorversion(thefirstnumbershouldatleastbea3).


46

https://cli.vuejs.org/guide/installation.html

BuildandDevCLI3providesaproductionanddevbuildjustasCLI2didbutthecommandtorunthedevbuildandserverhaschanged.Torunthedevbuildusethefollowingcommand:

npmrunserve

Toruntheproductionbuild,whichshouldcreaterunnablehtml/css/jsinthedocsdirectory:

npmrunbuild

MigrateCode

BranchExistingCode

Dothemigrateonabranchandthenwhenit'sworkingproperly,mergetotheMasterbranch.Forexample(below),createabranchnamedcli3andcheckitouttoyourlocalmachinetoworkon.

gitcheckout-bcli3

ThenewfilestructurethatCLI3islookingforisshowninthepicturebelow.Yourgoalwillbetomigrateyourfilestructuretothisnewstructure.Noticethattheconfigandbuilddirectoriesaregone.Thenode_modulesislistedin.gitignoresoitthenameappearsfadedoutinVSCode.Therearesomenew.jsfilesusedforconfiguration.


47

Thechangestolookforinthispictureare:

theroutercodeisinarouter.jsfileintherootinsteadofrouter/index.jsthereisanewviewsdirectory-inCLI3thebestpracticeistoputcomponentsreferencedintherouterintotheviewsdirectoryandusethecomponentsdirectoryfornon-viewcomponentsthereisa.gitkeepfileinthecomponentsdirectoryandtheviewsdirectorytheresomenewconfigfiles-thisdocumentwillprovidethecontentsforthesefiles,inparticular.babel.config.js,postcssrc.jsthereacoupleofconfigfilesthatIcreatedspecificallytomakemigrationeasiertoputproductionbuildcodeinthedocsdirectorythatyou'lladdaliases.config.jsandvue.config.jsthepackage.jsonlibrarydependencieshaschangedsignificantlyandyou'llwanttoreplacetheentirecontentofpackage.jsonwithcodeprovidedinthisdocumentthestaticfolderhasbeenrenamedtopublicandtheindex.htmlhasmovedintothepublicfolder

NOTE:It'spossiblethattheconfigcodeprovidedinthisdocumentmaychange.Youcanalwaysgeneratethelatesconfigcodebyrunningthenewprojectcreatecommandtocreateanewprojectthatwillhaveallofthelatestconfigcode.Theprojectcreatecommandwillnotcreatethevue.config.jsorthealiases.config.jsasthoseareusercreated


48

andIcreatedthemtoallowfortheuseofthe@symboltospecifysrcandtomakethebuildcreatedistributablefilesinthedocsfoldersothatwecanhostongithub.io.

TocreateanewprojectinVueCLI3youcanrunthecommandbelowwhichwillcreateaprojectcalledhello-world.Noticethatthekeywordhaschangedfroominittocreate.Youshouldalsopickthedefaultbabel/eslint.

vuecreatehello-world

SeethispageforinstructionsoncreatinganewprojectandnotespecialinstructionsforWindowsusersthatareusingthegitbashterminal:https://cli.vuejs.org/guide/creating-a-project.html#vue-create.

Thepurposedofthesemigrationinstructionsisthatyoushouldn'thavetocreateanewproject-youshouldbeabletomigratethecodebyjustaddingconfigfilesandmodifyingthefilestructure.

MigrationStepsdeleteconfigandbuilddirectories

deletebabel.rc

renamestatictopublic

moveindex.html(andanyotherstaticcontents)intopublic

createanaliases.config.jsfileandloaditwiththecontentsspecifiedinthisdocument

createanbabel.config.jsfileandloaditwiththecontentsspecifiedinthisdocument

createanvue.config.jsfileandloaditwiththecontentsspecifiedinthisdocument

deletedocsdirectoryasitwillberecreatedwhenyourunthebuild

deletepackage-lock.jsonfile-thisfilewillgetautomaticallyrecreatedwhenyourunnpminstall

replacethecontentsofpackage.jsonwiththecodecontentsspecifiedinthisdocument

createarouter.jsfileinthesrcoftheprojectandmovethecontentsofrouter/index.jsintothisfile

createaviewsdirectoryandmoveanyfilesinthecomponentsdirectorythatarereferenceintherouter.jsintotheviewsdirectory

addanempty.gitkeepfiletotheviewsandcomponentsdirectory(thisistokeepthemaroundevenifempty)

updatelinksinrouter.jstopointtofilesintheviewsdirectory

deletenode_moduleandnpminstalltogetnewones

testcodebuildbyrunningnpmrunserve

buildproductioncodeintodocsbyrunningnpmrunbuild

pushbranchtogithubgitpush-set-upstreamorigin<branchname>

youshouldseeyourbranchandmasterwhenyourungitbranch

mergetomasterbycheckingoutmasterlocallyandrunningmerge

gitcheckoutmaster

gitmerge<branchname>


49

https://cli.vuejs.org/guide/creating-a-project.html#vue-create

add/commit/pushmigratedcodetogithubandtestongithub.io

Onceyou'redonemergingyoucandeletethebranch.It'sgoodpracticeforcleanup.You'lldeleteitlocallyandremotely.

Local:gitbranch-d<branchname>

Remote:gitpushorigin--delete<branch-name>

ContentsofConfigFiles

babel.config.js

module.exports={

presets:[

'@vue/app'

]

}

postcssrc.js

module.exports={

"plugins":{

"postcss-import":{},

"postcss-url":{},

//toedittargetbrowsers:use"browserslist"fieldinpackage.json

"autoprefixer":{}

}

}

aliases.config.js

constpath=require('path')

functionresolveSrc(_path){

returnpath.join(__dirname,_path)

}

constaliases={

'@':'src',

'@src':'src'

}

module.exports={

webpack:{},

jest:{}

}

for(constaliasinaliases){

module.exports.webpack[alias]=resolveSrc(aliases[alias])

module.exports.jest['^'+alias+'/(.*)$']=

'<rootDir>/'+aliases[alias]+'/$1'

}

vue.config.js

constpath=require('path');

module.exports={

configureWebpack:{

resolve:{

//allowfor@or@srcaliasforsrc

alias:require('./aliases.config').webpack


50

}

},

chainWebpack:config=>{

//turnoffelintforwebpacktranspile

config.module.rules.delete('eslint');

},

runtimeCompiler:true,

css:{

sourceMap:true

},

publicPath:'',

//buildfordocsfoldertoenablegh-pageshosting

outputDir:'./docs/',

assetsDir:'assets'

}

package.json

{

"name":"hello-world",

"version":"0.1.0",

"private":true,

"scripts":{

"serve":"vue-cli-serviceserve",

"build":"vue-cli-servicebuild",

"lint":"vue-cli-servicelint"

},

"dependencies":{

"axios":"^0.18.0",

"vue":"^2.5.21",

"vue-router":"^3.0.2",

"vue2-animate":"^2.1.0"

},

"devDependencies":{

"@vue/cli-plugin-babel":"^3.3.0",

"@vue/cli-plugin-eslint":"^3.3.0",

"@vue/cli-service":"^3.3.0",

"babel-eslint":"^10.0.1",

"eslint":"^5.8.0",

"eslint-plugin-vue":"^5.0.0",

"vue-template-compiler":"^2.5.21"

},

"eslintConfig":{

"root":true,

"env":{

"node":true

},

"extends":[

"plugin:vue/essential",

"eslint:recommended"

],

"rules":{},

"parserOptions":{

"parser":"babel-eslint"

}

},

"postcss":{

"plugins":{

"autoprefixer":{}

}

},

"browserslist":[

">1%",

"last2versions",

"notie<=8"

]

}


51


52

Documents

SUMMARY - GitHub Pages · If you are using Windows and want to use "Git Bash" in for the VS Code terminal add the following to your User Settings: "terminal.integrated.shell.windows":