I have a problem with using routes in my application, it is a template built using Shopify CLI, React and Shopify App Bridge guided by this documentation here.
Every route I trigger does get sent to the _app.js file within my project as I can log most of the output in the console, but I can't get it to actually include paths of subpages in my apps like https://{apphost}/custompage will not navigate to custompage but an error handler and the custompage gets included in the query. The route and pathname fields of the props return
{
...
router: "_error",
pathname: "_error ",
...
}
instead of
{
...
router: "custompage",
pathname: "custompage",
...
}
I expected the above to be the result but it isn't. But the custompage url does however appear in the asPath field like this asPath: "/custompage?hmac={hmac}&host={host}&shop={shop}" pretend everything in {} has actual information.
The query field gets the fields it needs as it does on a working page. So the main issue is just routing.
With this in mind I have concluded that maybe I have issues on my side and triggering the server side routes handler, but I do not know where to start redirecting to exact pages instead of the index page that came with the boilerplate code. And I looked on their documentation but they skip most parts that are required to actually explain handling routing with their boiletplate codes. I do not want to edit major functions because I am worried they might stop the whole app from working but I need to be able to handle routes on the app without getting the An unexpected error has occurred. error when trying to route to subpages. Even extensions to whitelisted urls within my app trigger that error, so I think I need help with adding routing to the app or server.
Can anyone help me figure out what I am missing?
I am still new to Shopify but I can say that working with Shopify is a nightmare.
I am not sure if this is the final solution but for now this works: make sure that all the files you are trying to route to have the same naming as your path.
If you are routing to https://{appURL}/subpath then your JS file should be subpath.js . I currently can only get it to work if the file is in the same folder as my _app.js. If I move the file from ./subpath to /dir/subpath then I need to change the extension to https://{appURL}/dir/subpath in my Shopify app settings. It seems to operate relative to the _app.js file's location so keep that in mind.
If you used the Shopify CLI and shopify node create to create your app then this could help with your routing 400 headache.
I have used express.static() for getting images from folder. In that folder, image is getting uploaded dynamically. After uploaing image to folder I am not able to access that image from browser. I can access image only after reloading node server. Could you please support me to solve this issue without reloading node server. I have disable etag also. My code is
this.app.use(express.static(path.join(__dirname, "./public"),{etag: false}));
I work on an webapp which use REACT JS (with NODE, port 3000) and an API (with NODE JS, port 3100).
All requests made by client passing throught my API.
In this app, client could be able to listen mp3s downloaded and stored into my API. I made different schemas but I don't know which one can work.
SCHEMA 1.
REACT send parameters to API
API download the file and store it on a temporary directory
API send the URL (like : http://localhost:3100/sound/exemple.mp3) to REACT
REACT use that URL in 'src' of the AudioPlayer
Temporary files are delete with a CRON setting up on API server
I tried that solution but I have an error when I want to play the sound
(error: Can't GET /URL)
SCHEMA 2.
REACT send parameters to API
API download the file and store it on a temporary directory
REACT download the file from API and store it into public directory (by using express static)
REACT use that URL in 'src' of the AudioPlayer
Delete the file twice (API and REACT)
Another solution is to download the file directly from my source on REACT. But I need to hide the URL of the source (that why I pass throught my API).
Maybe there are others solutions ?
I am developing a node express web application and I am trying to figure out how to display private s3 images when performing a query or single request for an image to views for proper html rendering. I've looked around and didn't find enough information to fully wrap my head around this.
To reiterate, I cannot publicly host them. They have to be privately stored and retrieved when a user uses my express app. I've tried knox which is great for piping, but I don't know how to display all images in one go to a query results page for example. Or more importantly, how to show the raw image data recieved from knox. I also read some stuff about Amazon CloudFront and all that stuff, but would like to exhaust some closer options than doing more and more configuration.
So, how can I view these private s3 images from an express web app? More specifically, displaying a collection of images or a single image.
So if your goal is to have the server fetch the images and then send them to the client, it looks like knox should be able to help you:
from their Github page, with tweaks:
app.get('/img/:filename', function(req, res){
client.getFile('/whatever/' + req.query.filename, function(err, s3res){
s3res.pipe(res)
});
}
Note: untested.
I tried searching the web for a node module that can access the client's localStorage but wasn't able to find anything. Anyone know of one?
You can use :
node-localstorage npm module to use localStorage at the nodejs server side.
var LocalStorage = require('node-localstorage').LocalStorage,
localStorage = new LocalStorage('./scratch');
If you mean html 5 localStorage, there's no such a thing since node.js is a server-side technology. Html 5 localStorage is a client side feature supported
When the page loads, send a post that queries the contents of the client's localStorage.
Found this store
// Store current user
store.set('user', { name:'Marcus' })
// Get current user
store.get('user')
// Remove current user
store.remove('user')
// Clear all keys
store.clearAll()
// Loop over all stored values
store.each(function(value, key) {
console.log(key, '==', value)
})
LocalStorage is never accessible by the server. Ever. It would be a huge security issue.
If you need to send it to a server, then you have to have a client-side JS script which retrieves it, and then sends it to the server as part of an Ajax or POST request.
Cookies work well for when you need to pass small amounts of data regularly between server and client.
Databases on your server are best if you need to store data long-term.
For Node.js you can use HandyStorage, a fast and small npm package which behaves data like a state
Here's an example:
const HandyStorage = require('handy-storage');
const storage = new HandyStorage('./store.json');
storage.setState({
name: 'Alireza',
lastname: 'Sh',
friends: [
'Jane',
'John'
],
visited: storage.state.visited || 0
})
storage.setState({
visited: storage.state.visited + 1
})
It automatically changes the JSON file, just give it a try!
In the JS file you write this:
const LocalStorage = require('node-localstorage').LocalStorage,
localStorage = new LocalStorage('./scratch');
Also you need:
open new Terminal press Control + C (don't worry it's for clear not for copy) and type you'r file.js (for ex: server.js) and than type this: npm i node-localstorage (now you all set).
Well, I think some explanations are in handy, first of all, node JS and V8 are two different things and runs on different places. Browsers uses the v8 engine to run JS, node JS runs on servers and is v8 based, but it doesn't have everything that the browser does (like the window object). So you can't access the browser local storage from your server because it's running somewhere (browsers runs on the user machine) else, I think that you want a lib that works like local storage but in your node js serve, for that we have store -> https://www.npmjs.com/package/store.
I'm From 2022 and yet there is no way we can instantly get the browser's localStorage without using fetch or ajax to communicate to the server but if you use react or veu for instance they can access it. Because they are frontend base libraries and frameworks
We can not save to localStorage on Node.js.