It has always been a good idea to set up a local environment on your computer to allow working offline and testing changes to your website before uploading them to your server. With PrestaShop v1.7, it is now essential because PrestaShop v1.7 relies on SASS and Webpack to compile theme assets including CSS and JavaScript. You should no longer manually edit these assets like in previous versions of PrestaShop.
Installing XAMPP
I recommend using XAMPP because I find it easy to use and it is available on Windows, Linux and OS X. It includes all the tools you need including Apache, PHP, MySQL and phpMyAdmin. Click here to go to the XAMPP download page and scroll to the section for your operating system. Click the Download button for the PHP version closest to the one used on your web server (see Checking your server's PHP version).
Currently, PrestaShop v1.7 requires at least PHP 5.4 and at most PHP 7.1. PrestaShop v1.7.4 and later will require PHP 5.6 and work with PHP 7.2. You should upgrade your server to PHP 7 if possible, since it has better performance with faster execution and lower memory usage.
After installing XAMPP, extract the index.php and prestashop.zip files that you previously downloaded into the c:/xampp/htdocs/prestashop directory, for example, then go to http://localhost/prestashop in your web browser to extract and install PrestaShop v1.7.
If you need to create a database, go to http://localhost/phpmyadmin and then click the Databases tab. Enter the new database name in the Database name field and then click the Create button. To delete a database that is no longer needed, tick the box next to the database name and then click the Drop link.
Installing Git
The next tool I recommend installing is Git, since it makes it easy to download and update PrestaShop files and it includes the Unix environment required by the other tools. Click here to go to the Git download page and then choose your operating system. Three applications will be installed including Git Bash, Git CMD and Git GUI. You can choose either Bash or CMD based on which you are more familiar (we'll just use Bash in this guide). Git GUI is a desktop app that allows you to create, open and clone repositories without needing to type commands.
If you're a developer who write modules for the latest version of PrestaShop, you can open Bash and then type the following to download PrestaShop to the c:/xampp/htdocs/prestashop17 directory:
cd c:/xampp/htdocsgit clone http://github.com/PrestaShop/PrestaShop prestashop17
Or to download an earlier branch such as v1.7.2.x:
git clone http://github.com/PrestaShop/PrestaShop prestashop17 --recursive -b 1.7.2.x
Note that the latest version of PrestaShop may be unstable, so it should not be installed on a live site. Merchants should download the latest stable version of PrestaShop v1.7 from the PrestaShop website.
Installing Node.js
Another tool you'll need is install is Node.js, which adds a package manager you can use to install SASS, Webpack and other tools. Click here to go to the Node.js download page and click the download button with LTS, since it is more stable and is recommended for most users. After installing, restart Bash and then the npm command will become available.
Installing Composer
The last tool you'll need is Composer, which makes it easier to install and update all the packages required by PrestaShop v1.7 themes. Click here to go to the Composer download page and download the installer.
After installing, open Bash and then type the following to install the PHP code dependencies:
cd c:/xampp/htdocs/prestashopcomposer install
Installing jQuery, babel and Webpack
To install the core dependencies required for PrestaShop themes to work including jQuery, babel and Webpack, type the following in Bash:
cd c:/xampp/htdocs/prestashop/themes
npm install -g
Once it finishes, type the following to compile the core resources:
npm run build
Installing Bootstrap, Bourbon and Material Icons
To install the dependencies required for the Classic theme including Bootstrap, Bourbon and the Google Material font, type the following:
cd c:/xampp/htdocs/prestashop/themes/classic/_devnpm install -g
Recompiling Classic theme assets
Type the following to compile the Classic theme resources:
npm run build
You will need to run this command every time you change the JavaScript or CSS in the Classic theme to recompile the assets. Alternatively, you can run the following command to automatically recompile assets as needed:
npm run watch
To test that it is working, try editing C:/xampp/htdocs/prestashop/themes/classic/_dev/css/partials/_variables.scss and changing the color #2fb5d2 on line 6:
$brand-primary: #2fb5d2;
If everything is set up correctly, changing this one line will update the primary color throughout the entire theme! To learn more about modifying the classic theme, see Understanding the Classic theme.
Press Ctrl+C in Bash when you have finished modifying files to stop automatic recompilation.