Configuring WebStorm

Important Links

These are important links are mentioned in the video:

WebStorm's New User Interface

Your version of WebStorm may look different. The Classic UI (user interface) uses clickable words. The New UI uses clickable icons. The above video was recorded using the Classic UI with words instead of icons. You can do this step of the prework using either user interface. Here's a link to instructions to switch between the two user interfaces and explanations of the differences: https://www.jetbrains.com/help/webstorm/new-ui.html

Steps for Creating a New Project

Create Project on Github

  1. Go to github and click the green button to create a New Repository.
  2. Name your repository (usually the same as your project name).
  3. Check the box to create a README file.
  4. Select the Apache License 2.0.
  5. Click the button at the bottom to create the repository.
  6. Click the button to create a new file.
  7. Name the file .gitignore
  8. Put inside the file
    .DS_Store
    .idea
  9. Enter a commit message "created .gitignore".
  10. Click the create file button.

Import Repository to WebStorm

Once the repository has been created, it can be imported to WebStorm. To import it:

  1. Copy the repository's SSH URL by selecting the SSH URL from SSH Clone URL in the right nav of the repository. If this reads HTTPS Clone URL, change it to SSH before copying by clicking the SSH link.
  2. Select Checkout from Version Control and select the git option (NOT the GitHub option) as seen in Figure 1.
  3. Paste the repository URL into the Git Repository URL, as shown in Figure 2.
  4. Click Test to ensure the URL is correct.
  5. Click Clone.
Figure 1: Import Existing GitHub Project
Figure 2: Clone GitHub Project

Create a Deployment

A deployment is a place on the web server where the project files will be deployed and tested. This directory will be synchronized with the web server. You will make a new deployment for each project. To deploy it:

  1. Tools → Deployment → Configuration
  2. Click the '+' symbol
  3. Select SFTP and name the deployment after the server.
  4. For "New server name:" enter the project name (the same as you named it on github).
  5. Enter the following values for the next screen. Replace username and prework with your username and project name, respectively:
    1. Visible only for this project: checked
    2. Type: SFTP
    3. SSH Configuration: username@ddc-web-student.cnm.edu
    4. Root Path: /home/username/public_html/prework
    5. Web server root URL: https://ddc-web-student.cnm.edu/~username/prework
  6. A full example of this screen is in Figure 3.
  7. Click the Mappings tab.
  8. Enter a slash (/) in the deployment path.
  9. Click OK.
  10. Connect to SSH using the Terminal (Linux/MacOS) or PuTTY (Windows)
  11. Enter the following commands into the SSH session:
    1. cd public_html
    2. mkdir prework
    3. exit
Figure 2: SSH Settings
Figure 4: SFTP Server Settings

Assignment: Slack us your info

Once you are finished with this info, you can complete the assignment at the end of Phase I by sending the instructor team a Slack message with your URLs. Check out the Prework Phase I page for details.