Generated next js chunks does not load on local environment - javascript

I recently joined a project written with Next Js and Squidex CMS.
The problem is I am not able to run it (properly) on my local environment.
The chunks are not loading and the images are not visible
I tried 2 ways
1 - Running the project with the same scripts on production pipeline
- clean `node_modules` and `.next` directories
- run `yarn build`
- run `yarn start`
The build is always successful but when I try to run the build by yarn start it does not load some js chunks and assets (images in static folder)
They are throwing 404 error on the console (please see the image)
I compared the hashes and they are fine.
My next config file is pretty empty.
const optimizedImages = require("next-optimized-images")
const withPlugins = require("next-compose-plugins")
module.exports = withPlugins([
[optimizedImages, {
responsive: {
adapter: require('responsive-loader/sharp')
}
}]
],
)
I also tried with multiple next versions (9.5.0 and 10.1.3)

The issue was the directory name of the project.
Repository named like 'Some Project' and when you try to clone it via SSH provided from repository website, the directory on your computer will be like this : 'Some%20Project'
Example ssh command :
git#ssh.dev.provider.com:Some%20Project
In that case, node.js server able to start and there is no error on the console unless you launch your browser and try to react the localhost. Node.js is not able to serve files from the directory because of not supported string chars like %
This cost me a lot of hours to find out, hope it will help

Related

How to deploy node.js application in cyberpanel?

I have my application developed in node.js, and I have cyberpanel installed on my server. I have seen many examples of how to deploy a node application in cyberpanel, but I have doubts about how to view it from the browser.
So far I have the following configuration in vHost:
context / {
type appserver
location /FOLDER/FOLDER/PROJECT_FOLDER/dist
binPath /usr/bin/node
startupFile index.js
appType node
maxConns 100
}
My application runs perfectly on port 3000 when I run it by console, but I need to list it on port 80 with cyberpanel.
Does anyone have an idea how to do it?
try the following steps. Essentially, the error lies in selecting the root document folder and allowing access to the application.
Create a Website using the normal CyperPanel menu. [https://cyberpanel.net/docs/2-creating-website/]
Upload your Node.Js files into the public_html folder of the website.
Enter the Open Lite Speed panel via port :7080 (you would need to enable the port on the firewall)
Navigate to VH Hosts > Your Domain > Context
Select App Server, for location using $VH ROOT instead of the hardcoded path worked.
Additionally, don't forget to enable the site on access control via allowing all IPs (*).
context / {
type appserver
location $VH_ROOT/public_html/
binPath /usr/bin/node
appType node
startupFile server.js //this is the name of your
appserverEnv 1
maxConns 100
accessControl {
allow *
}
rewrite {
}
ad
See I am going to answer point to point to the question
First of all cyberpanel by default only takes app.js file as its core file to run the application.
Second, How to change that default file pointing ?
context / {
type appserver
startupFile index.js // **NAME OF YOUR STARTUP FILE**
location /home/PROJECT_FOLDER/public_html/dist
binPath /usr/bin/node
appType node
appserverEnv 1
maxConns 100
accessControl {
allow *
}
rewrite {
}
ad
location /FOLDER/FOLDER/PROJECT_FOLDER/dist
Note :- Things, I want to mention about this location parameter is this is the location to the your startup file, you will get it via file manager, as you cannot run typescript code directly here, you have to convert it into javascript using tsc command and further target dist folder using location parameter in vconfig file
Now next question is how to run application outside console ?
Create a website to deploy the project, use below link for reference click here
Issuing SSL for website - link for reference
This is my folder structure for deployment, simply zip all files and upload it on file manager of cyber panel, and extract out your files. You can see, I have dist folder which contains all javascript files and also have index.js, the main startup file.
Click on fix permissions on file manager.
Go to Web terminal and install node modules. how ?
on web terminal :- type cd .. and press enter.
There you have to find out your project from directory, You can use ls command to get list of files and folder structure.
mine directory was (after using cd ..) :- cd home/FOLDERNAME/public_html
At last run your project through terminal, to check its working.
Config your vhost config file, below is reference image
File you have to add in vhost config, I also had provided you above.
If you domain is setup correctly, you can view on api on your domain else you can click on preview button on cyber panel
Note :- Always Run code in terminal first to check its working.

How can I use ffplay from Electron.js app?

I've installed ffplay in my working folder (in bin subfolder) using ffbinaries (ffbinaries downloader). My current platform is linux-64.
I've use:
var spawn = require('child_process').spawn,
player = spawn('./bin/ffplay', ['http://path_to_video_file']);
but got an error in terminal stderr:
./bin/ffplay: error while loading shared libraries: libSDL2-2.0.so.0: cannot open shared object file: No such file or directory child process exited with code : 127
How can I get access from my javascript code to this binary for playing videos or how can I get ready-to-use binary which is a built-in for my Electron app?
...Or how can I get all of ffplay possibilities for playing videos inside Electron app?
Thanks in advance!
The error you get means that ffplay cannot find libSDL.
First, make sure the library is installed by opening a terminal window and typing:
sudo apt install libsdl2-dev
If it wasn't installed, try to run your program again after it was installed.
If you still have the problem, type the following in your terminal window:
export LD_LIBRARY_PATH="/usr/local/lib"
Try again to run your program. If the problem is now solved, edit the file etc/environment and add the setting there to make it permanent:
sudo nano /etc/environment
Add this LD_LIBRARY_PATH="/usr/local/lib" at the end, exit and save.
Hope it helps.

Building docker image task results in VSTS error

I'm following
this Microsoft tutorial on how to containerize and deploy an Angular application on Azure using Docker.
I'm running into a unique issue that is not addressed in the tutorial. Every time the build reaches the build an image task it fails with the following error.
2018-01-29T12:37:28.3169577Z [command]/usr/local/bin/docker build -f
/opt/vsts/work/1/s/Dockerfile -t iponam.azurecr.io/my-angular-app:197
/opt/vsts/work/1/s
2018-01-29T12:37:28.7630517Z Sending build context to Docker daemon
593.4 kB
2018-01-29T12:37:28.7639048Z
2018-01-29T12:37:28.7859042Z Step 1/3 : FROM nginx
2018-01-29T12:37:30.3172506Z latest: Pulling from library/nginx
2018-01-29T12:37:30.3188560Z e7bb522d92ff: Pulling fs layer
2018-01-29T12:37:30.3204163Z 6edc05228666: Pulling fs layer
2018-01-29T12:37:30.3219390Z cd866a17e81f: Pulling fs layer
2018-01-29T12:37:30.3279280Z cd866a17e81f: Download complete
2018-01-29T12:37:30.3294450Z e7bb522d92ff: Verifying Checksum
2018-01-29T12:37:30.3310189Z e7bb522d92ff: Download complete
2018-01-29T12:37:30.3511653Z 6edc05228666: Verifying Checksum
2018-01-29T12:37:30.3529571Z 6edc05228666: Download complete
2018-01-29T12:37:32.1518557Z e7bb522d92ff: Pull complete
2018-01-29T12:37:33.4982718Z 6edc05228666: Pull complete
2018-01-29T12:37:33.6163338Z cd866a17e81f: Pull complete
2018-01-29T12:37:33.6365600Z Digest:
sha256:285b49d42c703fdf257d1e2422765c4ba9d3e37768d6ea83d7fe2043dad6e63d
2018-01-29T12:37:33.6540818Z Status: Downloaded newer image for
nginx:latest
2018-01-29T12:37:33.6558500Z ---> 3f8a4339aadd
2018-01-29T12:37:33.6577887Z Step 2/3 : COPY dist /usr/share/nginx/html
2018-01-29T12:37:33.6595536Z COPY failed: stat
/var/lib/docker/tmp/docker-builder545265281/dist: no such file or
directory
2018-01-29T12:37:33.6780204Z ##[error]COPY failed: stat
/var/lib/docker/tmp/docker-builder545265281/dist: no such file or
directory
2018-01-29T12:37:33.6855716Z ##[error]/usr/local/bin/docker failed with
return code: 1
Per the tutorial, this is running on a hosted linux agent that I cannot access to examine folder structure. Essentially what's happening is my Dockerfile (below) is pulling an nginx image, building the angular application with ng build prod and then I try to COPY the dist folder into the /usr/share/nginx/html. Here's the Dockerfile, it's identical to the one in the tutorial as well:
FROM nginx
COPY dist /usr/share/nginx/html
EXPOSE 80
I have spent countless hours trying to debug and understand the issue. Any help will be tremendously appreciated. Thank you!
Update
After run build is executed successfully I don't see where the dist directory is outputted to. I checked every single place on the machine with no luck. On my local machine the dist will appear in the root of the project folder.
Using this command instead in NPM build task (Command and arguments):
run build -- -op dist
okay, first off all, you can examine the folder structure, you can add a Shell script step before docker build and do something like ls -Rla, which is a hack, undoubtebly, but a working one.
As for you error, it indicates that there is no such file (dist) under the working directory. Again, what you could do is verify this file is in the root of the repo or use the ls hack to locate the file. You should also check that you didnt change the default working directory of the docker build step. If you did you need to specify path to dist file relative to the working directory.

Run command in `before_migrate.rb` as user with sudo privileges with AWS OpsWorks

In my Rails app, I'm trying to run a gulp task during deployment, which adds a css file to a directory inside the public directory. In the deployment log, I see that the task runs successfully, but when I SSH into the server, I don't see the file.
[2016-09-24T01:35:02+00:00] INFO: Processing execute[create critical css] action run (/srv/www/toaster/releases/20160924013146/deploy/before_migrate.rb line 43)
[2016-09-24T01:35:03+00:00] INFO: execute[create critical css] ran successfully
While I'm connected to the server via SSH and change my user to the deploy user with sudo su deploy and then run the gulp task, the file gets create.
What am I doing wrong?
The line in before_migrate looks like this...
execute 'create critical css' do
user 'deploy'
cwd release_path
command 'gulp criticalCss'
end
The task in my gulpfile looks like this...
gulp.task('criticalCss', function() {
glob('./public/assets/theme_templates/v3/application-*.css', function(err, matches) {
var full_css = matches[0]
penthouse({
url : 'http://performance-site.s2.fanbread.com/blogs/performance-benchmark',
css : full_css,
width: 375,
height: 667
}, function(err, criticalCss) {
console.log(err)
fs.writeFile('./public/assets/theme_templates/v3/posts_show.css', criticalCss); // Write the contents to a jekyll include
});
});
});
Thanks
The usual solution for Chef would be to turn the log level up to DEBUG to see the command output. No idea how you do that with current Opsworks. Most of the time these issues are either related to an environment variable like $HOME not being set or that gulp isn't being found correctly.
As a side note, I do not recommend using the deploy resource anymore. A normal git resource is probably better in general. See my application_examples cookbook for an example of a more modern Rails deployment with Chef.

Heroku(Cedar) + Node + Express + Jade Client-side javascript files in subdirectory work locally with foreman+curl but not when pushed to Heroku

I am very new to node and heroku and I suspect this is some kind of simple permission issue etc, but I can't seem to track it down.
I have several pure javascript files in a sub-directory one level beneath my root directory where my web.js file is sitting. I have a line in my web.js file to specify the directory
app.use('/heatcanvas',express.static(__dirname+'/heatcanvas'));
If I run my app locally with Heroku Foreman I get the expected js response when I run the following curl command
curl localhost:5000/heatcanvas/heatcanvas.js
However when I push to Heroku and hit the corresponsing live url in the browser
www.example.com/heatcanvas/heatcanvas.js
I receive the following:
Cannot GET /heatcanvas/heatcanvas.js
If I check Firebug and/or the Heroku logs I see I am actually getting 404 errors for those files even though the pathing should match what is being done locally. It is also worth mentioning that third party javascript is coming over just fine, it is only when the src attribute of the script tag points to my site that there is an issue. What do I need to do to get my scripts to be available?
I recommend you to use process.cwd() value to get specific directory
process.env.PWD = process.cwd()
at the very beginning of your web.js
let you access files easily.
You can do
app.use('/heatcanvas',express.static(process.env.PWD+'/heatcanvas'));
instead of using
__dirname
Warning: Make sure to execute web.js at the root directory of web.js (Heroku web.js are executed that way)

Categories