First project setup

To create new project on Fronthack use following command:

fronthack init

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.

Improve this page