Hoe een lokale ontwikkelingsomgeving in te stellen

Sep 12, 2025
Procedures
Set up a local development environment
(Beeldkrediet: toekomst)

Met een lokale ontwikkelingsomgeving kunt u uw eigen machine gebruiken om uw website uit te voeren, in plaats van een door een web hosting bedrijf. U kunt de installatie aanpassen zonder u zorgen te maken dat het uw live-site zal beïnvloeden, evenals de ontwikkeling en test-site-ontwikkeling voordat u uw site uploadt. Het risico nemen bij het bouwen van iets, maakt het ontwikkelingsproces veel minder stressvol.

Een ander voordeel van lokaal werken is dat u niet op internet hoeft te zijn. Als je langzame wifi hebt, graag in de tuin werkt of reist, is het niet nodig om de hele tijd naar een WiFi-signaal te zoeken.

De tijd besteed aan FTPING voor een staging-site en wachtend op uw site om te vernieuwen, voegt u echt bij een dag van ontwikkeling. Een lokale omgeving laat u zich concentreren op code en de leuke bits van het bouwen van websites.

Deze tutorial gaat ervan uit dat je op een Mac bent, en de tutorial om aan de slag met Valet richt zich hierop. Voor een pc-alternatief, probeer Homestead ​

Een basiskennis van terminal is goed, hoewel je zou moeten kunnen volgen, omdat de opdrachten allemaal redelijk eenvoudig zijn. Ze zijn voornamelijk om de vereiste componenten die worden geïnstalleerd en uitgevoerd.

Na het voltooien van deze tutorial, hebt u PHP, Homebrew en Componist op uw machine ingesteld, geïnstalleerd valet en geleerd hoe u lokale sites kunt opzetten.

Download de bestanden voor deze tutorial.

  • 5 manieren om uw websites en apps te versnellen

01. Installeer Homebrew

Set up a local development environment: Install Homebrew

Begin met het installeren van homebrew van de terminal (Afbeelding Credit: Sush Kelly)

Eerste stap hier is om Homebrew te installeren. Typ de volgende opdracht in uw terminal. 

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

02. Installeer PHP

Set up a local development environment: Install PHP

Zorg ervoor dat uw PHP versie 7 is (Afbeelding Credit: Sush Kelly)

Vervolgens moeten we installeren / upgraden naar PHP7, dus controleer het met behulp van PHP-V. Als u moet installeren, kunt u typen: 

brew install homebrew/php/php70

Als u nu uw terminalvenster opnieuw opstart en PHP typt -V Nogmaals, het zou v7 moeten worden geïnstalleerd.

03. Installeer de componist

U moet componist downloaden en vervolgens in een map plaatsen die deel uitmaakt van uw pad. 

 PHP -R "Kopiëren ('https://getcomposer.org/installer', 'Composer-Setup.php');"
php -r "if (hash_file ( 'SHA384', 'composer-setup.php') === '48e3236262b34d30969dca3c37281b3b4bbe3221bda826ac6a9a62d6444cdb0dcd0615698a5cbe587c3f0fe57a54d8f5') {echo 'Installer geverifieerd';} else {echo 'Installer corrupt'; unlink ( 'composer-setup. PHP ');} echo php_eol; "
PHP Composer-Setup.php
PHP -R "ontkoppelen ('Composer-Setup.php');"

04. Ga naar je pad

Set up a local development environment: Move to your PATH

Zet componist op je pad (Afbeelding Credit: Sush Kelly)

Verplaats nu componist naar een directory op uw pad. Eenmaal gedaan, kunt u uw toegang controleren door te typen componist-v ​ 

 MV Composer.Phar / USR / LOKALE / BIN / COMPOSER

05. Controleer je pad

Als u typt echo $ pad , je zult zien wat het bevat. Als dit niet het geval is, typt u het volgende om deze toe te voegen. 

 Exporteerpad = $ pad: ~ / .composer / leverancier / bak

06. Vereist wereldwijd

Nu hebben we de stukken geïnstalleerd, we kunnen doorgaan met het installeren van valet. Eerste. Laten we kijken Niets gebruikt poort 80. Typ het volgende en als het niets terugkomt, zijn we goed om te gaan. 

 Netstat -an | grep "\ .80" | grep luistert

07. Installeer de valet

We gebruiken componist om het valet-pakket voor ons te installeren, en dan kunnen we rennen valet installatie ​ 

 Composerglobal vereist Laravel / Valet
valet install

08. Park / Unpark Mappen

Maak een map voor uw ontwikkelingssites en vertel de valet om ze te dienen. Merk op dat mappen binnen dit kunnen worden toegankelijk als subdomeinen. 

 # Ga naar uw projecten Directory
CD ~ / Projecten / Valet /
Valet Park

09. Vergeet mappen

Op een vergelijkbare manier om te parkeren, als u niet langer een map wilt om via Valet te dienen, gebruik dan gewoon de opdracht Vergeet vanuit de map. 

 Met spaties //
Valet vergeet

10. Link / Unlink-mappen

U kunt ook koppelen aan directory's. Hiermee kunt u de naam die u gebruikt kiest. 

 CD ~ / projecten / valet / subproject /
# Link de subproject Directory om het toegankelijk te maken bij Hyperlink "http://subproject.dev" \ HHTTP: //SUBPROJECT.DEV
valet link subproject

11. Deel uw site met de wereld

U kunt uw lokale dev-URL delen met de buitenwereld. Typ in de map van uw project valet share En het zal een URL maken die u kunt gebruiken.

12. Een database gebruiken

U moet uw database van keuze installeren - voor WordPress kunnen we doorgaan en MySQL installeren. 

 BREW INSTALLEREN MYSQL

13. Kies een databasetool

Met een ingestelde database is een hulpmiddel voor import en exportgegevens nuttig, omdat we geen phpmyadmin of vergelijkbaar met valet hebben, omdat het zo licht is.

14. Download Sequel Pro

Set up a local development environment: Download Sequel Pro

Volgorde Pro is een rechtlijnige databasetool (Afbeelding Credit: Sequel Pro)

We gebruiken Volgorde Pro, omdat het een eenvoudige interface biedt. Jij kan download het hier ​

15. Sluit de database aan

Gebruik de standaardinstellingen van MySQL, voeg de volgende gegevens toe en test uw verbinding. 

 Host: 127.0.0.1
Gebruikersnaam: root
Wachtwoord: (blijf leeg)

16. Stel een WordPress-site in

Set up a local development environment: Set up a WordPress site

Installeer de WordPress-kern in uw valetmap (Afbeelding Credit: Sush Kelly)

Met alles nu op zijn plaats, zet u een WordPress-site in. Maak een nieuwe map in uw valetmap en installeer de WordPress-kern.

17. Voeg een database toe

Set up a local development environment: Add a database

Maak een database in Sequel Pro (Afbeelding Credit: Sush Kelly)

Maak in Sequel Pro een nieuwe database met dezelfde naam als de map die u hebt gemaakt. Update de wp-config bestand om bij te passen.

18. Test het is allemaal aan het werk

Set up a local development environment: Test it's all working

Ga naar de browser en controleer het werkt (Afbeelding Credit: Sush Kelly)

Nu als u uw browser opent, en navigeert naar (uw map) .test U zou het scherm WordPress-installatie moeten zien. Volg dit door normaal.

19. Verder nemen

Valet is niet alleen voor het uitvoeren van WordPress Installaties op, het is eigenlijk oorspronkelijk gemaakt voor Laravel-ontwikkeling. Of u nu iets op maat brengt in PHP of met behulp van een raamwerk, u kunt eenvoudig een nieuwe site maken door er een nieuwe map voor te maken in uw rootmap.

Generate CSS – the conference for web designers: 26 September, Rich Mix, Shoreditch, London

(Beeldkrediet: toekomst)

Doe mee op 26 september voor Genereer CSS , een op maat gemaakte conferentie voor webontwerpers die u door Creative Bloq, Net en Web Designer heeft gebracht. Bespaar £ 50 met een vroege vogelticket wanneer u vóór 15 augustus 2019 boekt.

Dit artikel is oorspronkelijk gepubliceerd in kwestie 287 van Creative Web Design Magazine Webdesigner ​ Koop hier nummer 287 of Abonneer u hier op Web Designer ​

Gerelateerde artikelen:

  • 40 Briljante WordPress-tutorials
  • De beste WordPress Hosting-services in 2019
  • 4 verschillende manieren om een ​​website-mockup te maken

Procedures - Meest populaire artikelen

Is uw Apple iCloud-opslag vol? Hier is hoe ruimte vrij te maken

Procedures Sep 12, 2025

(Afbeelding Credit: Apple) De iCloud-service van Apple is een van de Beste cloud-opslag Producten rond..

Hoe een laag in Photoshop te draaien: een volledige gids

Procedures Sep 12, 2025

Dubbel zien? Deze afbeelding is omgedraaid en gemengd met het origineel (Beeldkrediet: toekomst) Deze tut..

Hoe schaal te bereiken in uw schilderijen

Procedures Sep 12, 2025

In deze tutorial zullen we een aantal basisprincipes overgaan die het idee van grote schaal in je eigen stukken zullen communiceren. Ik gebruik potloden en oliën voor deze tutorial, maar je ..

Een app-pictogram maken in Illustrator

Procedures Sep 12, 2025

Pagina 1 van 2: Hoe een app-pictogram in Illustrator te maken: Stappen 01-11 Hoe een app-pictogram in Illustrator te maken: Stappen 01-..

5 dingen die je nodig hebt voor olieverfschilderij

Procedures Sep 12, 2025

Er is een ongegronde mystiek rond olieverfschilderij die enkele artiesten heeft uitgeschakeld om ze te verkennen. Als u het recht..

Ontwerpen van responsieve en apparaat-agnostische vormen

Procedures Sep 12, 2025

Of het nu gaat om een ​​aanmeldingsstroom of een multi-view-stappen, formulieren zijn een van de belangrijkste componenten va..

Uw Web Design Agency noemen

Procedures Sep 12, 2025

Het krijgen van de juiste naam voor uw bureau is niet eenvoudig; Veel mensen vallen in de val om hun bedrijf zoiets te bellen als..

Maak game-ready texturen met behulp van substantie schilder

Procedures Sep 12, 2025

Het afgelopen jaar is een game-wisselaar voor de videogamesindustrie en voor Amerikaanse kunstenaars geluk hebben genoeg om de ko..

Categorieën