I would like to know how to make my Next.js file work on every computer without having to reinstall all my modules.
Basically, I have my folder, nextjs-node, containing the following folders:
components
lib
public
node_modules
page style
package.json
I'd like to know if there is something I could do to create an icon on which I can just click to launch my website without have to go to the folder in my terminal and type npm run dev .
As a heads up, stack overflow is more for asking specific questions rather than general project approaches, as a result this will most likely be flagged eventually.
However to answer your question:
So next just creates a framework for websites which means that what you want to do isn't quite possible however there are a couple of options here:
You want to have an executable that launches your platform as an electron app. An example could be done with: https://github.com/saltyshiomix/nextron
You can always just host this as a website, and users can use shortcuts to just link over to the site in a web browser.
You can make your site a progressive web app where the user can save your site locally (however you will still need to do option 2).
Related
Is it possible to run a js file locally that downloads a secondary file and then run the latter?
I know the best thing would be to download the file from the server and save it locally, I would just like to understand if there is still the possibility to do the above.
Example:
Open terminal
1- node index js
2 - download scripts js in the same directory as index.js
3 - download is complete, start script js automatically.
Even if it is possible to solve it with Node.js workarounds (like requireing your puppeteer script from an url etc.) I strongly suggest to use Git with your team to share the latest version of your script. Version control is a must in modern software development, especially if you are working in a team. By learning the 6-7 most basic git commands you can solve almost everything you need for the current use case.
There are many good tutorials how to get started with git, I recommend GitHub's https://try.github.io.
Of course: you need to convince your team to embrace the change, or in better case they are already using it for version control, so it will be familiar to them.
You will need to:
Install Git locally;
Create a new repository on a server where you can store the latest stable versions of all your scripts (if it is not an open source project make sure it is private! GitLab, GitHub and Bitbucket provides/hosts free private repositories that will suit your needs);
Share the HTTPS (or SSH) URL of the repository with your team (e.g.: https://github.com/.../puppeteer-scripts.git) which they can clone;
Make sure your changes are pushed to the remote git repository;
Your team can pull the latest changes to their local computer (it will be their responsiblity to check if there were changes in the scripts, but you can notify them as well - there are automatic notifications if one starts to "watch" a git repository);
Lastly
Git can be frightening at first sight, but it can be learned in a few days and it makes code sharing smooth within your team.
One of Git's tagline describes very well why it will solve your problem:
--everything-is-local
Let's say I have a HTML/JS application, which is on a website and runs without any server-side component (except the web server, of course). So it's basically just a bunch of .html, .css and .js files (and some others, like images or SQLite databases)
Someday, an user comes to me to ask me if I can make an offline version, so they can access the app when they are offline.
My first reaction would be to provide them all the files of the app in a .zip file or something, but this is not really good: it's not "clear" to an average user, and the files and code are apparent (which could be "dangerous" if the user edits or deletes them by accident).
So I was wondering: is there a kind of format that would makes me able to store the files of the app in a packaged file?
The file would be something like a .zip file, but when you click to the file, instead of opening up the archive, it opens the /index.html (or similar) which is inside.
So for the user, it would be similar to open an .exe or a single .html file, but still that's not a native app, as that's still a browser app.
Given that I know about:
Apache Cordova; but most of the time, I just use the browser functions, and I don't have a need to use advanced native functionalities;
UWP and PWA, but I don't know if it's exactly what I want (I imagine it as a mix of website and mobile app, but I'm surely wrong);
Open Web App (a standard from Mozilla), but based on what I've read about it, it seems deprecated and not used anymore. Plus, I don't really look forward to "certify" my app... I just want to package some files.
PWA I don't think is a solution to your problem as you wont be able to redistribute the code as an executable package.
UWP would be too Windows specific and might make you lose the platform independence that you already have since you are using plain HTML and JS, plus from what I understand you would need to distribute the app on Windows Store.
I believe packaging as an Electron app would be the best solution as you can provide executable files that can be executed in almost all platforms.
Electron would be the best solution for you. I had a client that first wanted to run app on php server and eventually they figured out they need it as a desktop app. It was easy to rewrite php stuff to node and package as Electron app. You have access to everything files, system etc. so you can do more if needed.
Another solution would be to just inline everything into a single html file.
I have different environment on which I'd like to test my manifest and my ServiceWorker howerver I can't find a way to have multiple manifest.json, one for each env.
Is there any way ?
You can have your build process to pick appropriate manifest.json file during the build process. For example, if you are using webpack, you can write script to pick pr/manifest.json when you do pr build and qa/manifest.json when you do qa build.
Manifest is liked to your application by linking to your home page, say index.html. So you can also manipulate your script link tag to pick based on lcp. But this would be hacky and not a good idea. I would go with first option.
Hope this helps.
I've got a painfully simple jQuery plugin that I've written and placed on github. I am using Github for Windows and the website itself to manage the project.
Unfortunately, if I try to include any of the .js or .css files that I've uploaded there, through the Raw links, it fails in my browser due to the MIME-type being plain/text.
So, for the last couple of hours I've been researching how to get a copy of the files, through github, that people (including myself) can link to. The first step seems to be creating a project page (gh-pages branch)... that much I have grasped.
However, all of the material I've found so far either expects you to have a UNIX-based system, or do some console-based trickery:
Examples: GitHub, SO, SO
Now, there must be a straightforward way to simply make these source files available for inclusion. I went through the automated steps of creating a 'project page' and now I'm presented with another branch that is claiming to be behind the 'master' branch, but I can't see what I'm supposed to do next. It's not even clear to me why on earth I'm required to make another branch. This whole thing seems far more complicated than it needs to be.
So, to recap:
I've created a branch in Github (using Windows app and website)
I can manage that, and update my files, without incident
I am unable to include the .js and .css files using a 'raw' links
I want to be able to include those files in a page
I'd like to do this through Github for Windows, or on the site itself
If anyone could help walk me through this, I'd appreciate it. Also, I'd expect that A LOT of others would as well.
EDIT: Here is an example of a well-known Github project that has its files available through Github:
Select2:
http://ivaynberg.github.io/select2/select2-3.4.2/select2.js
EDIT2: Okay, conceptually, I now understand why I have to create a separate branch, in order to share the files - as the source control aspects of Github aren't meant to act as a CDN, the project page simply provides a public website where you can place your files. So the question now becomes: How do I put my files from the master branch into the gh-pages branch? I'm not worried about automating it or anything right now, all I want is access to the directory structure so I can place files in there. I've tried syncing and re-syncing my branch with Github Windows, but it tells me that there's nothing to get from the gh-pages branch, even though it's "10 commits behind". What is going on?
EDIT3: Added my own answer, for what I've come up with (so far).
As mentioned, there's lots of information out there for people who are using console-based Git software. However, I could not find a single piece of info on how to do this solely through Github Windows. Well, here is the solution:
Process:
Create a project page, as described here: https://help.github.com/articles/creating-pages-with-the-automatic-generator
Unfortunately, they only have console-based solution for getting a local copy. So here's how the rest of this works in Github Windows... (assumption: project name is myproject, consisting of myproject.js and myproject.css)
After the page has been created (takes a few minutes), open up Github Windows.
In Github Windows, open the repository for the project. On the top menubar it has "in sync", "master", "tools". Click on "master" and switch to "gh-pages" branch - SO example.
When you do this, the folder C:\Users\YourName\Documents\GitHub\myproject will now display the files for the "gh-pages" branch. If you click "master", in Github Windows, it will change the folder structure to once again represent the "master" branch. This is what confused me earlier, you can't see the directory structure for both branches at the same time.
Select the "master" branch in Github Windows.
In Windows Explorer, copy myproject.js and myproject.css into a separate directory (e.g., c:\temp).
Go back to Github Windows and select the "gh-pages" branch.
Go back to Windows Explorer and cut the files you put into c:\temp and paste them into a directory like C:\Users\YourName\Documents\GitHub\myproject\myproject-1.0\
Go back to Github Windows, and you'll see "2 files to be commited". Type in your commit message and click 'Commit'.
Then click 'Sync'.
You can now include these files in your webpages, using a URL like: http://yourname.github.io/myproject/myproject-1.0/myproject.js
Obviously this is a huge pain in the ass to do it this way, if you expect to be updating the source file(s) regularly. So obviously an automated approach would be most ideal. There is an answer for this on SO here, unfortunately it involves UNIX-based scripting which I have zero knowledge of (and, truthfully, no interest in learning just for this). If anyone comes up with a more efficient way of doing this, using only the GUI-based tools, I'm sure myself and many others would be interested in hearing about it.
EDIT: This solution is obviously usurping Github's intended way of doing things, as when I click on the "gh-pages" branch on the github website it tells me that it's "5 commits ahead and 11 commits behind" the master branch, even though they have the same files. So, again, if anyone else has a better GUI-based solution to this problem, I'm all ears.
Git(hub) software for Windows is the buggiest thing I've ever used (well, besides Windows itself). Back when I used Windows, I could hardly get anything to work with Git at all.
But, anyways, to answer your question, if you open a command prompt and type in
git checkout -b gh-pages
(if it complains about branch gh-pages already existing, remove the -b.)
it should switch the branch. Then, you can launch notepad++ or whatever text editor you use (you might have to do it from the terminal, I can't remember), add the file you want, and then type in (in cmd):
git add .
This recursively adds all files in the folder to Git.
git commit -m "Add file for easy user download"
This adds the commit message.
git remote add origin git#github.com:yourusername/yourrepository.git
This adds the Github repo so you can push to it
git push origin gh-pages
This pushes your changes to Github.
And, you're all set!
You might want to read this on Git branching.
I am looking at porting an existing application to phonegap build, however as my application is a multi-page application with pages split in different locations and a resource loading mechanism which loads files from different places.
So I basically want to be able to get my applications root directory up front and then use that when initilizing the application. Then it does the rest itself once it knows the root directory and has a file managing class which will build the file paths based off this root value.
I did notice this question:
Getting application directory in phone gap
However it does not seem to act the same on each platform, and I need this to be consistent. So is there a simple and consistent way to get a string representation of the applications root directory?
In my case after asking the guys at phonegap, they say that you dont really need to do any of this can just use location.hostname so am looking at using that approach for now, the main reason for asking this is because in trigger.io I would be using tools.getUrl. So I assumed in Phonegap I would need to do something similar.
http://legacy-docs.trigger.io/en/v1.4/modules/tools.html