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"
Related
I am using expo sdk41, react navigation 5, and vercel to deploy a web-build, built with expo build:web.
When I am developing locally, I can deep link, e.g. http://localhost:19006/sign-in. However when I deploy it to vercel and assign a domain name to it, the deep linking does not work anymore.
I am already doing the following, which allows deep linking to work in development:
export const linking = {
prefixes: [Linking.createUrl('/'),
screens: {
...
}
}
Why is deep linking working in development and not when deployed to vercel?
I am happy to add more info if needs be.
Running expo build:web bundles a SPA and you need to redirect calls to the deployed app to index.html. Vercel allows configuring redirects using a vercel.json configuration file, placed at the root of a project.
Add a web/ folder in your Expo root directory and create a vercel.json file in the web/ folder with the following content:
{
"rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}
This file will be copied to the web-build folder when you run expo build:web.
I was able to fix this by setting the framework in the setting to create-react-app
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.
I want to have a manifest in my ember app, because I want to use it on mobile devices and have some offline capabilities.
I have found the plugin ember-cli-deploy-manifest:
https://github.com/ember-cli-deploy/ember-cli-deploy-manifest
It is well documented in the readme and looked promising.
But how do I use the plugin?
I have installed it using this command:
ember install ember-cli-deploy-manifest
I build my app using this command:
ember build -prod
No manifest is created. I am probably missing some simple step, but can't figure it out. How do I tell ember build to use the plugin?
UPDATE
I followed the suggestion in the comment of the answer below. I dropped using the manifest-plugin and created a manifest file manually. Then the challenge is to get proper fingerprinted filenames in the manifest file.
In my ember-cli-build.js file I have:
module.exports = function(defaults) {
var app = new EmberApp(defaults, {
fingerprint: {
exclude: [],
extensions: ['js', 'css', 'png', 'jpg', 'gif', 'map'],
replaceExtensions: ['html','css','js', 'appcache']
}
});
...
My manifest file is called eea.appcache and is located in the /public folder. It is copied to the dist-folder during build.
However the content of the file (the list of filenames) are not fingerprinted. Filenames in the other files (html, css, js) are fingerprinted correctly.
Here is my public/eea.appcache:
CACHE MANIFEST
# 2016-03-15
# V 1.0
CACHE:
index.html
assets/vendor.css
assets/eea.css
assets/vendor.js
assets/eea.js
assets/img/Icon120x120.png
My buildstep is still:
ember build -prod
How to get the filenames in the manifets files updated with the MD5 fingerprint?
The ember-cli-deploy-manifest is for use with ember-cli-deploy.
So you need to run ember deploy -production once you have installed ember deploy.
Install ember-cli-deploy
ember install ember-cli-deploy
Then
ember deploy -production
I finally got it to work, but this solution is really hack'ish.
I figured this out by trial and error.
The broccoli-assets-rev has some tricky rules when it parses a file to find the filenames. The format that are normally used in a manifest file the filenames are not found by the parser.
But if the files are listed in the comments of the file with quotes and correct path is used, it will work.
If the manifest file is located in the root of the public folder it will end up in the root of the webpage. Then the paths will be as below.
My file looks like this:
CACHE MANIFEST
# 2016-03-15
# V 1.1
# '
# 'assets/vendor.css'
# 'assets/eea.css'
# 'assets/vendor.js'
# 'assets/eea.js'
# 'assets/img/Icon120x120.png'
CACHE:
index.html
assets/vendor.css
assets/eea.css
assets/vendor.js
assets/eea.js
assets/img/Icon120x120.png
NETWORK
*
Then the resulting built file looks like this:
CACHE MANIFEST
# 2016-03-15
# V 1.1
#
# 'assets/vendor-d41d8cd98f00b204e9800998ecf8427e.css'
# 'assets/eea-ddacde3bdf32d3f94c5a01a2054c6f72.css'
# 'assets/vendor-3229c2c849c3d52c0b362d9fee2106ad.js'
# 'assets/eea-4c760118f51f7402db2f0b6074b6960b.js'
# 'assets/img/Icon120x120-40b31b55211fb293dedf556a648aa47e.png'
CACHE:
index.html
assets/vendor-d41d8cd98f00b204e9800998ecf8427e.css
assets/eea-ddacde3bdf32d3f94c5a01a2054c6f72.css
assets/vendor-3229c2c849c3d52c0b362d9fee2106ad.js
assets/eea-4c760118f51f7402db2f0b6074b6960b.js
assets/img/Icon120x120-40b31b55211fb293dedf556a648aa47e.png
NETWORK
*
When I want to deploy my app to my enviroment I have to create a single file in a specific, containing the hole app (most of it BASE64 encoded) and import that file into a proprietary application.
I've created a grunt task that can easily generate that file form a folder. So I'm looking for a way to just type something into the console and then it should execute ember build and my script.
The simplest way to do this is just to create a brand new Gruntfile.js nearby the existing Brocfile.js and a batch file to run first grunt and then ember build.
A better way would be if I could call ember build from my gruntfile. Is there a way to do this?
Or, even better, is there a way to inject a grunt into the ember build? That would be awesome!
To be clear, broccoli is not the right tool for that! Its not a build step, but a deployment step! So I want to use the task runner, not the build tool.
Thanks!
You could potentially use grunt-exec to execute ember build, as part of a chain of grunt build tasks.
It allows you to execute arbitrary shell commands.
Something like the following might work:
grunt.initConfig({
exec: {
ember_build: {
command: 'ember build'
}
}
});
and then execute with grunt exec:ember_build or as part of a larger task. (Note that I haven't tried this, but it should work!)
This might be slight overkill, you could just chain your console commands:
ember build && grunt
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!