One place for hosting & domains

      Workshop

      How To Create PHP Development Environments with Docker Compose: A DigitalOcean Workshop Kit


      How to Create PHP Development Environments with Docker Compose Workshop Kit Materials

      This workshop kit is designed to help a technical audience become familiar with Docker Compose and learn to set up a working development environment for a Laravel application using containers.

      The aim is to provide a complete set of resources for a speaker to host an event and deliver an introductory talk on Docker Compose in the context of PHP development environments. It includes:

      • Slides and speaker notes including commands for running an optional live demo. This talk runs for roughly 40 minutes.
      • A GitHub repository containing the demo app code and the additional files necessary to get a PHP development environment up and running with Docker and Docker Compose.
      • This tutorial, which walks a user through getting the Travellist demo Laravel application running on containers with Docker Compose.

      This guide is intended to supplement the talk demo with additional detail and elucidation.

      Introduction

      This tutorial, designed to accompany the slides and speaker notes for the How To Create PHP Development Environments with Docker Compose Slide Deck, will show you how to get a demo Laravel application up and running with Docker and Docker Compose, using the setup that we discuss in greater detail in our guide on How To Set Up Laravel with Docker Compose on Ubuntu 20.04.

      Note: This material is intended to demonstrate how to use Docker Compose to create PHP development environments. Although our demo consists of a Laravel application running on a LEMP server, readers are encouraged to modify and adapt the included setup to suit their own needs.

      Prerequisites

      To follow this tutorial, you will need:

      Step 1 — Download the Demo Application

      To get started, download release tutorial-4.0.3 of the Travellist Laravel Demo application, which contains the application files and the Docker Compose setup that are used in this workshop kit.

      • curl -L https://github.com/do-community/travellist-laravel-demo/archive/tutorial-4.0.3.zip --output travellist.zip

      Next, install the unzip utility in case that is not yet installed on your local machine or development server:

      Unzip the package and move into the newly created directory:

      • unzip travellist.zip
      • cd travellist-laravel-demo-tutorial-4.0.3

      Now, you can run an ls command to inspect the contents of the cloned repository:

      • ls -l --group-directories-first

      You’ll receive output like this:

      ansible-laravel-demo

      total 256
      drwxrwxr-x 6 sammy sammy   4096 mei 14 16:16 app
      drwxrwxr-x 3 sammy sammy   4096 mei 14 16:16 bootstrap
      drwxrwxr-x 2 sammy sammy   4096 mei 14 16:16 config
      drwxrwxr-x 5 sammy sammy   4096 mei 14 16:16 database
      drwxrwxr-x 4 sammy sammy   4096 mei 14 16:16 docker-compose
      drwxrwxr-x 5 sammy sammy   4096 mei 14 16:16 public
      drwxrwxr-x 6 sammy sammy   4096 mei 14 16:16 resources
      drwxrwxr-x 2 sammy sammy   4096 mei 14 16:16 routes
      drwxrwxr-x 5 sammy sammy   4096 mei 14 16:16 storage
      drwxrwxr-x 4 sammy sammy   4096 mei 14 16:16 tests
      -rwxr-xr-x 1 sammy sammy   1686 mei 14 16:16 artisan
      -rw-rw-r-- 1 sammy sammy   1501 mei 14 16:16 composer.json
      -rw-rw-r-- 1 sammy sammy 181665 mei 14 16:16 composer.lock
      -rw-rw-r-- 1 sammy sammy   1016 mei 14 16:16 docker-compose.yml
      -rw-rw-r-- 1 sammy sammy    737 mei 14 16:16 Dockerfile
      -rw-rw-r-- 1 sammy sammy   1013 mei 14 16:16 package.json
      -rw-rw-r-- 1 sammy sammy   1405 mei 14 16:16 phpunit.xml
      -rw-rw-r-- 1 sammy sammy    814 mei 14 16:16 readme.md
      -rw-rw-r-- 1 sammy sammy    563 mei 14 16:16 server.php
      -rw-rw-r-- 1 sammy sammy    538 mei 14 16:16 webpack.mix.js
      

      Here are the relevant directories and files for the Docker Compose setup we’re using:

      • docker-compose/ — contains files used to set up the containerized environment, such as the Nginx configuration file and the application’s MySQL dump.
      • docker-compose.yml — here, we define all services we’ll need: app, web, and db. Shared volumes and networks are also set up here.
      • Dockerfile — this defines a custom application image based on php-fpm. While the web and db services are based on default images, the app service requires additional setup steps, that’s why we are creating a custom image for this service container.

      All remaining files are part of the application.

      Step 2 — Set Up the Application’s .env File

      You’ll now create a new .env file using the included .env.example file as base. Because Laravel uses a dot env file that is also supported by Docker Compose, the values set here will be available at build time when you bring your environment up, and will be used to set up the database service container.

      For reference, this is what the included .env file looks like. Because these settings are being applied to an isolated development environment, there is no need to change database credentials in this file, but you are free to do so if you would like.

      .env

      APP_NAME=Travellist
      APP_ENV=dev
      APP_KEY=
      APP_DEBUG=true
      APP_URL=http://localhost:8000
      
      LOG_CHANNEL=stack
      
      DB_CONNECTION=mysql
      DB_HOST=db
      DB_PORT=3306
      DB_DATABASE=travellist
      DB_USERNAME=travellist_user
      DB_PASSWORD=password
      
      BROADCAST_DRIVER=log
      CACHE_DRIVER=file
      QUEUE_CONNECTION=sync
      SESSION_DRIVER=cookie
      SESSION_LIFETIME=120
      
      REDIS_HOST=127.0.0.1
      REDIS_PASSWORD=null
      REDIS_PORT=6379
      
      MAIL_DRIVER=smtp
      MAIL_HOST=smtp.mailtrap.io
      MAIL_PORT=2525
      MAIL_USERNAME=null
      MAIL_PASSWORD=null
      MAIL_ENCRYPTION=null
      
      AWS_ACCESS_KEY_ID=
      AWS_SECRET_ACCESS_KEY=
      AWS_DEFAULT_REGION=us-east-1
      AWS_BUCKET=
      
      PUSHER_APP_ID=
      PUSHER_APP_KEY=
      PUSHER_APP_SECRET=
      PUSHER_APP_CLUSTER=mt1
      
      MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
      MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
      

      Once you are satisfied with your .env file, you should move onto running Docker Compose, as outlined in the next session.

      Step 3 — Run Docker Compose

      Once you have your .env file in place, you can bring your environment up with:

      This will execute Docker Compose in detached mode, which means it will run in the background. This command may take a few moments to run when you execute it for the first time, since it will download and build the app service image.

      Output

      Creating network "travellist-laravel-demo-tutorial-403_travellist" with driver "bridge" Creating travellist-db ... done Creating travellist-app ... done Creating travellist-nginx ... done

      To verify the status of your services, you can run:

      You’ll receive output like this:

      Output

      Name Command State Ports -------------------------------------------------------------------------------- travellist-app docker-php-entrypoint php-fpm Up 9000/tcp travellist-db docker-entrypoint.sh mysqld Up 3306/tcp, 33060/tcp travellist-nginx /docker-entrypoint.sh ngin ... Up 0.0.0.0:8000->80/tcp

      Your containerized PHP development environment is up and running, but there are still a couple steps required so that you can access the application from your browser. We’ll set everything up in the next and final step.

      Step 4 — Finish Setting Up the Application

      Now that you have a development environment able to handle PHP scripts, you can install the application dependencies using composer. To execute commands inside containers, you can use the docker-compose exec command, followed by the name of the service container and the command you want to execute.

      The following command will run composer install on the app service container, where PHP is installed:

      • docker-compose exec app composer install

      After the dependencies are installed, you’ll need to generate a unique application key using the artisan Laravel command line tool:

      • docker-compose exec app php artisan key:generate

      Output

      Application key set successfully.

      You can now access the demo application by pointing your browser to localhost if you are running this setup on a local machine, or your remote server’s domain name or IP address if you are running this on a development server. The server expects connections on port 8000, so be sure to include :8000 in the address:

      http://localhost:8000
      

      You will see a page like this:

      Laravel Travellist Demo

      With this page displaying on your browser you have successfully set up your application.

      Docker Compose Quick Reference

      In this section, you’ll find a brief reference of the main Docker Compose commands used to manage a containerized environment. These should be executed from the same directory where you have set up your docker-compose.yml file.

      build

      Builds any custom images associated with the current docker-compose.yml file, without bringing the environment up.

      up

      Brings the environment up. Custom images will be automatically built when not cached, and when you make changes to the referenced Dockerfile.

      ps

      Similar to docker ps, shows the status of active services associated with the current docker-compose.yml file.

      exec

      Executes a command on the specified service.

      • docker-compose exec service-name command

      stop

      Stops the active environment, while keeping any allocated resources: containers, volumes, and networks.

      start

      Brings up an environment that was previously stopped with the stop command.

      logs

      Shows latest logs from active services.

      top

      Shows processes running on the specified service.

      docker-compose top service-name
      

      down

      Brings the containerized environment down along with any allocated resources.

      docker-compose down
      

      For more information about each available Docker Compose command, please refer to their official documentation.

      Conclusion

      This guide complements the How To Create PHP Development Environments with Docker Compose Workshop Kit’s slides and speaker notes, and is accompanied by a demo GitHub repository containing all necessary files to follow up with the demo component of this workshop.

      For a more in-depth guide on containerized PHP environments with Docker Compose, please refer to our tutorial on How To Install and Set Up Laravel with Docker Compose on Ubuntu 20.04.



      Source link

      How To Build A Website With CSS: A DigitalOcean Workshop Kit


      How To Build a Website With CSS Workshop Kit Materials

      This workshop kit is designed to help an instructor guide an audience through the steps of recreating and personalizing a CSS website from start to finish. The material in this kit can be covered in two ninety-minute sessions or in one three-hour session, though some groups may need less time. Participants will finish with an understanding of CSS and a personal website ready to deploy to the cloud.

      Workshop attendees should have some familiarity with HTML. If attendees are not familiar with HTML, they can follow our series How To Build a Website With HTML before starting this workshop.

      The aim of this workshop kit is to provide a complete set of resources for a speaker to host a workshop on building a website with CSS. It includes:

      • Slides and speaker notes that lead participants through setting up their website project, hands-on exercises, and conceptual explanations.
      • An online tutorial series with copyable code snippets, conceptual overviews, and additional CSS lessons and tips for further customizing the project website.
      • A demonstration website to show participants what they will build by the end of the workshop.

      This workshop kit page is intended to help instructors prepare for the workshop and provide a starting point for students. Instructors should point students to this page so they can have access to the slides (which contain useful links), the supplementary tutorial series, and the demonstration website.

      If desired, students can prepare for the workshop by reading the introduction below and making sure that they have the prerequisites ready before the workshop starts.

      Participants who wish to learn how they can publish their site for free on DigitalOcean can visit our tutorial How To Deploy a Static Website to the Cloud With DigitalOcean App Platform.

      Introduction

      This project-based tutorial series will introduce you to Cascading Style Sheets (CSS), a stylesheet language used to control the presentation of websites, by building a personal website using our demonstration site as a model. Though our demonstration site features Sammy the Shark, you can switch out Sammy’s information with your own if you wish to personalize your site.

      Gif of CSS demonstration site

      Alongside HTML and JavaScript, CSS is one of the core technologies of the World Wide Web. If you have some understanding of HTML and are looking to grow your front-end development skills, learning CSS is a great next step.

      The first half of this tutorial series will introduce CSS through hands-on exercises and the second half of the tutorial series will provide steps for recreating the demonstration website. If you want to start building the demonstration website right away, you can start with the tutorial How To Set Up Your CSS and HTML Website Project and proceed from there.

      By the end of this CSS tutorial series, you will have files ready for deploying a website to the cloud, as well as an understanding of how to continue modifying the site’s design with HTML and CSS. You will also have a foundation for learning additional front-end web development skills (such as JavaScript) and frameworks (like Tailwind).

      Prerequisites

      • A code editor like Visual Studio Code or Atom. This series will use Visual Studio Code as our default code editor but you may use any code editor you like. Certain instructions may need to be slightly modified if you use a different editor.

      • A web browser like Firefox or Chrome. This tutorial series will use Firefox as our default browser but you may use any browser you like. Certain instructions may need to be slightly modified if you use a different web browser.

      • Two different profile photos, images, or avatars for personalizing your site (optional).

      • Familiarity with HTML. If you aren’t familiar with HTML or would like a refresher, you can follow the first ten tutorials of our series How To Build a Website With HTML before starting this series.

      Once you have your prerequisites ready, you will be ready to begin the workshop. Follow along with the speaker slides and the online tutorial series for copyable code snippets, conceptual overviews, and additional HTML lessons and tips for further customizing your project website.



      Source link

      Hacktoberfest Workshop Kit: How to Submit Your First Pull Request on Github


      How To Submit Your First Pull Request on GitHub Workshop Kit Materials

      This workshop kit is designed to help an instructor guide an audience without a background in version control or contributing to open source projects through the steps of submitting a pull request from start to finish in roughly thirty minutes. Attendees will finish the workshop with an understanding of version control, open source, Git, and GitHub.

      No prior coding experience is assumed on the part of the audience. Instructors without experience in open source, Git, or GitHub should be able to teach the course after reviewing the material first.

      The aim of this workshop kit is to provide a complete set of resources for a speaker to host a workshop about version control and contributing to open source projects. It includes:

      • Slides and speaker notes that lead participants through setting up their website project, hands-on exercises, and conceptual explanations.
      • A video with a live coding walkthrough of submitting a pull request, tips, and conceptual information about version control and contributing to open source projects.
      • A demonstration repo to allow participants to contribute to an open source project as they follow along in the workshop.

      This workshop kit page is intended to help instructors prepare for the workshop and provide a starting point for learners. Instructors should point learners to this page so they can have access to the slides (which contain useful links).

      If desired, learners can prepare for the workshop by reading the introduction below and making sure that they have the prerequisites ready before the workshop starts.

      If you are interested in participating in this year’s Hacktoberfest, this workshop is a great place to start! This project-based workshop will introduce you to open source, version control, Git, and GitHub using the Cloud Haiku repository as a model. Once you learn the fundamentals, you will know how to contribute to open source projects and submit a pull request on GitHub. No prior coding experience is necessary to follow along in the workshop.

      When software developers work on a project together, oftentimes they’ll need to work on the same code base. While they’re working, each developer needs to know about what changes the others made to the code, so as not to duplicate work or write code over what has already been done. Git, a version control system used to manage developer projects of all sizes, was created in 2005 by Linus Torvalds, the creator of Linux, to help developers contribute to code and share code revisions in a way that was fast, efficient, and inexpensive. Git creates code repositories to help developers edit, share, and publish code for all. GitHub is a cloud-based Git repository hosting service that allows developers to take code that they’ve written on their local machines and share it with the world.

      With Git and GitHub, developers from all over the world collaborate on all sorts of projects — many of the websites you visit regularly are maintained using GitHub. Knowing how to use Git and GitHub, and learning how to contribute to open source projects will provide new developers with a strong start in gaining the skills they need to join the software engineering community at large.

      In this workshop, we’ll introduce you to Git and GitHub, the version control system that Hacktoberfest uses to track your progress, and the repository hosting service that shares projects to collaborate on. By the end of this tutorial, you’ll be ready to submit your first pull request and will be well on your way to participating in Hacktoberfest!

      To participate as a workshop leader or learner, you will need the following:

      • A code editor. In this workshop, we’ll be using Visual Studio Code, which you can download for free for Mac, Windows, or Linux.
      • A web browser. In this workshop, we’ll be using Google Chrome as our default browser, which you can also download for free for Mac, Windows, or Linux.
      • A GitHub account. In this workshop, we’ll make a contribution to an open source repo on GitHub. You can sign up for a free account using your default browser.

      Once you have your prerequisites ready, you will be ready to begin the workshop. Refer to the speaker slides for helpful links after the workshop or watch the How to Submit Your First Pull Request video on the Hacktoberfest resources page to review.



      Source link