Frontend Assets

The file structure of all frontend assets

How Assets work

Generating a new route

After generating a route with the CLI like: `node-rails new-page '/blogs'`

New assets are created in the pages directory for each asset. This is created by taking the route of the url and adding it to the path after pages and creating your directory path. The page name given is the name of the asset. The name of the asset is independent of the url but required for the webpack builds. The directory file structure is always based on the url so you can find the asset for that route.

For Example: /blogs

JS File: ./assets/js/pages/blogs/blog.jsJSX File: ./assets/jsx/pages/blogs/component.jsxCSS File: ./assets/css/pages/blogs/blog.cssSASS File: ./assets/scss/pages/blogs/blog.scssLESS File: ./assets/less/pages/blogs/blog.lessPug File: ./views/pages/blogs/blog.pug

Best Performance

You now have independent assets for each route and any global files that you make can be imp[orted in each page for the most optimial bundle sizes.

Examples of Routes

Static Routes: For Example: /blogs

$ node-rails new-page '/blogs'// Assets for this routeJS File: ./assets/js/pages/blogs/blog.jsJSX File: ./assets/jsx/pages/blogs/component.jsxCSS File: ./assets/css/pages/blogs/blog.cssSASS File: ./assets/scss/pages/blogs/blog.scssLESS File: ./assets/less/pages/blogs/blog.lessPug File: ./views/pages/blogs/blog.pug

Dynamic Routes: For Example: /blogs/:id

$ node-rails new-page '/blogs/:id'// Assets for this routeJS File: ./assets/js/pages/blogs/:id/blog.jsJSX File: ./assets/jsx/pages/blogs/:id/component.jsxCSS File: ./assets/css/pages/blogs/:id/blog.cssSASS File: ./assets/scss/pages/blogs/:id/blog.scssLESS File: ./assets/less/pages/blogs/:id/blog.lessPug File: ./views/pages/blogs/:id/blog.pug

Additionally global assets

Add all additional global assets

Add all additional global assets should be outside the pages directory and imported into each page that they are used in. This keeps each page asset as small as possible.