Problems with public directory when deploying Node.js app with Heroku - javascript

I've been working on an app which will feature a Timelinejs (open source js library) element on the client side. I copied the Timelinejs library into my public/javascripts/ directory of my app. Then I linked it in my html header. When I serve my app up locally everything works fine with the timeline. However, I noticed that when I deployed my app to Heroku it wasn't loading my timeline. Using chrome js console I discovered that it didn't find my files in the public/Javascripts/Timelinejs folder. Using the Heroku run bash command I discovered that none of my Timelinejs files were present in the file structure, although an empty Timelinejs directory was present. Is there any command or configuration I need to specify to get these files to my Heroku deployment?

Heroku has a readonly file system. The directory where you can write are ./tmp or ./log. You can't write inside the public folder.
That's because of how they manage their dynos and the way to scale them. If you want to store something, use the ./tmp or, recommended, a s3 bucket. (as I presume 'tmp' stands for 'temporary' :D)
More info here: https://devcenter.heroku.com/articles/read-only-filesystem

Related

One of my js files is not being bundled in my production build (dist folder)

I am creating a Vue app (using Vite), and I like to have my .js functions in different files inside a scripts folder. I have started recently so for the time being I only have one .js file appart from the main.js that comes with Vue.
When I build the application to deploy it, it seems that this .js file is not included in the bundle, so the deployed app cannot use it's functions.
How could I make the npm run build command include this local .js file that I am using (and it works when running the app in localhost), so that the deployed app works as expected? Am I missing something in where local files should be put inside the project files tree?
I have checked other questions regarding this, and also the official documentation, but maybe due to my lack of experience with Vue I haven't found the answer or haven't understood it.

App to access file system and run in browser

I am willing to make a portable app using HTML CSS JS and similar languages that doesn't need any installation and can be accessed via a browser.
The app should be able to access the file system and create, write and delete files.
The required files will be on the local machine.
I have tried
Applets but the performance is too inconsistent and depends on browsers.
I have also tried using electron but the end result needs installation (correct me if I am wrong)
I am open to all suggestions
Electron's apps can be portable. Copy the electron build resulted folder into a pendrive and execute the main .exe file from there. Everything should work

Heroku nodejs pathing issue... Error: ENOENT: no such file or directory

I have a nodejs application using hapi.js and I'm trying to download an image from a url. Heroku is giving me errors with the pathing.
My code:
Request(uri).pipe(fs.createWriteStream(__dirname+'/../public/images/'+filename)).on('close', callback);
My errors:
Error: ENOENT: no such file or directory, open '/app/../public/images/1430540759757341747_4232065786.jpg'
My file structure is simple:
app.js
-public
-images
-sampleimage.jpg
-videos
-samplevideo.mp4
-audio
-sampleaudio.wav
As you can see the __dirname for heroku application is /app. I've tried using __dirname+'all sorts of pathing ../ ./ etc' and I've also tried it without __dirname.
I will be creating a lot of these files using ffmpeg and a speech tool. So could anyone explain to me what kind of problem I am having? Is it something that can be solved by using the correct path name or is it my hapijs server configurations that I need to configure?
You just have the wrong path in your project.
On Heroku, you can't write to the folder BELOW the root of your project.
In your case, your code is running in app.js, which is in the 'root' folder of your project.
So, on Heroku's filesystem, this means your project looks like this:
/app
/app/app.js
/app/public
/app/public/images
...
Heroku puts all your code into a folder called app.
Now, in your code pasted above, you show:
Request(uri).pipe(fs.createWriteStream(__dirname+'/../public/images/'+filename)).on('close', callback);
If this code is running in your app.js, it means that by going BACK a folder (eg: ..), you're trying to write to a non-writable part of Heroku's filesystem.
Instead, you want to write to:
Request(uri).pipe(fs.createWriteStream(__dirname+'/public/images/'+filename)).on('close', callback);
This will correctly write your file into the images folder like you want.
HOWEVER
Here's where things are going to get complicated for a moment.
On Heroku, you can indeed write files to the filesystem, but they will DISAPPEAR after a short period of time.
Heroku's filesystem is EPHEMERAL, this means that you should treat it like it doesn't exist.
The reason Heroku does this is because they try to force you to write scalable software.
If your application writes files to your webserver disk, it won't scale very much. The reason why is that disk space is limited. Each web server has its own disk. This can lead to confusing / odd behavior where each webserver has a copy of the same file(s), etc. It just isn't a good practice.
Instead: what you should do is use a file storage service (usually Amazon S3) to store your files in a central location.
This service lets you store all of your files in a central location. This means:
You can easily access your files from ALL of your web servers.
You can have 'reliable' storage that is managed by a company.
You can scale your web applications better.
The folder you hosted on heroku is considered as "app" which you can see from the error you got. I m commenting this after 5 years just to let future viewers know. If any folder is empty, it is not pushed to github or heroku when you pushed the entire project as the folder is empty.
When we try to access a folder which is empty initially, we get the above error as the folder is not pushed in the first place. So, if you want to get rid of the error, place a temp file of any type ( I used a txt file) and push the code. Now the error won't be there anymore as this time the folder is pushed and it can access it.

react-static-boilerplate can't run index.html without node (but it works on aws s3)

I'm trying to run the react-staic-boilerplate on my local machine without using node, by opening the index.html file under public folder (after running yarn build/npm run build).
When I double click the index.html to serve on chrome, inspector tells me that the pathing to /dist/main.xxxx.js is wrong - which is fine, I go and manually fix the pathing error inside index.html. But then index.html instantly redirects me to the 404 page, telling me that Pages xx cannot be found. I tried debugging in vain but there's 30k lines of code after webpack compiled the whole thing.
Why is this the case? Shouldn't the buillt static files work on chrome without relying on serverside technology(node)?
I mean, index.html works fine when I upload the entire public folder onto aws s3. The mainpage, links, everything works after I point the entry point on s3 as index.html.
So if I'm understanding this correctly, aws s3 simply serves files, and if it works on s3, it should work on local machine (without node, since react-static-boilerplate can be pure clientside without relying on server).
Will anyone help me out? The backend teamlead refuses to approve any sort of react boilerplate unless we can prove to him that it runs on chrome clientside 100% without using node/serverside assistance.

NodeWebkit - deploy the application

I have one code base for both Web and NodeWebkit (NW) application.
I use the following stack:
- React
- Hapi
- Sequelize
- Windows environment
Web version of the application uses MySQL, while NW uses Sqlite. It all works fine. I have config file that compiles application for what I need (web or NW).
The problem that I face now is how to deploy the NW application. Idea is to provide NW applicaiton to a client, where he will open it clicking the icon.
Since I use the Node for the NW version, and the application uses many modules which are stored in node_modules, I face a challenge how to pack it all up.
My idea is to make an Windows installer. User will click it and the installer will extract all files to the destination. And also make an icon on the user desktop to run it.
Problem is with the Windows file name limitation. Inside the node_modules, there are many subdirectories that simply violate the Windows limitation. I cant even copy the node_modules folder. I cant even delete it. Well sure I can copy it If I zip it... or remove manually long folders.
I have not yet started working on the installer, but I am thinking I will hit the wall with this approach.
Does anyone have an idea how to make this deployment?
How can I integrate NPM3 in NW?
My plan now is to make Windows installer. That windows installer will install normally application files. The node_modules will be zipped previously and placed inside the installer. Installer will then simply unzip it to the destionation folder.
I will post my progress here.
Some update here.
Main issue here was the depth of the node_modules. I have many modules in node_modules, and after some thinking I figured out there is a simple rule there. Some modules are server side modules, while other ones are used by react.
And since Webpack already creates a huge files in which all of the modules are already included, I simply do not need them at all.
So I have removed all front end side modules(babel modules, react-*), and left only server side (Hapi, sequelize...). Miracle happened, application run and was much faster at the startup.
I am going to use Inno setup to make a manifest file, and it should be good to go.
I am still not out of the danger zone, as developer might need a server side module, which has huge depth. But I will think about that if it happens.
More to follow...
actually in nodejs you can do the following:
1-Create another folder inside your project folder for example "server_modules"
2-In the created folder create another package.json file and install any modules needed for server out there
3-All these modules will be accessible as normal node_modules using require('module_name') and you can delete "server_modules" folder when you package your desktop version if you don't need it
Note: this approach used by some developers to achive micro services in nodejs but it is useful in your case

Categories

Resources