I am working on an Angular project and wanted to host the project through GitHub with gh-pages.
Since the index.html file was not in the root directory, I created an empty branch off of my master and called it gh-pages. I then copied my files into the new branch, so that the index.html file was in the root directory.
I am also using Grunt, so I copied the grunt generated app.js file into the root directory as well. I can now see the project in the browser if I go to http://kelseysteele.github.io/votm3/#/home, however the navigation bar is missing and the other pages, like http://kelseysteele.github.io/votm3/#/overview, are not working properly.
I've been stuck on this for a few days and would really appreciate any assistance with this.
Check your console, you'll see errors: GET http://kelseysteele.github.io/data/overview-data.json 404 (Not Found)
Fix the url here: https://github.com/KelseySteele/votm3/blob/master/src/votm3/Scripts/controllers/overview-controller.js#L10
Because you are using grunt, you will want to build the project before serving the files. This will make the files and code modules build properly before serving the index.html. A popular module you can use is https://github.com/tschaub/grunt-gh-pages an get your builds serving properly.
Related
It deploys successfully, but shows that there are no pages to show. Although the zip file generated has all the data needed.
I have my netlify linked with the correct git repo, so I put my base directory to as frontend folder, since I understand that it needs to go there.
What am I doing wrong?
Publish directory should point to directory of your build, i assume that in your case its build folder because you are only deploying /frontend folder here
I have an angular app, to this I am trying to add an npm package called svgedit. It gets installed. But when I try to reference a java-script file it says
net::ERR_ABORTED 404 (Not Found)
This is how I am trying to reference it in my index.html in the head section,
<script type="module" src="node_modules/svgedit/svgedit-config-es.js"></script>
I can access this file from within vs code by clicking "ctrl + left mouse". It opens the file properly meaning the reference is proper. But when it runs it gives the above mentioned error in the console. I have also tried switching the type attribute to "text/javascript".
Basically I am trying to integrate this package in my angular app. What is the correct method to go about it.
ng serve will only serve compiled files from your src directory and what''s in the assets folder. It will not serve node_module files directly.
The usual way to add scripts it to add it to the scripts section in angular.json
scripts:
[ //other scripts
"node_modules/svgedit/svgedit-config-es.js"
]
Is your html page in the root directory of your project? if not make sure to navigate to the file correctly. if the html page in the root directory of your project then there must be a typo in the src
Basically I am trying to integrate this package in my angular app. What is the correct method to go about it.
The right way to go about it is to use a bundler like webpack, rollup etc...
I am trying to build a PDF viewing component for an Ionic 2 app. I have lots of experience of Angular 2, but not of Ionic.
The component will be built using pdf.js and have created the pdf.js asset to be included in my project as described on the github page. However, trying to require this fails — require is not defined —, so I copied the script to the asset folder and tried importing it. It seems the file is not being copied to the build so that fails too.
Anyone have any pointers for requiring or importing a non-weboack non-SystemJS script into an Ionic 2 app?
Create a js folder (or something like this) in the www folder; include the files needed and reference them from there. This folder is not emptied on build.
EDIT
The root of the www folder does not change and you can reference it as someting like ... 'js/need-this.js'.
There should have some references in your index.html file to the build folder and maybe the assets folder (icon); this concept of using a js folder works the same. Only build and assets will change.
I feel that I should point out that you shouldn't copy anything into www since this is autogenerated and any changes will be overwritten. You should copy into assets instead.
So I made a Typescript project with Visual Studio. It works fine when I launch it with Visual Studio, but if I try to push it to my GitHub Pages site, it will put the index.html in a subfolder and I get a 404 error when I try to load my website. Even if I try to reference the index.html in the website url it doesn't really work.
I was wondering if it's possible to only publish the needed items. I think I would only need the subfolder. Correct me if I am wrong though.
Note: I have the GitHub extension for Visual Studio installed.
UPDATE:
Since some of the links don't seem to work anymore I think I should give some extra information. So basically you need to have a branch named gh-pages. On that branch you need to have an index.html file in your root folder. Then the index.html file should be visible on the github page URL.
You need to push a branch named gh-pages in order to view it as a website.
Create a new branch and then move the file into the root folder of the branch, upload it to the gh-pages and you set to go.
Check this out:
https://github.com/nirgeier/JimVliet.github.io/tree/gh-pages
This is how your file should be inside your root folder.
I am completely new to metalsmith. I've been following this tutorial: http://www.robinthrift.com/post/metalsmith-part-1-setting-up-the-forge/
I want to build my site to the root directory of my project (the same dir as the build script). I want to do this because I want github pages to play nicely with it. But when I try to build, I get this error: Error: EBUSY, resource busy or locked
Here is my dir structure:
project_folder/
_site-src/
index.html
node_modules
build.js
package.json
Here is my build.js source:
var Metalsmith = require("metalsmith");
Metalsmith(__dirname)
.source("_site_src")
.destination(".")
.build();
What I want my project dir to look like:
project_folder/
_site-src/
index.html
node_modules
build.js
package.json
index.html
I don't know what I'm doing wrong. I appreciate any help.
The error message:
Error: EBUSY, resource busy or locked
seems to be a file locked/in use error. (I'm not that familiar with Node.js errors)
I would assume this is happening when Metalsmith tries to clean the build folder (which is your solution folder i.e. a really bad idea). This is on by default but it can be turned off.
To turn this off use:
.clean(false)
before you build.
BUT if you remove items from your source folder they won't be removed from your build folder. You might be able to handle this by a custom clean-up script or plugin.
I'm not experienced with github pages but I think there should be a better alternative to the avoid the problem.
You could possibly add a symbolic link to the build folder from the project folder for the index.html file.