Resource Compilation

Resource Compilation

The /public folder contais all the javascript, css, images and other files used by the app, but should never be modified directly. Instead, they should be placed in /resources, and a module bundler should be used to compile them and copy them to the /public folder.

Laravel Mix

Talent Cloud uses Laravel's built-in bundler, Laravel Mix, which itself built on top of Webpack. It is configured in /webpack.mix.js. It compiles our SASS into CSS and our TypeScript into JavaScript.

Adding a React component

If you create a new top-level React component, you will need to ensure it is compiled by adding the following snippet to /webpack.mix.js:

.ts(
  "resources/assets/js/components/Your/ComponentName.tsx",
  "public/js",
)

You can have it run on a page by including the following script element in the script block of a twig template:

<script async defer src="{{ asset(mix('js/ComponentName.js')) }}"></script>

Note that it is now a .js file directly under the /public/js/ directory. The asset() and mix() are helper functions ensure that enable cache busting and control of the public folder location.

Note: control of the /public folder location has been important for us in the past because we wanted to host the app at a subdirectory of the the normal root url, ie https://talent.canada.ca/reserve, requiring the public folder to be at /reserve/public, instead of /public.

Add a SASS file

To add a new stylesheet, save the .scss file anywhere in /resources/assets/sass/ and ensure it is imported by the resources/assets/sass/app.scss file with the following syntax:

@import "path/to/your/file";

The path should be relative to /resources/assets/sass/. Your new file will now be bundled into the public css file.