Okay, so hopefully now we have Bedrock working. The next part in our development workflow is to get Sage installed. Navigate to your themes folder here is the location of mine :
We can either load the terminal type in “cd ” and then drag the theme folder into the terminal window OR, a slightly different way I will show you this time would be to right-click the themes folder at the bottom of the Finder window and click “copy pathname” you can then type cd and paste the pathname into the terminal, however, my Local installation made a folder called “Local sites” (note the space) so you would need to escape the space in the pathname (“Local\ sites”). Dragging the folder to the terminal avoids this issue. Windows users you are on your own!
Now, lets make Composer do some magic and paste this into terminal
composer create-project roots/sage your-theme-name
Answer all the questions it asks you, clicking enter will save the default. If you are following along with the series, make sure to choose Bootstrap (1) when asked. We will use Bootstrap to make a responsive menu in an upcoming section
So we are almost done, if we navigate into out new theme folder we will find a package.json file, this is a file that lists the project dependencies that we now need to install. So let’s go to this folder in the terminal – either copy the path or drag the folder right into the terminal to change the directory.
The official docs tell you to type in “yarn” I have node.js installed so I use this. If you have neither of these, then I would recommend installing node.js now before continuing and follow along with me.
npm installonce this has completed, type in :
npm run startAfter a few seconds, your browser will launch, and you will be able to login to your admin panel and change the theme to the new sage theme we have set up.
Page not load?
Okay, so if your browser keeps spinning, you are one of the lucky ones that get to complete one last step! Load up local and click “open site”, then copy the URL of the page that loads up. Now, from vscode go to : web/app/themes/themename/resources/config.json then on line 12, where it has the “devUrl” paste in the correct url for your site. Now try running npm run start once more.
Extra:
Now if you don’t have Yarn, installed lets get that on out systems globally. First, because we have started the development server in our terminal we need to press control+c to end the session – we can use Node to install it so just type :
sudo npm install --global yarnType in your password.
The official docs and most tutorials for Sage use Yarn, so now you can too 🙂
The development environment is now set up our code will be automatically optimized, and we can begin to develop our theme. Check out our next tutorial as we begin to build our theme.