Here are the steps I did to deploy to github pages:
Install the gh-pages package as a "dev-dependency" of the app
npm install gh-pages --save-dev
Add homepage property "homepage":
"http://{username}.github.io/{repo-name}"
Deploy script
"scripts": {
//...
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
}
npm run deploy
Setup source to the gh-pages branch.
I go to the link and find a blank page with an empty console. I've looked around and everyone suggests these 4 steps, and nothing seems to work.
I use npx create-react-app to setup my React application.
Here is the link to my repository: https://github.com/yuivae/yuivae
Please let me know if you have any suggestions
2 minutes I posted this thread I found the answer. I needed to change the react-router-dom path setting from
<Route exact path="/" component={Home} />
to
<Route exact path="/{app-name}" component={Home} />
because when deploying to gh pages by default I change / homepage path to the http://{username}.github.io/{repo-name}
After making this change I pushed, commited and deployed again and 10 seconds later it worked.
Related
I run a Github Action that deploys my app to Heroku with two relevant steps.
Build Step: push to Heroku, build (including heroku/nodejs buildpack), create JS sourcemaps (among other things).
Sentry Release Step: create a Sentry release, and ideally upload the sourcemaps created in Build Step.
I've noticed in build logs that my build directory is /tmp/build_{sha}/. The project is built here, and sourcemaps therefore would be found in /tmp/build_{sha}/static/dist. The problem is, I can't find the build directory or the sourcemaps in Sentry Release Step, or any step that runs after Build Step has completed.
Following Build Step completion, I've examined /tmp but there's no build_{sha} folder inside.
Yet when I run heroku run bash on the deployed dyno, I see sourcemaps in /static/dist and /staticfiles/dist, where I'd expect them. So where did build files go after Build Step and before deployment? Shouldn't build files be accessible throughout the Github Action?
I've had success accessing sourcemaps within Build Step, by using a Sentry Sourcemap buildpack. Obviously this runs during the build. But I would prefer to have this happen in the Github Action. I've also tried the SentryWebpackPlugin but I've determined sourcemaps must be uploaded once webpack has completed - more specifically, once manage.py collectstatic has completed, since this changes the sourcemaps' filenames and I want to upload the final sourcemaps.
I've read that Heroku's ephemeral storage is wiped on restarting the dyno. But I can't even find these files after moving onto another step in my Github Action.
...
- name: Push To Heroku Remote
run: |
git fetch --unshallow
git push --force heroku ${{ github.ref_name }}:master
- name: Create Sentry release
uses: getsentry/action-release#v1
env:
SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
SENTRY_ORG: ${{ secrets.SENTRY_ORG }}
with:
environment: staging
projects: ${{ secrets.projects }}
sourcemaps: <PATH_TO_TMP?>/staticfiles/dist
tldr; I think I need to add a github token. I have a token from github, but I have no idea how to implement it at the stage that I'm at.
I am trying to deploy an angular 13 app to github pages. Right now, it is just the auto-generated app (I haven't added or changed any code at this point). Here are the steps I have taken
Step 1: Create App and make sure it works
ng new <appName>
cd <appName>
ng serve
Step 2: Create a Repo on Github
Step 3: Check if it automatically connected to a repo (and remove if it's not the one we want)
git remote
git remote -v
git remote remove origin
Step 4: Connect to correct Git Repo (replace variables with username and project name)
git remote add origin <https://github.com/USERNAME/PROJECT_NAME.git>
Step 5: Push to Git repo
git branch -m main
git add .
git commit -m "initial commit"
git push -u origin main
Step 6: Hosting
npm install -g gh-pages
ng build --prod --base-href /PROJECT_NAME/ (find project name in angular.json at very bottom
gh-pages -d dist
When I do all of this, it shows that it worked. But then, it just loads a 404 error. After a lot of googling, I think it has something to do with a token. So I went and got the token, but I'm not sure what to do with it.
P.S. already saw Git Hub Pages not Deploying. (404) and it was unhelpful.
The answer was User Error. The code above works and will deploy an app successfully to gitHub pages.
The problem was I was going to https://humanhickory.github.io/ but the ng build --prod --base-href had actually created a new folder which I had to navigate to (so https://humanhickory.github.io//)
Futhermore, I was able to use the token by running gh-pages -d dist a second time. The first time I did it it said "remote: Invalid username or password. Fatal: authentication failed for '....'". However, when I ran the same command a second time, it prompted me to log in. So there's that.
I am looking for way to modify output of build function from
ng build --prod
would like to add some bootstrap css files to head section of index.html, change name index.html => index.php etc.
how to do it ?
You can customise the implementation from the source code. This section explains how you can proceed.
In particular, you can change the following lines from addon/ng2/models/webpack-build-common.ts.
new HtmlWebpackPlugin({
template: path.resolve(projectRoot, `./${sourceDir}/index.php`),
chunksSortMode: 'dependency'
})
For the CSS resources, they can be packaged directly if you use Webpack Angular CLI.
EDIT
The key index in the apps nodes can be modified in the angular-cli.json file. The line should be changed to
"index": "index.php",
I find work around this process. In package.json modify build script to:
"build": "ng build .......... && mv dist/index.html dist/index.php"
I have successfully created a small application using ember-cli. I tried pushing it to gh-pages branch of my github repo but it shows error in browser console
Uncaught ReferenceError: require is not defined
loading of vendor.js and vendor.js files from dist/assets is also failing.
I'm not able to run standalone ember app from dist folder in local machine as well, same errors.
has anyone tried it. if yes how to do it correctly?
Since December 2014 there is also an ember-cli addon for this.
First make sure to have set modulePrefix in config/environment.js to your repo's name on github. E.g., for https://github.com/username/my-cool-repo it should be modulePrefix: 'my-cool-repo'.
Then follow these instructions:
Install the addon.
$ ember install:addon ember-cli-github-pages
Commit the changes made by the addon.
$ git add . && git commit -m "Installed addon ember-cli-github-pages"
Create the gh-pages branch with only the necessary files.
$ git checkout --orphan gh-pages && rm -rf `ls -a | grep -vE '.gitignore|.git|node_modules|bower_components|\.\/|\.\.\/'` && git add . && git commit -m "Initial gh-pages commit"
Switch back to your source branch (most likely master).
$ git checkout master
Build your ember app to the gh-pages branch.
$ ember gh-pages:commit --message "Initial gh-pages release"
Push everything (or at least the gh-pages branch) to github.
(This was different for ember-cli <= 0.1.4 and might change again in the future. Make sure to visit the addon's readme.)
As the comments already say: change the baseUrl in config/environment.js to the name of the GitHub repository you are pushing the app to. For example:
Your GitHub respository is called myEmberApplication and resides in
https://github.com/yourUsername/myEmberApplication.git
then the URL to this project's gh-pages would be
https://yourUsername.github.io/myEmberApplication
So in your case you have to change the baseUrl from / (default) to /myEmberApplication.
The reason why you have to do this is because ember-cli adds the <base> header to your index.html file.
I try to learn composer, now I want to include (zurb) foundation, so I added
"require": {"zurb/foundation": "v5.2.2"} to the composer.json file.
After running composer.phar update, I can see that there are some files added to the folder /vendor/zurb/foundation.
But I have no clue how to continue, could anybody please advise how I can start building my web-app now? How do I get it to use the css and js files that are needed for foundation?
I already included the file vendor/autoload.php to my index.php, but that doesn't seem to be enough.
I already built multiple web-sites and apps using foundation, but always "manual", then I just include the right css and js files to the header and footer of the page. Now I just don't know where to start.
thanks for your help.
Check this question first to get the basics: NPM/Bower/Composer - differences?.
Then, if you decide to go with Composer for PHP and Bower for front-end libraries, follow this:
Install Bower using sh $ npm install -g bower (you'll need Node.js and npm first)
Configure Bower for you front-end packages (visit Bower docs for more information)
{
"name": "MyProject",
"dependencies": {
"foundation": "*"
}
}
Hook Bower to Composer adding this to your composer.json
"scripts": {
"post-install-cmd": [
"bower install"
],
"post-update-cmd": [
"bower install"
],
}
Now every time you hit composer update (or install), bower components get updated as well!