Deploying app based on Polymer starter kit - polymer

Prior to Polymer 1.0, I was using python simple http server and/or apache. When I came across the starter kit app, I started using the built in browsersync, through gulp serve.
Is that appropriate for hosting on Heroku?
I added:
"scripts": {
"start": "gulp serve:dist"
},
to my package.json, and it attempts to run. When I try to load the page, I get:
heroku[router]: at=error code=H10 desc="App crashed" method=GET
Heroku's guides are based on traditional node apps, and the Procfile or "script" in package.json, is typically just node app.js.
I feel like I'm missing something trivial. Any help would be greatly appreciated!

I revisited this recently. I found a pretty simple solution.
I added a "serve.js" (name not important)
Contents:
var express = require('express');
var app = express();
app.use(express.static("" + __dirname + "/dist"));
app.listen(process.env.PORT || 5000);
Then, within my package.json file I added:
"scripts": {
"start": "node serve.js",
"postinstall": "bower install && gulp"
},
The node serve.js could also be in the Procfile. Heroku should recognize and use it either way. postinstall is used to get bower components, and run the default gulp build task.
https://devcenter.heroku.com/articles/nodejs-support

if you are running gulp.vulcanize like in the 'serve:dist' task in your sample app, and also are looking to host the ./dist folder then heroku is NOT a good idea. H has no buildpack to accept a flat folder like the vulcainzed ./dist and to simply host it with nginx / apache.
buildpack list has nothing 4 polymer, although using a node wrapper appears to be an option with Heroku/polymer. IMO this is not the best because the node layer is extra cruft when trying to simply push that ./dist folder to the web.
There are hacks to make it work on H (links below) or by using the Heroku API to simply push a folder, but IMO you could do alot better.
I would look hard at alts like AWS or to github pages B4 heroku.
Note that i quickly tried github pages using the ./dist folder and using
var ghpages = require('gh-pages');
...
gulp.task('deploy', ['default'], function(cb) {
ghpages.publish(path.join(process.cwd(), 'dist'), cb);
});
on github and it FAILED due to some router issues with #! links. So i decided to just push an unvulcanized version to the web. ( not the best )
Be certain that you can host ./dist locally WITHOUT using the 'gulp.serve' task before deciding to push the ./dist folder somewhere on the web. You may see options for pushing 'gulp.serve' and npm with your project but it makes NO sense to me to include all that extra cruft when vulcanize is trying so hard to just produce that ./dist folder!
Be certain in stdout that the vulcanize task is actually finishing....
[15:59:59] Starting 'vulcanize'...
[16:00:00] 'vulcanize' all files 436.07 kB
[16:00:00] Finished 'vulcanize' after 1.14 s
Depending on how you extend the starter kit, 'vulcanize' can fail pretty silently so that you go on to other matters with hosting the ./dist folder without realizing that 'vulcanize' failed.
Is it possible to upload a simple html and javascript file structure to heroku?
https://www.npmjs.com/package/gulp-gh-pages
How to deploy node app that uses grunt to heroku
http://www.sitepoint.com/deploying-heroku-using-gulp-node-git/

Related

How to enable auto update the client logics when changing ES6 code in development environment?

Problem: I'm learning ES6 through playing around with the code. I found that it's quite annoying to rebuild and restart the server every time I made any changes.
Goal: I want the changes that I saved to be reflected on the browser, without having to manually rebuild, and restart the server. What's the simplest way to do that?
Background:
The current script configuration in the package.json file is as below.
"scripts": {
"babel": "babel --presets es2015 js/main.js -o build/main.bundle.js",
"start": "http-server -p 9000"
},
I hope this is clear. Thank you!
I believe you must be using gulp tasks to run your project. If so, browser-sync + gulp.watch() is the best option for this. Below is what working for me, add something like below to your gulp task .js file. Whenever you change and save your es6 source code, it will automatically build and refresh the browser.
var gulp = require('gulp');
var browser = require('browser-sync').create();
// your default task goes here that should add "watch-changes" as dependency
// watch changes in js and html files
gulp.task('watch-changes', function() {
browser.init({
// initiate your browser here, refer browser-sync website
});
gulp.watch(
['build/main.bundle.js', 'webapp/**/*.html'],
browser.reload);
});
Check here neat example.
Refer browser-sync website and npm gulp-watch task

Hygieia Specific,UI, Gulp - How To

Query related to opensource tool Hygieia. On the Gulp scripts https://github.com/capitalone/Hygieia/blob/v2.0.0/UI/gulpfile.js
Gulp serve serves the application. here are few queries i need help with
In version 1.5.0 gulp task runner had gulp serve:dist, which served only minified content, 2.0 does not seem to do that
gulp serve starts the app # port 3000, how do i control it for each instance, as i intend to run couple of instances(diff versions) on the same vm.
When UI is served # localhost:3000/ , all the content is served from
localhost:3000/# and localhost:3000/bower_components .. etc..
i want to move the content to be served under localhost:3000/WebApp/
So that all the URLs are under a specific Virt Directory.
Any pointers are greatly appreciated.
TIA,
Tx
your question not much clear. still if i understand your question correctly-
your current hygieia configuration working correctly. you just want to run multiple instances of same application.
for that you have to make changes in UI>gulpfile.js

Firebase not running index.html file

I'm a pretty new programmer going through the Firebase tutorial. I have gone through steps 1-5 of the tutorial (https://codelabs.developers.google.com/codelabs/firebase-web/#5). I've added the "Add Firebase to your web app" js code to the html file, and set up the Firebase CLI. However, when I run the firebase server, everything seems to work other than it is not showing the code from the index.html file.
I am in the right directory, and my console says "Server listening at: http://localhost:5000." But, at localhost 5000, it shows a generic "Welcome to Firebase Hosting: You're seeing this because you've successfully setup Firebase Hosting. Now it's time to go build something extraordinary!" box rather than the app interface code in the index.html file. It is the only html file in my directory. It seems like I am missing something very simple. Thank you for your help.
The website shown to you is the index.html from your public folder (or whatever you configured it to be in your firebase.json file).
The culprit might be firebase init. It tries to generate a generic index.html file for you. However, in the latest version, it should at least ask you whether or not to override (which it did not in the past!).
The problem is firebase init being unbelievably crude. It just overrides the index.html file that was in your public folder... no confirmation, no safety net, no nothing.
If you lost, or accidentally let firebase init overwrite, your index.html file, you have to re-produce it somehow. If you do not have a backup of or other means of re-producing your index.html file... well... too bad!
How does the firebase CLI work?
Generally, the steps of a firebase setup go a little like this:
firebase login
firebase init
your-build-command-here # (if you have a build pipeline)
firebase deploy
You only need to do Step #1 (login) the first time when you setup building on that machine (or maybe when a new firebase revision has been released)
You only need to do Step #2 (init) to initialize a new project. That is, when you don't have your firebase.json yet (which will be created by the init command).
To re-deploy, it's simply:
your-build-command-here # (if you have a build pipeline)
firebase deploy
I figured out my answer. The index.html file that was being posted was in the "public" file, which was created during the "firebase init" stage. I replaced that placeholder html file with the one for my app.
Firebase hosting not showing up app?
There might be two reasons for this problem
1st step:
Make sure your public folder (define in your firebase.json) 'dist' containing the index.html hasn't been modified by firebase init command, if yes replace it with your original project index.html
for reference (dist is standard but your may different)
{ "hosting": { "public": "dist"} }
2nd step:
Make sure to configure your base href in project's index.html
as
<base href="https://["YOUR FIREBASE PROJECT NAME"].firebaseapp.com/">
and other bundle files as
<script type="text/javascript" src="https://["YOUR FIREBASE PROJECT NAME"].firebaseapp.com/runtime.a66f828dca56eeb90e02.js">
<script type="text/javascript" src="https://["YOUR FIREBASE PROJECT NAME"].firebaseapp.com/main.2eb2046276073df361f7.js">
3rd step run command - firebase deploy
enjoy ! ;)
New projects
when doing firebase init select the directory which contains the index.html as the public directory.
Existing projects
update firebase.json with
"hosting": {
"public": "dist/directoryThatContainsIndexHtml",
......
}
Edited Original Answer: Available in edit history. Only for testing purposes.!! for production, use the updated version. Contents of dist are rewritten on each build so anything you place #dist are gone each time you build.
For anyone else comming across this.
Try launching in incognito mode - the browser was cached for me.
https://stackoverflow.com/a/56468177/2047972
first of all you need to check your index.html after deployment of project. after these command steps:
firebase login
firebase init
firebase deploy
your real index.html file might be overwrite by firebase generic file that's why the problem is occurred. so change code of index.html after deployment of project. if you see this box on your web page
Tip: copy your complete project anywhere in your PC before deployment.
otherwise check your directory for file path your path of index.html is must correct.
In my case when I run the command ng build --prod it created a sub folder under dist folder. Assume my project name is FirstProject. I can see a sub folder called FirstProject inside dist folder (dist/FirstProject).
Give dist/[subDirectory] as your public directory
What do you want to use as your public directory? dist/FirstProject
This solved my issue
For deploying Angular application to Firebase simple and quick tutorial
you can find here.
During the process of firebase init, type N, when the question
"File dist/index.html already exists. Overwrite?" appears, and your page will be displayed as it should be.
In public folder option write dist/your-folder-name.
This will allow you to render your index file which is in your folder.
npm install -g firebase-tools
firebase login
firebase init
firebase deploy
firebase open
Select the following after scrolling down
Hosting: Deployed Site
When you build your Angular app, at least with Angular 10, by default Angular creates a folder names dist, containing a folder having the name of the application. For example, this example’s app is named blog-front, so when building the project (ng build or ng build -- prod), Angular will create a folder dist, containing a folder named blog-front:
When you reach the firebase init step asking the public directory, your folder's name should be “dist/blog-front” for this example, or “dist/yourApplicationName” as a general rule :
In my case firebase was using the wrong directory, also see here: firebase CLI didn't recognize the current project directory for 'firebase init'. While I was expecting firebase to put all created files into my project directory it was totally disconnected and put all files into my /Users/MyUserName directoy and deploying the wrong index.html from there.
This is how to fix it (no reinstall of firebase needed as suggested in the linked post):
delete all created firebase files from /Users/MyUserName directoy (.firebaserc, firebase.json, index.html and dist-folder)
run firebase init on project directoy
use dist/projectname as public directory
Configure as a single-page app "Yes"
do not overwrite index.html (if you do, make sure to "ng build" again before deploying)
firebase deploy
By the way, for everyone who is using Angular 7, this tutorial about deploying an angular 7 app to firebase hosting was really helpfull to me.
I faced similar situation. When we run firebase init it asks couple of questions. At that time we mention the directory path from where firebase will take all files to deploy.
Make sure that, directory contain index.html.
Delete the index.html which is present in dist folder.
Then run the following commands:
firebase login
ng build --prod
firebase init
firebase deploy
This Worked for me
First Stop the project and follow these steps
npm install -g firebase-tools
firebase login
firebase init
? Are you ready to proceed? Yes
? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices. Hosting: Configure and deploy Firebase Hosting sites
? What do you want to use as your public directory? dist
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
After initialization is completed makesure to delete the created dist file before next steps
ng build --prod
firebase deploy
You are seeing this error because you didn't run the command:
npm run build
make sure you use it before firebase deploy
and also make you are incorrect directory.
execute this after finishing firebase init process.
If you get a public folder with ready index.html by firebase init. You can simply replace that index.html with yours and use the command:
firebase deploy
That should be enough to get it working. Make sure all the files are where they should be!
Working Solution
Just do
flutter build web, then
flutter deploy.
firebase init tries to generate a generic index.html file for you, and if it did that, then you first have to do flutter build web so that the index.html you need is generated, rather than the generic one, and then again flutter deploy
Please follow the step
npm install -g firebase-tools
If you already have a dist folder, remove it from directory
firebase login
ng build --prod
firebase init
firebase deploy
index.html file has that firebase default information.That's why it is showing that information. Copy and paste index.html from your original angular file and paste it to dist index.html. This fixed my issue.
You should add your files to public directory folder before deploy it into firebase server(your app's index file should be there).
My solution is just waiting a bit.
Then, if it still not working.
let try:
Solution 1: check your index.html inside "build" folder and index.html in your own project. They should be the same, if not, copy code index.html outside "build" folder and paste into index.html inside "build" folder.
solution 2 : delete your .firebase folder. and init it again.
=> firebase init
? What do you want to use as your public directory? build < == NOTE: "build" is my directory
? Configure as a single-page app (rewrite all urls to /index.html)? No <== select NO
? File build/404.html already exists. Overwrite? No <== select NO
? File build/index.html already exists. Overwrite? No <== select NO
After doing these things, I also get that notification of "Welcome Firebase Setting Host Complete" , and I just wait for a while. then reload the website.
Changing the default HTML page name in the public folder to index.html worked for me.
Also, make sure you do not rewrite the index.html when firebase prompts you to in the firebase init step(follow the attached image).

How to use hexo server --draft and Livereload

I am writing draft blog posts using hexo. I am running the hexo server as follows:
hexo server --draft
This watches for changes in the draft folder and generates the draft posts which can be viewed at http://0.0.0.0:4000
The problem is I can't work out how to use live-reload while writing drafts.
With livereload I call
live-reload --port 9091 public/
And use use the javascript implementation with the browser
<script type="text/javascript" src="//localhost:9091"></script>
I can see why this doesn't work, live-reload is looking for changes to the public folder. With the server running in draft mode, I don't know what folder the html generated drafts are being stored in. I've searched my project structure and can't seem to see anything obvious. Any ideas?
Hexo can offer live-reload-like functionality via the'Browsersync-based' plugin, 'hexo-browsersync'.
There is actually also a hexo-livereload plugin, but the net, and hexo-browsersync's NPMJS rating, seem to favour the Browsersync Hexo plugin.
Christopher Martin's blog post 'Getting Started with the Hexo Blogging Framework', outlines the plugin's installation and usage, as well as many other helpful tips:
To install the hexo-browsersync plugin:
$ npm install hexo-browsersync --save
$ hexo server --draft --open #restart the server
This might possibly suit the OP's original question better than the accepted answer.
This is how I normally do this sort of thing:
hexo generate --draft --watch & live-server --port=4000 public
This generates the site in the public folder and watches for changes, whilst also serving said public folder with auto-updates.
Not exactly answering the specific question but maybe someone will find it useful.
Note: You will need to have live-server and hexo-cli installed globally, or locally if running via npm scripts.
hexo server serves the source version of the post not the public version. If you set livereload to watch the source folder livereload will work. I suggest setting livereload to use a 1 second or so delay before processing so the on the fly source generation to occur before reload is attempted.
Looking to the --draft option implementation at Github shows that it only extends the post processor to the _draft folder. So the place where it puts draft rendered files is the same it puts published posts.
However, hexo server does not save published posts in public directory as might be suggested by the question; public directory is populated by hexo generate command only. In fact hexo server does not save temporary files as it renders them on the fly.
I think live-reload will not work this way.

Disable aurelia-bundler just on dev machine?

I've been working on an Aurelia app without gulp and it has gone well. Now I want to use gulp b/c the page loads are terrible with 100+ separate files being requested. I install aurelia-bundler from the skeleton and can get it working using gulp. But there are two problems:
1. I have to gulp bundle after EVERY change to refresh the page
2. The error messages make no sense b/c everything is minified now.
I can deal with #1 b/c of gulp-watch (even though that still takes time), but I can't handle the minified files and not being able to debug my code.
So, is there and easy way to switch back to the non-bundled files for development on my machine and only use the bundled files when I deploy to Heroku server? It seems like aurelia-bundle now points to the dist folder by default.
Oh yeah, I tried modifying config.js to point to "src" instead of "dist" but it still looks for the aurelia-xxx.js file instead of the non-bundled files.
Thanks.
If you are using the latest build files you can gulp watch in dev which should use the src files without bundling - of course, this is slower, but in conjunction with browser-sync you shouldn't have to do loads of refreshes.
Check your paths.js and other config files against the skeleton if gulp watch is also bundling.