I am a relative beginner to working in Apostrophe. I'd like to start off by saying its a pretty great ecosystem and I've enjoyed the experience so far. However, I've run into an issue thats a bit confusing.
I've been using it to build a site for a client and I've run into a very odd issue. I have installed an instagram widget that I found via npm (https://www.npmjs.com/package/#kwsites/cms-instagram-widgets) and used it on my local host with relatively no issues, it worked and I moved on with my life.
However now I'm trying to deploy the site and the Instagram widget is not showing up in the browser when viewing on the server. Again the widget shows up perfectly fine in the browser when viewing off my local host which would indicate it did not install correctly on the server but after following all of the post install steps on the linked npm package, I am completely unsure of what to try next.
I have confirmed that the #kwsites package folder is in public/modules/ directory
Any help/tips from any of the Apostrophe experts out there would be appreciated.
I am using stagecoach for deployment (again, a great product) and mechanic to manage nginx. I don't know if any of this matters but the widget is making some API calls to Instagram, don't know if they would be affected by either of those tools.
EDIT: Inspection in safari yielded the following from my local host
And the following from my server
It just looks like the widget is not being generated and I cannot find any errors in the console. Note I can add and remove a widget, I just can't get any content to generate on the server (but can on local host).
So as noted in the comments, I believe the issue was due to instagram's legacy api requiring site authorization. However with Facebook pushing the new Instagam Basic Display API, the legacy is going to be killed at the end of this month anyway/apps will stop working. So I found this blog post and found it easily adaptable to an Apostrophe module. It requires signing up for Zapier but a basic account is free and its a really interesting tool. This solved my needs
Related
I'm using Express as the server and nodemon to reload that server on file changes. Works perfectly. But when I make a frontend change (i.e changing an html page or css, javascript, anything basically) I have to reload the browser manually. If you're like me, that isn't ok. I know of the vscode extension "Live Server", but I want it all to be in that one express server. I tried using the live-reload npm package, the app and the browser extension, but that didn't work out for me. I really don't want to have to start to use something like webpack just so I'm saved the effort of pressing Ctrl+R a couple times. Any recommendations? I still haven't learned React but I've heard that if you use React, then you'll have that live reloading feature. I'm actually currently developing a typescript website template, so that's what I want to use it for.
From what you've said and after a little searching maybe samuelgjabel/nodejs-hot-reload is what you're looking for?
It supports typescript and where you don't want to roll your own / learn webpack at the moment, this seems like it would keep things simple.
*disclaimer - I haven't used the library myself and cannot attest to it's security or quality.
update:
Regarding your comment response, My mistake I misunderstood.
This library works on the front-end providing the auto (CTRL-R) you're looking for. try this guide for connect-livereload
It seems to hook into express' connection event to signal the browser for a reload after nodemon has respawned the server instace. The guide shows how to implement it without a build tool like gulp/grunt.
I have a cross-platform Electron app in beta which I've developed for a client (I'm a contractor) and I just found out today that the app needs to work in a 3rd party's Citrix environment. I had no idea what that even was so I have been googling furiously for a few hours. That hasn't helped much so I thought I'd ask here. Sorry for the lame question.
The app is a tool for creating presentations. It accesses the local HD to copy digital assets into a current project folder. It also writes a JSON file to the project folder and some preferences to the "Application Support" folder. The app makes two network calls at startup: one to validate a user entered license key and the other to check for updates. The update is not automatic ("update in place"). The app also supports the copy/paste of text.
That's it. Is this something which will "just work" in a Citrix environment or do I need to do some sort of customization? None of the material I've found on Citrix describe this sort of basic compatibility (or if it did, I didn't understand it)
Citrix is a virtual machine, so if you just build your electron app and drop the executable in citrix it should do the job.
We used it in a company i used to work and we rarely(real special cases like really old softwares) had any issues in running any program that would run on windows in citrix.
https://en.wikipedia.org/wiki/Citrix_Virtual_Apps
here is what it actually looks like :
so you should be fine, no wories
I built my first javascript app using HTML and CSS as well. It is a basic tip calculator. I've pushed my code to my GIT but when i click on website deployed its just the README file. I have a feeling I need to use Node.js but after the basic reading I did on it I have no idea how to accomplish this. I just want to push the app to heroku or even just off the GIT page to see it in action on another device.
I tried running npm init and it created a package.JSON but every time i pushed to heroku the app would crash and give me an error stating it can not find the "start" script i input.
here's my github for the app, https://github.com/jaronow/tip-calculator. I would appreciate some basic guidance or a link to somewhere i can learn how to accomplish this task
You don't need to use Heroku for a one page web app like yours. You can host it directly on Github using GitHub Pages. You want to choose the "Project Site" instructions. Pay attention to selecting the "source" when you go through the steps. You'll want to specify your html/main.html file.
Also, looking at your code, you should consider renaming your "java" folder either "js" or "javascript" or something similar. Java is a different language and naming it that is confusing.
You do not need to use NodeJS for this project because there is nothing that runs on the server side. Everything runs in the browser: the HTML, CSS, and JavaScript.
In order to deploy to heroku , you would have to use Node and you will have to set up a basic server to serve your static assets such as the HTML , Images, and CSS.
To deploy or host your app you can use Github pages, I am not sure if you have ever heard of it.
Here is this link: https://pages.github.com/
on the page it should have a step-by-step guide on how to host it.
So I noticed when I ran my react app's production build's login screen from create-react-app that all of the source code for the app was available within the static/js folder. Basically, the code doesn't look any different from the code in my ide, on the production build.
I am wondering if there is a way to hide this behind a login screen? So that a user can't directly access these files unless the login is successful. I have looked around and was unable to find anything of use.
The js files from the production build should be minimized which would look a lot different than in your IDE. I assume what looks "the same" is looking at the source using developer tools. The solution for that is to not deploy the source map files (*.js.map). Those are the files that allow developer tools to transform the minimized code back to its original look.
Removing source maps makes it difficult for someone to learn from the code easily, but if there is sufficient motivation to do so, it can still certainly be reverse-engineered. There are also some parts that wouldn't be obfuscated much at all such as the URLs for API calls which would then give someone a lot more information to use as the basis for hacking attempts.
If you need to prevent seeing any version of the source for people that are not logged in, I would recommend building your app as two apps -- one that just contains the login portion and one with the rest. Code-splitting within one app won't do the trick (at least not without using a solution that is quite a bit more complicated to manage than the two-app option), because it just makes the download process lazy and it is still pretty easy for someone to determine what the other files are and download them. However, even splitting this into two apps only helps if you host the second app differently. This will require server-side protection that only serves the JavaScript files for the second app for a user that is logged in. This means either using a different sub-domain for the second app or at least a different directory on the server that has those protections baked in. How you would implement that protection depends on the details of your authentication approach and the technology stack being used on the server. Most likely, it means using a cookie set by the login process and then having the JS files for the second app served up by something that verifies the cookie before allowing the JS files to be served to the browser.
To overcome displaying your source code in production's build, try to build your app with
GENERATE_SOURCEMAP=false npm run build
I develop an angular-php web application which I have it running online, for different users, on 5 different subdomains, such us:
sub1.mydomain.com
sub2.mydomain.com
sub3.mydomain.com
sub4.mydomain.com
sub5.mydomain.com
Problem:
My problem is that I still develop the web-app local and whenever I change files(php, js,tpl.html,css or when add new ones) I have to upload them on each subdomain.
Question:
Is there a way/library/API whatever that I can use to make something like package (with the updated or new files) and just call it from each subdomain url , and make the appropriate updates?
Or should I just copy them to each subdomain?
Do I make myself clear, in other words just like on cms systems that we press the update button and we update a component/module.
If anyone knows a way of doing that please enlight me. Thanks.
I tried to depict what i mean.
What you are describing is called deployment.
There are a lot of ways to create a deployment mechanism so there is not a single answer to your question. Depends of the tools that you are using, the servers where your app is hosted, etc.
If not, I advise you to use Git to make versions of your app (with Github or Gitlab) and automate the deployment process when you push a new piece of code.
You can make your own scripts to deploy or use online services (surely what you need because of "systems that we press the update button").
I can't advice you one particular service but you would find what you need in Googling "deployment automation github".
I would do it with config files. Considering the code for all my substations is the same. I would have config for each sub-domain and fetch the core files from the same location but serving different data If your structure allows it.