First project setup
To create new project on Fronthack use following command:
After asking about directory name, it will create a new file structure and will download all dependencies. Newly created project will be blank. You will find there only one
index.html page and two example components, which are used on almost every project.
Navigate to the path where the project has been generated and run following script inside:
npm run dev
You just run a localhost server on port 8000, which watch for changes in files, recompiles the Sass and Mustache to plan CSS and HTML, and it does more interesting stuff, but more on that later. Why do we use a CLI for generator and and Npm script to run a server? Because these are the standards and it is worth getting used to them. This is how even create-react-app works.
Now, in your favorite code editor, open the file
src/sass/variables.sass. Change the color of
$brand-primary variable to any another, for example red
red. Save file and look into browser. Vuala! New color is already there, without manual refreshing the page. Now open the
src/index.html file. Remove something there. Go to the browser. Disappeared? Great, it means that Fronthack works correctly.