Develop Reference

We're sorry but sf doesn't work properly without JavaScript enabled. Please enable it to continue

I have a Vuejs app that makes an Axios call. I Dockerized it and used digitalocean to serve it to the cloud. App is working but after any axios call, i am getting "We're sorry but sf doesn't work properly without JavaScript enabled. Please enable it to continue." as response.
-I have tried changing the port from 8080 to 8081, running the app on incognito browser tab, changing "baseUrl" with "baseURL" and in front-end docker file i was installing libraries with npm, i also tried to use yarn but i still have this issue.
Is there any more idea about how to fix it ?
main.js file
createApp(App)
.use(store)
.use(vue3GoogleLogin, {
clientId:
"******",
})
.component("font-awesome-icon", FontAwesomeIcon)
.component("MazBtn", MazBtn)
.component("MazInput", MazInput)
.component("MazPhoneNumberInput", MazPhoneNumberInput)
.component("Datepicker", Datepicker)
// .component("VueGlide", VueGlide)
.use(router)
.mount("#app");
Frontend Docker file ;
#Base image
FROM node:lts-alpine
#Install serve package
RUN npm i -g serve
# Set the working directory
WORKDIR /app
# Copy the package.json and package-lock.json
COPY package*.json ./
# install project dependencies
RUN npm install
# Copy the project files
COPY . .
# Build the project
# Build the project
RUN npm run build
# Expose a port
EXPOSE 3000
# Executables
CMD [ "serve", "-s", "dist" ]
Backend docker file
FROM python:3.10-bullseye
# Working directory
WORKDIR /app
# Copy the dependencies
COPY ./docs/requirements.txt /app
# Install the dependencies
RUN pip3 install -r requirements.txt
# Copy the files
COPY . .
WORKDIR /app/backend
ENV FLASK_APP=app.py
# Executable commands
CMD [ "python3", "-m" , "flask", "run", "--host=0.0.0.0"]
vue.config.js file ;
const { defineConfig } = require("#vue/cli-service");
module.exports = defineConfig({
transpileDependencies: true,
devServer: {
compress: true,
host: "127.0.0.1",
proxy: {
// "/upload/img": {
// // target: "http://127.0.0.1:9000",
// target: "http://127.0.0.1:5000",
// },
"/api": {
// target: "http://127.0.0.1:9000",
target: "http://127.0.0.1:5000",
},
"/media": {
target: "http://localhost:8000",
},
"/http-bind": {
target: "https://localhost:8443",
logLevel: "debug",
},
},
// https: true,
// watchContentBase: false,
},
});

Your backend requests are being handled by the frontend app. It looks like you are relying on the development server's proxy functionality in order to forward them to the backend, but this will (and should) not be active when you deploy your app. Instead you will need another proxy that sends /api requests to your backend and other requests to your frontend.

rails with vuejs net::ERR_ABORTED 404 (Not Found)

for the past 6 months we struggling with a issue in loading our app page in local development.
we getting blank pages with net::ERR_ABORTED 404 (Not Found) in the console logs.
after a few refresh the page loads.
this is very faustring.
our development is: Rails 5.0.7.2 + vuejs 2 with webpack webpacker#4.2.0.
can it be solved? thank you!
package.json
"engines": {
"node": "^10.#",
"yarn": "^1"
},
"resolutions": {
"vue": "2.#.#",
"vue-template-compiler": "2.#.#",
},
"scripts": {
"start": "./bin/webpack-dev-server",
},
webpacker.yml
default: &default
source_path: app/javascript
webpack_compile_output: true
source_entry_path: packs
public_output_path: packs
cache_path: tmp/cache/webpacker
public_root_path: public
# Additional paths webpack should lookup modules
# ['app/assets', 'engine/foo/app/assets']
resolved_paths: ['app/assets']
compile: false
# Reload manifest.json on all requests so we reload latest compiled packs
cache_manifest: false
# Extract and emit a css file
extract_css: false
development:
<<: *default
compile: true
# Verifies that correct packages and versions are installed by inspecting package.json, yarn.lock, and node_modules
check_yarn_integrity: false
# Reference: https://webpack.js.org/configuration/dev-server/
dev_server:
https: false
host: 0.0.0.0
port: 3040
public: 0.0.0.0:3040
hmr: true
# Inline should be set to true if using HMR
inline: true
overlay: true
compress: true
disable_host_check: true
use_local_ip: false
quiet: false
headers:
'Access-Control-Allow-Origin': '*'
watch_options:
ignored: '**/node_modules/**'
test:
<<: *default
# Compile test packs to a separate directory
public_output_path: packs
testing:
<<: *default
# Compile test packs to a separate directory
public_output_path: packs
staging:
<<: *default
# Production depends on precompilation of packs prior to booting for performance.
compile: false
# Extract and emit a css file
extract_css: true
# Cache manifest.json for performance
cache_manifest: true
app:
<<: *default
# Production depends on precompilation of packs prior to booting for performance.
compile: false
# Extract and emit a css file
extract_css: true
# Cache manifest.json for performance
cache_manifest: false

Use rm -rf public/packs to delete /packs, and then restart the webpack dev server bin/webpacker-dev-server. I think it would be fine.
I think it's just inconsistency of the compiles files which I ran into several times.
You can check the [project root]/public/packs. I guess it would be very possible for the files the browser requesting are not there. In more details, the entry points in [project root]/public/packs/manifest.json is not consistent with the files in the same folder.
"entrypoints": {
"desktop": {
"js": [
"/packs/desktop-7547483.....js" // it cannot find this file in the folder
],
// ...
}
Removing them all and compiling them again is the easiest way to solve that.

Why is my React App not serving with PM2?

I am trying to run my React App with PM2 on an Ubuntu server. It has been running fine for years before today, and suddenly it stopped.
The one change I made today was that I reset my root password. But I can't think why that would make a difference.
I have created the app build.
If I just serve the app from the root directory of the application with serve -s build it serves correctly.
Then I try to serve the file using PM2 with a file 'ecosystem.config.js' that in my server root directory. This is the module:
apps : [{
name:'myapp',
script: '../../var/www/myapp',
interpreter : 'none',
args: 'sudo serve -s build',
watch: true,
env: {
NODE_ENV:'development',
},
env_production : {
NODE_ENV: 'production'
}
}]
}
I run pm2 restart all and it seems to restart, but then it errors.
The log shows the following:
at WriteStream.emit (events.js:210:5)
at internal/fs/streams.js:299:10
at FSReqCallback.oncomplete (fs.js:146:23)
Error: Cannot find module '/var/www/myapp'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:794:15)
at Function.Module._load (internal/modules/cjs/loader.js:687:27)
at /usr/local/lib/node_modules/pm2/lib/ProcessContainer.js:297:23
at wrapper (/usr/local/lib/node_modules/pm2/node_modules/async/internal/once.js:12:16)
at next (/usr/local/lib/node_modules/pm2/node_modules/async/waterfall.js:96:20)
at /usr/local/lib/node_modules/pm2/node_modules/async/internal/onlyOnce.js:12:16
at WriteStream.<anonymous> (/usr/local/lib/node_modules/pm2/lib/Utility.js:186:13)
at WriteStream.emit (events.js:210:5)
at internal/fs/streams.js:299:10
at FSReqCallback.oncomplete (fs.js:146:23)```
Thank you for any ideas.

How to change webpacker in Rails to watch for changes outside of packs folder?

I want hot module reload to reload changes in my JavaScript/React files
I was going through webpacker development documentation
In that it says
This process will watch for changes in the app/javascript/packs/*.js
Now, I want to watch for changes outside of the packs project as well or in the entire javascript folder and also need to include .jsx file.
I am not sure how I can do it.
This is my webpacker file:
#!/usr/bin/env ruby
ENV['RAILS_ENV'] ||= ENV['RACK_ENV'] || 'development'
ENV['NODE_ENV'] ||= 'development'
require 'pathname'
ENV['BUNDLE_GEMFILE'] ||= File.expand_path('../../Gemfile',
Pathname.new(__FILE__).realpath)
require 'bundler/setup'
require 'webpacker'
require 'webpacker/webpack_runner'
APP_ROOT = File.expand_path('..', __dir__)
Dir.chdir(APP_ROOT) do
Webpacker::WebpackRunner.run(ARGV)
end
And this is my webpacker dev server file
#!/usr/bin/env ruby
ENV['RAILS_ENV'] ||= ENV['RACK_ENV'] || 'development'
ENV['NODE_ENV'] ||= 'development'
require 'pathname'
ENV['BUNDLE_GEMFILE'] ||= File.expand_path('../../Gemfile',
Pathname.new(__FILE__).realpath)
require 'bundler/setup'
require 'webpacker'
require 'webpacker/dev_server_runner'
APP_ROOT = File.expand_path('..', __dir__)
Dir.chdir(APP_ROOT) do
Webpacker::DevServerRunner.run(ARGV)
end

I not sure that I completely understand you question, but I was stuck with problem that default rails webpack server rebuild each .js(x) files changes and that took long time in development. I solved it by use gem foreman
Install foreman
Create Procfile.dev in project root
web: bundle exec rails s -p 3001
webpacker: ruby ./bin/webpack-dev-server
my webpack-dev-server
#!/usr/bin/env ruby
ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development"
ENV["NODE_ENV"] ||= ENV["NODE_ENV"] || "development"
require "pathname"
ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile",
Pathname.new(__FILE__).realpath)
require "rubygems"
require "bundler/setup"
require "webpacker"
require "webpacker/dev_server_runner"
Webpacker::DevServerRunner.run(ARGV)
And run project with foreman
foreman start -f Procfile.dev -p 3000
After that - webpack do not build each changes and take less time to reload code changes
Also you can update your webpacker.yml
# Note: You must restart bin/webpack-dev-server for changes to take effect
default: &default
source_path: app/javascript
source_entry_path: 'packs'
public_output_path: 'packs'
cache_path: tmp/cache/webpacker
# Additional paths webpack should lookup modules
resolved_paths: ['app/javascript/src']
# Reload manifest.json on all requests so we reload latest compiled packs
cache_manifest: false
extensions:
- .jsx
- .js
- .sass
- .scss
- .css
- .module.sass
- .module.scss
- .module.css
- .png
- .svg
- .gif
- .jpeg
- .jpg
development:
<<: *default
compile: true
# Reference: https://webpack.js.org/configuration/dev-server/
dev_server:
https: false
host: localhost
port: 3035
public: localhost:3035
hmr: false
# Inline should be set to true if using HMR
inline: true
overlay: true
compress: true
disable_host_check: true
use_local_ip: false
quiet: false
headers:
'Access-Control-Allow-Origin': '*'
watch_options:
ignored: /node_modules/
production:
<<: *default
public_path: <%= ENV['ACTION_CONTROLLER_ASSET_HOST'] %>
# Production depends on precompilation of packs prior to booting for performance.
compile: false
# Cache manifest.json for performance
cache_manifest: true

webpack watch doesn't trigger

I run webpack with native file system (inotify) support,
also tested with chokidar and it correctly picked up all changes to files on that filesystem/folder.
The webpack configuration in Sage 9 WordPress base theme is used (https://github.com/roots/sage/blob/c21df9965ff8217c3b4ff90bbe6099206d7b4fbf/resources/assets/config.json#L16).
Only the PHP files are listed for being watched on - but their dependencies (SCSS/JS/...) are also watched?
I start webpack watch with npm/yarn package script that starts webpack with
$ webpack --hide-modules --watch --config resources/assets/build/webpack.config.js
Webpack is watching the files… [BS] [HTML Injector] Running... [BS] Proxying: http://dev:8084 [BS] Access URLs: ---------------------------------- Local: http://localhost:3000 External: http://127.0.0.1:3000 ---------------------------------- UI: http://localhost:3001 UI External: http://127.0.0.1:3001 ---------------------------------- [BS] Watching files...
However, changing files - even just the PHP files specified in watch array above - doesn't trigger any update by webpack.
What config could be missing? Are there any ways finding out what exactly is webpack watching - and whether it really detects a change (and just ignores it) or not?

The reason was CORS, the script that should load new webpack builds is blocked by browser due to CORS restrictions. It is possible to configure browserSync to send proper headers for CORS, also see https://discourse.roots.io/t/sage-9-browsersync-not-loading-any-css-at-all-on-yarn-run-start/11332/26 .
new BrowserSyncPlugin({
target,
open: config.open,
proxyUrl: config.proxyUrl,
watch: config.watch,
delay: 500,
advanced: {
browserSync: {
cors: true,
},
},
}),