Sage 9 on other projects (Laravel)

sage
1

Hello Guys,

I’m one of those guys that searchs the web for a built package.json and uses it for everything. And I’m loving sage 9.

On my company, we also use Laravel a lot and I’m trying to push sage 9 out of WP and to the whole team.
I was able to make a simple repo for vanilla php, just removed all the WP php, added a few functions of my own and edited the some config.json file. And it was awesome, the level of configuration Sage 9 brings is out of this world.

For Laravel, I’m having a bit more trouble and I’m not sure if this is a bug or just little knowledge on my part.

The problem is the folder structure. Laravel has its assets under ROOT/resources/assets and the dist should be under ROOT/public/dist.

I was able to hack my way into making it work by putting sage 9 this way:

  1. On package.json, I edited the scripts to point to resources/assets/build/webpack.config.js. No problem here.
  2. Edited the config.json:
    …
    “paths”: {
    “assets”: “./resources/assets”,
    “dist”: “./resources/dist”
    },
    “publicPath”: “”,
    …

However when “npm run build” I kept getting module not found errors. After much trial, error and webpack docs I was able to make it work by changing all the loaders includes to:
include: [path.resolve(config.paths.root, config.paths.assets), config.paths.root],
(assets path had to be full)

My questions are:

Am I doing something wrong? Is there a simple way to configure Sage 9 for this to work almost out of the box?

Is Sage 9 supposed to work under different folders then /assets, /dist. Specifically under different parent folders like /folder1/assets → folder2/dist?

Is this something Sage 9 (webpack part only) would like to evolve to (A multi framework tool)?

2

Did you ever make any progress on this? I had the same thought tonight and before I started moving any code over, I figured I’d check here to see if anyone else has already done it.

3

Hello, Yes I did.

I’m using this with drupal as well. The process is pretty straight forward, just copy the frontend files and change the config.

You’ll also need the functions that will handle the assets (so they load with the cachebusting slug). I’ve ended up doing this manually as it was quite simple, but you can copy just the functions for this should work normally.

To use it with laravel I was also able to make it work however it was with a different version of laravel and with a different version of sage (alpha still, with a different folder structure).
My main problem here is that sage was expecting assets and dist to be on the same folder, and Laravel as it “resources/assets” and “public/dist”.
On webpack.config.js I had to look for the place where one of this paths was being sent and send both of them for instance:

preLoaders: [
  {
    test: /\.js?$/,
    include: [config.paths.assets, config.paths.root],
    loader: 'eslint',
  },
],

Where config.paths.root sage defined by itself on config.js and config.paths.assets is config.paths.root concatenated with the page from root to the assets folder.

With this version, assets in on the resources folder and dist is on the root. I’m not sure what you’ll have to change. But I hope this helps.

4

Thansk for this. I expect to be able to start working on this within a week, hopefully sooner.