WSL2 - Setup DEV.to with Linux but on Windows!
Hey Everyone! In this post, I will be outlining how you can run the DEV Community website on your windows machine with all your dependencies installed to Linux. Installation - DEV Docs lists a variety of methods you can use to do the same, and we will be following the Linux Guide with minor modifications.
WSL was the first time where I was able to work with a Linux environment. Since then, the idea of running Windows and Linux together has always been fascinating to me. I have been dabbling with dual-boot systems of Windows and Manjaro, but it does keep breaking time to time leading me to setup Manjaro again. With the introduction of WSL2 to Windows Stable with version 2004, I was excited to try setup DEV again on Windows. WSL2 brings a lot of improvements over WSL1, including better support for applications, and you can read more about them in this VS Code Blog from when WSL2 was in beta.
Before we start, if you are new to
Windows Subsystem For Linux, I recommend following the Install Windows Subsystem for Linux (WSL) on Windows 10 documentation on how to install it. After setting up WSL2 as the default version, download the Ubuntu 18.04 LTS distribution.
Visual Studio Code is an open-source code editor by Microsoft that has a ton of features. One of its extensions allows a developer to Remote into the WSL environment and directly develop over there! I recommend installing the Visual Studio Code application with Remote development in WSL extension if you aren't comfortable with terminal-based editors.
After completing the initial setup, we move on to another bunch of prerequisites, the repository prerequisites!
Installing the DEV community's prerequisites
Ruby & rbenv
- Rbenv is a nifty tool that allows developers to set up a Ruby environment easily. Grab a quick note of the Ruby Version listed in the badge of DEV's README.md file before you begin.
- Install Ruby's dependencies with the following commands.
sudo apt-get updatesudo apt-get install git-core curl zlib1g-dev build-essential libssl-dev libreadline-dev libyaml-dev libsqlite3-dev sqlite3 libxml2-dev libxslt1-dev libcurl4-openssl-dev software-properties-common libffi-dev
- Clone rbenv and Ruby with the following set of commands, replace
*.*.*in the second-last and third-last lines with the ruby version you noted earlier. If you are not using
Bashas your shell, replace
~/.bashrcwith the config file of your shell.
cdcurl -fsSL https://github.com/rbenv/rbenv-installer/raw/master/bin/rbenv-installer | bashecho 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bashrcecho 'eval "$(rbenv init -)"' >> ~/.bashrcexec $SHELLcurl -fsSL https://github.com/rbenv/rbenv-installer/raw/master/bin/rbenv-doctor | bashrbenv install *.*.*rbenv global *.*.*ruby -v
Nvm, Node & Yarn
- Like how Ruby has a version manager, Node has one too, called nvm. Take a note of the node version from here. To install it, follow the commands below. Replace
*.*with the version in the link above.
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bashexec $SHELLnvm install *.*node -v
- Then install Yarn with the following commands.
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.listsudo apt update && sudo apt install yarnyarn -v
- PostgreSQL is the database that powers DEV. Let's install it next! Run the following commands to set up PostgreSQL. Make sure to replace
$YOUR_USERNAMEwith the username you set for Ubuntu.
sudo apt update && sudo apt install postgresql postgresql-contrib libpq-devsudo -i service postgresql startsudo -u postgres createuser -s $YOUR_USERNAMEcreatedbsudo -u $YOUR_USERNAME psql
- The last command will open PostgreSQL's shell for you. Use the command
\passwordto set a password for your user. After setting up the password, use the command
- Use the command
sudo -i service postgresql startto start PostgreSQL server everytime you restart your WSL machine.
- Imagemagick is an open-source Image manipulation software suite that is used by DEV and lots of other projects to modify and optimize images. Although there is an option to install Imagemagick from the source, we will be installing it as a package via
apt. I have noticed from different issues on github that installing from the source lead to buggy installs on WSL.
sudo apt update && sudo apt install imagemagick
- To check if the installation was successful, use the command
identifywith a path to a
identify 10489.png. Pro Tip, to open the Linux environment in Window's file explorer, use
- Redis is an in-memory data structure store which can be used as a database, cache and message broker. Use the following commands to install it.
sudo apt update && sudo apt install redis-serversudo -i service redis-server start
- Execute the command
redis-clito verify its installation. It will open the Redis CLI. Type
exitin the Redis CLI to go back to the shell.
- Use the command
sudo -i service redis-server startto start the Redis server everytime you restart your WSL machine.
- DEV uses Elasticsearch for lightning-fast search results. Follow the commands below to install it.
cdwget https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-oss-7.5.2-linux-x86_64.tar.gzwget https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-oss-7.5.2-linux-x86_64.tar.gz.sha512shasum -a 512 -c elasticsearch-oss-7.5.2-linux-x86_64.tar.gz.sha512tar -xzf elasticsearch-oss-7.5.2-linux-x86_64.tar.gzcd elasticsearch-oss-7.5.2/echo 'export ES_HOME="$HOME/elasticsearch-7.5.2/"' >> ~/.bashrcecho 'export PATH="$ES_HOME/bin:$PATH"' >> ~/.bashrcexec $SHELL
- To run the Elasticsearch server, run the command
Congratulations! You are almost done with your journey, now for the final stretch. We will be setting up your fork of the DEV repository on your machine.
- Fork DEV's repository by clicking on the
Forkbutton on the top right of the dev.to repository on GitHub.
- Clone your forked repository. Here's a quick rundown of the concepts of Forking a repo by GitHub if you are new to Git & GitHub.
- Run the command
gem install bundlerwithin the
dev.tofolder on your machine which you get after cloning your fork. All the further instructions refer to items within the
dev.tofolder unless mentioned otherwise.
- Now, we need to set up some configuration details for the other tools to work with your DEV fork on the local machine.
- If you are a VS Code user and set up with Remote development extension, execute the command
- Create a file called
configfolder. This file will contain sensitive details and thus is automatically ignored by git via configuration in
.gitignore. Here's more information on gitignore.
- Within the
application.ymlfile, add the following piece of code. Replace
USERNAMEwith the username of your ubuntu user which you also set for PostgreSQL earlier. Replace
PASSWORDwith the password for the same user while configuring PostgreSQL.
- I also recommend setting up GitHub credentials by following GitHub Authentication - DEV Docs. You can set up the credentials with the following format in
Client IDon GitHub beside
GITHUB_SECRET:. Don't forget to leave a
space(whitespace) after the
:and before the Client ID and Client Secret. These variables enable your local copy to login with GitHub. Remove the
GITHUB_KEY: *******GITHUB_SECRET: *******
Now, time to use the two magic commands
- Make sure you have
Elasticsearchrunning before you fire the following command. You can check the status of services with the command
sudo -i service --status-all, the services with
+beside them are running.
- Run the command
bin/setup. This command will perform an automatic setup of all the related services and dependencies.
That was it! After the
bin/setup command gets completed, Run the command
bin/startup and open
localhost:3000 in your browser to see your copy of DEV load up! It will take some time for the server to boot, I recommend waiting until
Compiled Successfully before trying to load
Press Ctrl + C in your console windows to shut down elasticsearch and DEV server when you are done!
Bonus - Install Chrome for Testing
DEV has a collection of Test Cases which verify that the changes made by any contributor do not end up breaking existing functionality. These test cases should always be run when submitting a new or modified functionality to DEV. New test cases must be written for new functionality.
Chrome is required for testing for the Testing tools to render the webpages in a browser and match them against pre-defined content. This ensures that the content has been generated as it should be. To install Chrome, perform the following steps.
- Install dependencies of chrome.
sudo apt install fonts-liberation libappindicator3-1 libasound2 libgbm1 libnspr4 libnss3 libxss1 xdg-utils
- Download Chrome and install it.
wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.debsudo dpkg -i google-chrome-stable_current_amd64.debecho 'alias chrome="google-chrome-stable"' >> ~/.bashrcexec $SHELL
sudo dpkg -i google-chrome-stable_current_amd64.debthrows an error, try using the command
sudo apt --fix-broken installafter which execute the command
sudo dpkg -i google-chrome-stable_current_amd64.debagain.
- Test your installation with the following command. It will print the HTML Code of the given URL in your console upon working correctly.
chrome --headless --disable-gpu --dump-dom https://www.chromestatus.com/
Thank you for making it this far! I would love to see you tweet me @Amorpheuz a screenshot of DEV running on your local machine. If you encounter any problems or still are confused about a certain part, feel free to shoot a DM on DEV or Twitter.
Getting Open Source Projects running on local machines if often one of the most intimidating tasks of starting contributing to one, with this post I hope I made your journey of contributing to DEV easier! You can go in-depth about many of the finer details on DEV Docs at your own pace.