Assets not found when deploying Sails app to Heroku - heroku

I'm pretty new in Sails.
I've created a new web-app from the Sails template and tried to upload it to Heroku. Everything was fine except for the assets, none of the assets are found (js, css, images, etc).
I've found out that Sails uses Grunt for copying the files to a .tmp folder. I've checked and I have Grunt added to my package.json file. I've also added a Procfile wit the web: node app.js command and the NODE_ENV variable it's pointing to production in Heroku.
I didn't changed any of the Grunt tasks, the Gruntfile.js file and the /tasks directory are by default.
Any ideas of what else I could check?

I solved this issue through a different mean. On top of including some of the grunt deps in the OP's answer, I added postinstall in the scripts section of package.json:
"scripts": {
"start": "NODE_ENV=production node app.js",
"test": "npm run lint && npm run custom-tests && echo 'Done.'",
"lint": "eslint . --max-warnings=0 --report-unused-disable-directives && echo '✔ Your .js files look so good.' && htmlhint -c ./.htmlhintrc views/*.ejs && htmlhint -c ./.htmlhintrc views/**/*.ejs && htmlhint -c ./.htmlhintrc views/**/**/*.ejs && htmlhint -c ./.htmlhintrc views/**/**/**/*.ejs && htmlhint -c ./.htmlhintrc views/**/**/**/**/*.ejs && htmlhint -c ./.htmlhintrc views/**/**/**/**/**/*.ejs && htmlhint -c ./.htmlhintrc views/**/**/**/**/**/**/*.ejs && echo '✔ So do your .ejs files.' && lesshint assets/styles/ --max-warnings=0 && echo '✔ Your .less files look good, too.'",
"custom-tests": "echo \"(No other custom tests yet.)\" && echo",
"postinstall": "grunt build", // added this
...
The effect of this on heroku is the required running of the grunt task build, which compile and copy the assets to the appropriately referenced location (i.e.: .tmp)

The solution was pretty easy. Turns out that I didn't had the Grunt dependencies added for production env, only for development env in my package.json. I've added them and worked perfectly.
"dependencies": {
"#sailshq/connect-redis": "^3.2.1",
"#sailshq/lodash": "^3.10.3",
"#sailshq/socket.io-redis": "^5.2.0",
"async": "2.0.1",
"sails": "^1.0.2",
"sails-hook-apianalytics": "^2.0.0",
"sails-hook-organics": "^0.13.0",
"sails-hook-orm": "^2.0.0-16",
"sails-hook-sockets": "^1.4.0",
"sails-postgresql": "^1.0.1",
"grunt": "1.0.1", // I've added these two lines
"sails-hook-grunt": "^3.0.2" // I've added these two lines
},
"devDependencies": {
"#sailshq/eslint": "^4.19.3",
"#sailshq/htmlhint": "^0.9.16",
"#sailshq/lesshint": "^4.6.6",
"grunt": "1.0.1",
"sails-hook-grunt": "^3.0.2"
},

Related

I can't run 'npm run dev' since Laravel updated with Vite

Taylor Otwell announced that new Laravel projects now will run with Vite and that Vite is installed by default. I can't seem to be able to run dev environment 'npm run dev'
I installed new laravel project, installed Laravel JetStream with SSR and teams support hit the 'npm install command'.
Every time I run npm run dev it shows this:
And if I open the local link, it shows this:
Why can't I user npm run dev and compile my files?
This is package.json for my brand new laravel app
{
"private": true,
"scripts": {
"dev": "vite",
"build": "vite build && vite build --ssr"
},
"devDependencies": {
"#inertiajs/inertia": "^0.11.0",
"#inertiajs/inertia-vue3": "^0.6.0",
"#inertiajs/progress": "^0.2.7",
"#inertiajs/server": "^0.1.0",
"#tailwindcss/forms": "^0.5.2",
"#tailwindcss/typography": "^0.5.2",
"#vitejs/plugin-vue": "^2.3.3",
"#vue/server-renderer": "^3.2.31",
"autoprefixer": "^10.4.7",
"axios": "^0.25",
"laravel-vite-plugin": "^0.2.1",
"lodash": "^4.17.19",
"postcss": "^8.4.14",
"tailwindcss": "^3.1.0",
"vite": "^2.9.11",
"vue": "^3.2.31"
}
}
and if I try hitting 'vite' in the terminal I get this:
If you don't want to use vite but mix instead in your new laravel project, you can just get the usual behavior of npm run dev back with the following changes:
Install Laravel Mix (because by the new installation it is not there anymore):
npm install --save-dev laravel-mix
Create a webpack.mix.js file, if it is not there, and make sure it has the following content:
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel applications. By default, we are compiling the CSS
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
//
]);
Update package.json:
"scripts": {
- "dev": "vite",
- "build": "vite build"
+ "dev": "npm run development",
+ "development": "mix",
+ "watch": "mix watch",
+ "watch-poll": "mix watch -- --watch-options-poll=1000",
+ "hot": "mix watch --hot",
+ "prod": "npm run production",
+ "production": "mix --production"
}
Remove vite helper functions (if they are there):
- import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
createInertiaApp({
title: (title) => `${title} - ${appName}`,
- resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
+ resolve: (name) => require(`./Pages/${name}.vue`),
setup({ el, app, props, plugin }) {
return createApp({ render: () => h(app, props) })
.use(plugin)
.mixin({ methods: { route } })
.mount(el);
},
});
Update environment valiables (in .env, VITE_ prefix to MIX_):
- VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
- VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
+ MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
+ MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
Remove Vite and the laravel Plugin
npm remove vite laravel-vite-plugin
Remove the Vite config file:
rm vite.config.js
Remove these paths from .gitignore:
- /public/build
- /storage/ssr
If you created some code already with vite, you must have some more changes in your blade files, check out this article. But if it is a new project, you just good to go.
For anyone experiencing the problem:
With Vite, running npm run dev will only build your frontend and start watching any changes to your code to rebuild automatically.
To actually start your server, you need to run php artisan serve in a separate command window.
Source (See With Laravel section): https://laravel-vite.dev/guide/essentials/development.html#with-laravel
Had the same issue, but none of the mentioned solutions worked for me. Instead I saw an issue with the <script> src's in the head-section of the rendered html.
screenshot of script src's buggy
Added in vite.config.js the following code which solved the issue.
server: {
hmr: {
host: 'localhost',
},
}
Edit:
The issue was reported in laravel's vite-plugin repo and it will be fixed with this PR
I was having the same issue, I did the following and it finally worked!
I did:
Upgraded my Laravel Project to Latest (v9.19.0). Infact i upgraded all my packages to latest one too.
Remove the node_modules and install the dependency using npm install
Make sure you follow the upgrade guides properly.
Run the server using php artisan serve
And run the dev server using npm run dev
If you done properly, it should start the dev server and all your javascript code should compile. (If it succeed, you will see the desired output.)
I fixed the issue in the above steps.
Vite needs an updated node version.
You can download the latest node version then run npm install and npm run dev
To create the server you can use php artisan serve
If you are using laragon as a local deployment you can set the --host flag to the virtual host url of the app ,it worked for me
Try:
.env :
APP_URL=http://localhost:8000
welcome.blade.php :
<head>
<title>my project</title>
#vite(['/resources/js/app.js', '/resources/css/app.css'])

NX workspace - angular 14 - jest not working

I'm trying to upgrade my angular 13 NX workspaces to angular 14, but somehow I can't get my jest unit tests to work properly. I tried the following from zero:
Install #angular/cli and nx globally:
npm install --global #angular/cli#latest
npm install --global nx#latest
Open and cmd in a path without spaces
npx create-nx-workspace
> test
> angular
> demo
> scss
Result:
Nx is creating your v13.10.5 workspace
So now I could migrate to the latest NX workspace version
cd test
nx migrate latest
The #angular/cli version is still on 13, so I changed this in the root package.json to 14.0.1 (nx removes the version annotations ~ and ^...)
npm install doesn't work out. jest-preset-angular#11.1.2 requires #angular-devkit/build-angular#">=0.1002.4" while in the workspace this is a dependency fixed at #angular-devkit/build-angular#"14.0.1":
npm ERR! Found: #angular-devkit/build-angular#13.3.7
npm ERR! node_modules/#angular-devkit/build-angular
npm ERR! dev #angular-devkit/build-angular#"14.0.1" from the root project
npm ERR! peer #angular-devkit/build-angular#">=0.1002.4" from jest-preset-angular#11.1.1
npm ERR! node_modules/jest-preset-angular
npm ERR! dev jest-preset-angular#"11.1.2" from the root project
So I run update instead:
npm update
npx nx migrate --run-migrations
I'm able to run the project
npm start -- --open
Before we can run the command for the unit tests, add the following script under the root package.json scripts section:
{
...,
"scripts: {
...,
"nx": "nx"
}
}
Now I'm unable to run the unit tests:
npm run nx run-many -- --target=test --projects=demo --watch=false --browsers=ChromeHeadless
FAIL demo apps/demo/src/app/app.component.spec.ts
● Test suite failed to run
Cannot find module '#angular/core/testing' from '../../node_modules/jest-preset-angular/build/config/setup-jest.js'
Require stack:
C:/repos/b/test/node_modules/jest-preset-angular/build/config/setup-jest.js
C:/repos/b/test/node_modules/jest-preset-angular/setup-jest.js
src/test-setup.ts
at Resolver.resolveModule (../../node_modules/jest-resolve/build/resolver.js:324:11)
Note that the module is definitely installed:
Other Q&A's suggest updating jest-preset-angular, so I did. I changed it to 12.1.0 in the package.json. This requires jest#28.1.1, so changed that too. And ts-jest should be at 28.0.5.
Running npm update succeeds now. But running the unit tests
npm run nx run-many -- --target=test --projects=demo --watch=false --browsers=ChromeHeadless
now gives the following errors:
ReferenceError: document is not defined
NG0200: Circular dependency in DI detected for TestComponentRenderer. Find more at https://angular.io/errors/NG0200
NG0200: Circular dependency in DI detected for InjectionToken DocumentToken. Find more at https://angular.io/errors/NG0200
...
It litterally suggests the following:
The error below may be caused by using the wrong test environment, see https://jestjs.io/docs/configuration#testenvironment-string.
Consider using the "jsdom" test environment.
So I installed it:
npm i --save-dev jest-environment-jsdom
And updated the root jest.config.js:
module.exports = {
projects: getJestProjects(),
testEnvironment: 'jest-environment-jsdom'
};
This still gives me the same error. I also tried with testEnvironment: 'jsdom' without success. So how can I fix this? Or do I have to wait until the NX developers release a new stable version?
As of today (like just now...) I was able to upgrade to 14.
nx migrate latest
Open the root package.json file
restore the ~ and ^
remove the #angular/eslint packages which are still on 13
manually change #angular/cli to 14.0.0
Then npm update and npx nx migrate --run-migrations were working as expected. You'll see warnings about the tsconfig. You need to open each library's project.json and add
"targets:build:options:tsConfig": "libs/my-lib/tsconfig.lib.json"
The test section doesn't need modifications, it would say that the tsconfig field there is deprecated.
This is my final root package.json
{
"name": "mintplayer-ng-bootstrap",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "nx",
"nx": "nx",
"postinstall": "node ./decorate-angular-cli.js && ngcc --properties es2020 browser module main",
"start": "nx serve",
"build": "nx build",
"test": "nx test"
},
"private": true,
"dependencies": {
"#angular/animations": "~14.0.2",
"#angular/cdk": "~14.0.1",
"#angular/common": "~14.0.2",
"#angular/compiler": "~14.0.2",
"#angular/core": "~14.0.2",
"#angular/forms": "~14.0.2",
"#angular/platform-browser": "~14.0.2",
"#angular/platform-browser-dynamic": "~14.0.2",
"#angular/router": "~14.0.2",
"#mintplayer/ng-pagination": "~14.0.0",
"#nrwl/angular": "14.3.5",
"bootstrap": "^5.1.3",
"bootstrap-icons": "^1.7.2",
"ngx-highlightjs": "~6.1.1",
"qrcode": "^1.5.0",
"rxjs": "~7.4.0",
"tslib": "^2.0.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"#angular-devkit/build-angular": "~14.0.2",
"#angular/cli": "~14.0.0",
"#angular/compiler-cli": "~14.0.2",
"#angular/language-service": "~14.0.2",
"#nrwl/cli": "14.3.5",
"#nrwl/cypress": "14.3.5",
"#nrwl/eslint-plugin-nx": "14.3.5",
"#nrwl/jest": "14.3.5",
"#nrwl/linter": "14.3.5",
"#nrwl/workspace": "14.3.5",
"#types/jest": "27.4.1",
"#types/node": "16.11.7",
"#types/qrcode": "^1.4.2",
"#typescript-eslint/eslint-plugin": "~5.24.0",
"#typescript-eslint/parser": "~5.24.0",
"cypress": "^9.1.0",
"eslint": "~8.15.0",
"eslint-config-prettier": "8.1.0",
"eslint-plugin-cypress": "^2.10.3",
"jest": "27.5.1",
"jest-preset-angular": "11.1.2",
"ng-packagr": "^14.0.2",
"postcss": "^8.4.5",
"postcss-import": "^14.1.0",
"postcss-preset-env": "^7.5.0",
"postcss-url": "^10.1.3",
"prettier": "^2.6.2",
"ts-jest": "27.1.4",
"typescript": "~4.7.3",
"nx": "14.3.5"
}
}
The related project is hosted here

Symfony 4 - Heroku - Can't use my images (webpack-encore)

in my project symfony 4 I use all kinds of images.
I have static images for the decoration of the site. I put them in assets/images, and I generated them in the public/build/images with webpack-encore.
And these pictures, I manage their size with LiipImagineBundle
So I deployed my project on Heroku. It installs the bundles, the node_modules, generates the files with webpack-encore from the assets, and generates the database
composer.json:
"compile": [
"php bin/console doctrine:schema:drop --full-database --force --env=prod",
"php bin/console d:m:m",
"php bin/console d:f:l --no-interaction --env=PROD"
]
package.json:
"scripts": {
"dev-server": "encore dev-server",
"dev": "encore dev",
"watch": "encore dev --watch",
"build": "encore production --progress",
"heroku-postbuild": "node_modules/.bin/encore production"
},
However when I go on the application from Heroku, the site works but the images that must be displayed through LiipImagineBundle are not. Instead I have a 500 error telling me that resources do not exist. And actually if I go in the section "Sources", in the public / build / images, there are missing images. Yet they must be generated because in local (in dev), everything works perfectly.
All my required bundle for prod are in "require" and not "require-dev". And I haven't devDependencies in my package.json, all is in 'depedencies'
Has anyone ever had the same problem?
You can used heroku-buildpack
It uses Composer for dependency management, supports PHP or HHVM (experimental) as runtimes, and offers a choice of Apache2 or Nginx web servers.

npm scripts using node-sass and autprefixer cause browser-sync to run twice

I have the following npm scripts setup to do all my scss and js linting, compiling and bundling. They do work, however It seems there is room for improvement.
"scripts": {
"lint-scss": "stylelint ./styles/**/*.scss --cache --syntax scss",
"scss": "node-sass --omit-source-map-url --recursive --output-style compressed --output ./styles ./styles",
"autoprefixer": "postcss --use autoprefixer --replace ./styles/style.css --no-map",
"build:css": "yarn run lint-scss --silent | yarn run scss --silent | yarn run autoprefixer --silent",
"serve": "browser-sync start --https --no-notify --proxy 'project.local' --files './styles/**/*.css, ./views/**/*.php, ./**/*.html, !node_modules/**/*.html'",
"watch:css": "onchange './styles/**/*.scss' -- yarn run build:css --silent",
"watch:all": "parallelshell 'yarn run serve --silent' 'yarn run watch:css --silent'",
"postinstall": "yarn run watch:all --silent"
}
Currently when I watch for changes and save an scss file, browser-sync fires twice. This is due to node-sass running and changing a file then autoprefixer running and changing the same file. (Output below for completeness)
Rendering Complete, saving .css file...
Wrote CSS to /Users/Matt/Sites/Project/styles/style.css
Wrote 1 CSS files to /Users/Matt/Sites/Project/styles
[BS] File event [change] : styles/style.css
✔ Finished styles/style.css (192ms)
[BS] File event [change] : styles/style.css
Surely I can merge these and change the file once and have browser-sync fire once?
Thanks
You could try including the BrowserSync --reload-debounce option/flag in your serve script and provide a short delay as appropriate in milliseconds.
--reload-debounce Restrict the frequency in which browser:reload events can be emitted to connected clients
"scripts": {
...
"serve": "browser-sync start --reload-debounce 200 ...",
...
}

Is it possible to deploy a React Native app to Heroku?

Is was wondering if its possible to deploy a React Native app to Heroku? The reason I ask is because then I can retrieve the url and place it in an iframe to mimic an iPhone where the user can then tryout the app without actually having to install it on to the iPhone via iTunes.
This is possible using react-native-web (sources).
There are few things that you have to do to set this up on heroku:
in the settings tab of your your heroku app dashboard
set the buildpack as heroku/nodejs,
in package.json set the build script to build your web version from RN sources, for example, if you are using expo: expo build:web,
create a Procfile in the root directory to serve the web
version: for example, if you used expo, the build directory is web-build and therfore the command should be npx serve web-build,
Additionally, if you use expo, make sure to add the expo-cli as a dev dependency: npm install -D expo-cli.
You will then simply need to push to heroku the usual way. By default, heroku will run yarn build (or npm run build depending on wether you used one or the other to generate your lock file).
In the end, here is what the package.json file might look like (using expo again):
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject",
"test": "jest --watchAll",
"build": "expo build:web"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"#expo/vector-icons": "^12.0.0",
"#react-native-community/masked-view": "0.1.10",
"#react-navigation/bottom-tabs": "^5.11.1",
"#react-navigation/native": "^5.8.9",
"#react-navigation/stack": "^5.12.6",
"expo": "~40.0.0",
"expo-asset": "~8.2.1",
"expo-constants": "~9.3.0",
"expo-font": "~8.4.0",
"expo-linking": "~2.0.0",
"expo-splash-screen": "~0.8.0",
"expo-status-bar": "~1.0.3",
"expo-web-browser": "~8.6.0",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
"react-native-gesture-handler": "~1.8.0",
"react-native-safe-area-context": "3.1.9",
"react-native-screens": "~2.15.0",
"react-native-web": "~0.13.12"
},
"devDependencies": {
"expo-cli": "^4.0.16",
"#babel/core": "~7.9.0",
"#types/react": "~16.9.35",
"#types/react-native": "~0.63.2",
"jest-expo": "~40.0.0",
"typescript": "~4.0.0"
},
"private": true
}
And the Procfile simply consists of a single line:
web: npx serve web-build
You could probably achieve similar results using reactxp instead of reac-native-web, but I never tried it myself.
Client side routing
Configuring Heroku for client side routing
If you use client side routing (react navigation for example), you will have to setup a few more things to make sure linking works. With the previous build alone, client side routing will fail (404 errors) because heroku will try to route requests on its own, but your app needs everything to end up at index.html so it can perform routing tasks on its own (client side routing).
We will thus prevent any Heroku routing by adding a second buildpack heroku-community/static next to heroku/nodejs. This second buildpack is configured via a /static.json file (default values):
{
"root": "web-build/",
"clean_urls": false,
"routes": {
"/**": "index.html"
}
}
Configuring webpack for client side routing
You probably already have this part setup because otherwise you would have 404 errors even locally. To allow client side routing it seems like we also need to configure webpack (output.publicPath and devServer.historyApiFallback), with expo this can be done by running expo customize:web and then editing /webpack.config.js with:
const createExpoWebpackConfigAsync = require('#expo/webpack-config');
module.exports = async function (env, argv) {
const config = await createExpoWebpackConfigAsync(env, argv);
config.output.publicPath = '/';
config.devServer = {
...config.devServer,
historyApiFallback: true,
};
return config;
};
There is a nice article about these routing issues you might have here: Fixing the 'cannot GET /URL'
Steps for deploying React native/expo app to heroku:
1:
set heroku buildpack as static: >heroku buildpacks:set heroku-community/static
2:
Add static.json for static buildtype:
{
"root": "web-build/",
"routes": {
"/**": "index.html"
}
}
More settings here: https://github.com/heroku/heroku-buildpack-static#configuration
3:
npm run build (package.json: "build": "expo build:web") --> Creates web-build folder
git add .
git commit
git push heroku master
heroku open

Resources