Adding new files

Here's a small guide for adding new files and components to the Novicell Frontend setup.

(Adding new files) Table of Contents

Generate component
Add CSS files
Add JavaScript
Build

Generate the component

Let's generate component automatically. To start, first we have to initialize npm link command to activate the generate script. Write this in the project directory.

npm link

Now we can use createComponent keyword in our project, this is how to create a new page:

createComponent -t p -n myAwesomePage
# -t (type) -n (name)

To continue, we probably need to add some different files, such as javascript and/or CSS files. In this example I will continue working with my generated component.

Add CSS files

New CSS file for your new component was already generated in src/04-pages/myAwesomePage. There are few different ways to make it work. Choose one:

• Import our myAwesomePage.css file in master.css (big global css file that is in src/Modules directory)
• Create new css file in src/Modules directory and import myAwesomePage.css in it.

Novicell-frontend setup will loop through src/Modules directory looking for all css files and will output a bundle for each of them.

src/Modules/master.css

@import '../04-pages/myAwesomePage/myAwesomePage.css';

src/04-pages/myAwesomePage/myAwesomePage.css

.box {
    margin: 50px auto;
    width: 100px;
    height: 100px;
    background-color: blue;
}

Result

In conclusion of adding CSS. Modules/master.css is imported in header of project and will be applied to all components. If you create a new CSS file in Modules dir that you don't want to be global, just it inside the component itself.

Add JS

Javascript files should always be in src/Modules/...

Let's add a JS functionality to myAwesomePage.

• To separate the concerns in Modules dir, I created new folder my-scripts inside src/Modules (You can nest unlimited folders inside Modules folder).
• Add new JavaScript file inside src/Modules/my-scripts - it will be called myAwesomePage.js. This file supports ES6 syntax and can import modules. Lets say we want to use lazyload for myAwesomePage.
• Install lodash and novicell-lazyload to our project

npm install novicell-lazyload
npm install lodash

• Import it into myAwesomePage.js:

import NovicellLazyLoad from 'novicell-lazyload';
import debounce from 'lodash/debounce';

document.addEventListener('lazybeforeunveil', NovicellLazyLoad.lazyLoad, true);
window.addEventListener('resize', debounce(NovicellLazyLoad.checkImages), 100, false);

• Import the bundled file from dist folder:

<div>
    <img class="lazyload lazyload-measure" data-src="https://source.unsplash.com/2Ts5HnA67k8/"/>
</div>
<script defer src="{{ path '/dist/scripts/myAwesomePage.bundle.js' }}"></script>

Page now has lazyload! 🔥 😄

Build these files

• If you're not running development mode (npm run dev) already, compile the changes with a npm script:
• npm run build:dev builds compiled files to /dist folder
• npm run dev does the same as first one, but also actively watches for changes!
• npm run build:prod build for production (ready to deploy code)

See the whole list of scripts: npm scripts