I was recently assigned a new project that uses Angular5 on frontend and Laravel on backend. I had no experience with Angular5 so I went through this entire tutorial without any issues. There is no backend and ng serve is used to serve the project. Only when I make updates to components/html/scss/etc files do I see changes to the served local UI - no changes to the local project UI are observed when I make changes to the main.js file within the dist folder after ng build, but changes made to the components/etc. are observed as updates in main.js after ng build. I was under the impression this is the expected behavior.
However, for my inherited project (which I put on my local machine via a simple git clone), the opposite is true. When I run locally, I use php artisan serve. All edits to blades are reflected in the served local project. However, for the "Angular-controlled" portion of the project, only when I make updates to the main.bundle.js file (without using ng build nor ng serve) within the dist folder do changes register in the served local UI - no changes are observed on the local project UI when I make edits to the components/html/etc files.
Can somebody please tell me what the heck I am missing here? What do I need to do to have edits to my local components/html/scss/etc. files reflected in the served local UI on the inherited project?
The inherited project was git cloned so this is how it was before I made any edits. I would imagine that development work is supposed to be done on components/etc. directly, not on .js files within the dist folder!
PS - No 404- or 500-level errors when inspecting the inherited project
In the project directory, updating npm using npm update and then running ng serve did the trick.
Related
My Environment
When I develop vue project, I keep track of files in dist folder.
My laptop
I develop vue project -> npm(yarn) run build -> git add everthing in dist folder -> git commit -> push
Production server
git pull -> Everything is good to go (since I already built dist folder on my laptop).
I have URLs of production server and localhost server in my .env file
VUE_APP_PRODUCTION_API=https://myprodserver.com/
VUE_APP_LOCAL_API=http://localhost:3000/
When I use
vue-cli-service serve, it uses localhost server url.
vue-cli-service build, it uses production server url.
(so URL is allocated in build-time, not run-time)
The Problem
But I came across a problem when I added a qa server.
Now, there are three envrionments
1. My laptop
2. qa server
3. production server
I found that vue project in qa server tries to talk to PRODUCION_API (since It pulled the dist folder for production server which I built on my laptop and committed).
What I tried
I created the .env.local in qa server and overwrote the VUE_APP_PRODUCTION_API
# qa server .env.local
VUE_APP_PRODUCTION_API=http://qaserver.com/
and installed npm, yarn
and build
it worked! But... the problem is it makes git status output dirty.
when I git status
changes:
file removed: dist/file...
file removed: dist/file...
file removed: dist/file...
file removed: dist/file...
I know I can .gitignore dist folder, and build everytime when I git pull in each environment... but that would be bothersome. that would make me have to install npm, yarn, and install whole dependency in production server too. (It wasn't necessary before since I used to build on my laptop)
Question
Do I have to build the project everytime just to change the base url?
Was it right to keep track of dist folder from the fist place?
Is there any Best-Practice you could share me?
Ideally, you would want to deploy your project using a tool like Github Actions or Gitlab CI.
This would allow you to build your projects with the necessary environment variables for the given target environment.
In general, the dist files aren't included in version control, as each developer working on your project would have different versions of it and you would encounter merging conflicts really often.
Here's an example using Github Actions, deploying on Github Pages
I downloaded an Aurelia project for testing purpose. After restoring the packages (npm install) and running the application (au run --watch). Now I see Start watching... I was curious about doing some changes (for example in contact-list.html) and seeing the website adjusting after pressing F5 (because of watching). It does not work. My changes are not reflecting in the running website. In the shell prompt where it is watching, nothing happened.
You can test by yourself with the project zipped below.
Zip of the Aurelia project
If I create a new Aurelia project from scratch (au new) and following the wizard, the watching works pretty well.
I don't know why it does not work in the project I downloaded (code provided by a Book for learning Aurelia).
What book is this?
Part of the problem is that the version of the CLI you are using is 2 years old. I would recommend getting the latest version of the CLI, creating a new project that uses RequireJS
au new
give new project a name
choose custom (3)
choose RequireJS (2)
choose Babel (1)
choose defaults for the rest
copy the src folder from your zip file over to it the newly created project
You'll need to run npm install bootstrap#3.3.6 --save or yarn add bootstrap#3.3.6 to pull down bootstrap.
Copy the link to bootstrap's css from your zip file's index.html to the new project
Delete the Promise.config line in src/main.js.
Then just run au run (--watch is no longer needed). It should work.
I am trying to use Aurelia with Symfony backend. Part of our application is generated on the backend (good, old server-side MVC) and part of it should be an SPA. I have started aurelia app from skeleton-typescript (JSPM). Directory structure I am trying to create is as follows.
project/
src/
SomeModule/
SomeOtherModule/
FrontendModule/
build/
src/
app.ts
main.ts
...
index.html
package.json
...
web/
dist/
I have changed the output path in build/paths.js and gulp build correctly places the compiled files in the web/dist. I have also added a gulp task that copies the index.html into the web/.
The biggest problem I have is how to manage the JSPM dependencies. If I configure it to downlad the dependencies into web/jspm_dependencies, the application works when launched with Symfony but I am not able to configure karma unit tests properly (it says for example that it can't find aurelia-polyfills). If I leave the jspm_dependencies in the src/FrontendModule then I have to create a gulp task that copies it to the web/ and it takes a lot more than 10s => unacceptable.
This leds me to the following questions:
What is the suggested directory structure for Aurelia project when I am not going to serve the app from the project's root?
Is there any way to copy only the files needed by the application to the web/ (something like main-bower-files for bower)?
I know I can gulp export the app into the web/, but I want to use the same directory structure during the development, too.
I don't want to use browsersync server in the dev because of multi-nature of the application (SPA part and non-SPA part that has to be served from "real" backend).
I am using aurelia skeleton-es2016. Gulp watch takes at least 2 minutes. I have a dual-core 2.8Ghz amd with 6gb ram.
I initially had issues with missing modules after npm install but fixed those. Not sure if that is relevant to this case.
Also I'm not very experienced with gulp. Are the files being served from the the dist folder? Are those the files being watched by browser-sync for changes? I tried making a change to the index.html page and the change was not reflected in the browser without a reload. Is that file not among the ones watched?
It´s unusual that gulp watch needs so much time.
You should try to reinstall all npm and jspm packages.
If you have problems deleting the npm_modules folder you can try the tool I use in this case: Unlocker.
The files watched by browserSync are in your root folder .. You can see that under skeleton-es2016\build\tasks\serve.js this serve task is used by the watch task.
Or in your console where you are running gulp watch: [BS] Serving files from: .
If you used the newest skeleton-es2016 you should also have a browserSync control App running under http://localhost:3001/
BrowserSync will not detect changes inside your index.html file. That´s because of the watch task configuration:
only files under "src" will be watched.
You can see this configuration under: skeleton-es2016\build\paths.js and skeleton-es2016\build\tasks\watch.js
I am a semi noob in web development.
I just started playing around with angular2 today. And i ran into a problem..
If I were to install angular2 with npm to my local computer, which file is the js file that should be linked to the html page that show up on the client?
In their guide, i see a file called /node_modules/angular2/bundles/angular2.sfx.dev.js. But i don't even see this file at all.
Is there some script that i should run to build that file? Or is the file renamed? I am really confused.
I tried some file /angular2/bundles/angular2.js, but it doesn't even export ng variable to window!
I see that in https://code.angularjs.org/2.0.0-alpha.44/angular2.sfx.dev.js, eventually ng gets exported. But what changed in alpha 53? (the version i get for doing npm install angular2)
In my projects, I a using
"node_modules/angular2/bundles/angular2.dev.js"
You might additionally need to install/add systemjs, just in case you are using the systemjs library.