How to run the Angular folder in existing project? - angularjs

This is the application folder structure and I have specified the paths as well as and tried several ways to run but I have an error like . Can Anyone give the right solution to start the angular folder.
Whole application structure:
Error while start the angular.js app:
package.json:

it's Angular.js project, not Angular. so ng comang will not work
look inside gulpfile.js for command to start your app
or run in project's root folder gulp --tasks

Related

React app on Apache Server

I am trying to deploy this react project https://github.com/tahnik/react-expressjs
and use apache server for static file. The example that I know that is working is on Angular, on angular we just run ng build --prod and this will create a dist folder where there is an index.html. On apache, we just serve the dist folder. But here we use React with webpack that not contain dist folder with an index.html so I don't know how to do that on your project.
PS : Sorry for my english, it's not my native language
Thanks
There is no index.html because it is a server side rendered application. In the repository you posted, the whole project is meant to be running as a server side application, there is no index.html file. Everything is served from express as you can see here.
When you run npm run build:client it just creates the js/css files. You would need to:
Create your own html and add css and js to it.
Add html-webpack-plugin to generate the html with all the css/js files already on it.
If you don't want to do that. You simply run npm start after your npm run build and the server will start. now you need to proxy from apache to this addr:port.

How upload reactjs project to ftp?

I'm newbie on react, I did 2 paged website for exercise, all is working well on my localhost.
But i'm confused about how upload project to my linux server.
What i did ?
I create react app via terminal with this command :
create-react-app react-demo-project
Terminal create my project and in project root i have node_modules directory.
so here is i have some questions:
1- React project will work normally on linux hosting?
2- I need to all my project upload to ftp? Because there is arround 20.000 file in node_modules directory.
With this command build your app :
npm run build
Build folder has created in your project directory, open index.html in your browser and check output...
If you saw a blank page (after build and opening index.html) , you must change the main js file path in the index.html :
default is : src="/static/js/main.ddfa624a.js"
change to : src="./static/js/main.ddfa624a.js"
I changed js path and this worked !
create-react-app has a command to bundle your app to a ready to deploy state.
npm run build
This command will bundle your app in /build folder. With the contents of this folder you can deploy your app in any hosting environment. You don't need to install your packages and libraries manually when you use this command. More information about using this command and deploying your app in different hosting environments can be found create-react-app README
Deployment
npm run build creates a build directory with a production build of
your app. Set up your favorite HTTP server so that a visitor to your
site is served index.html, and requests to static paths like
/static/js/main.<hash>.js are served with the contents of the
/static/js/main.<hash>.js file.
1- React project will work normally on linux hosting?
Yes, it will work in all webservers, unless you have server side rendering (SSR)
2- I need to all my project upload to ftp? Because there is arround
20.000 file in node_modules directory.
Files in node_modules will NOT go to your web server. These are development dependency files used only during development.
Run npm run build
This will create a folder called build in project root. This will have all html, css , images and js files
Copy all files and folders in build folder to your site root.
If your site has to be hosted in a sub folder in root you need to do the below, otherwise you will see a blank page. This is because your static files (css, js etc) are not loaded correctly.
Open package.json
Add a new entry homepage: /your_subfolder/
It will look like this
Now do steps mentioned above and your site should work fine
Add this line to package.json:
"homepage": "./"
That should make it work without the need to adjust index.html after every build.

How to publish Angular project?

I maked angular project. I used this generator:
https://github.com/swiip/generator-gulp-angular#readme
I have serwer and domain. My question is: How publish this working project on serwer? Should I use Apache http?
Since you used Gulp, you can check its docs to find out exactly you can build your Gulp application and deploy it to server.
On your command line run this in your working directory of the app
gulp //to build an optimized files to be deployed on to the server
Now in your dist folder in your root of your working directory, you'll find all the files and folders that have been created by gulp task default.
Now you can deploy this on with Apache or node or Nginx or any other server you want. Simply paste all the files to the to the
path/of/the/root/on/server
You can also preview your app the browser and watching for files changing and auto-reloading the browser to review changes by running
gulp serve
More grunt tasks here.

How to deploy yeoman angularjs project to IIS?

I'm trying to deploy my angular application to IIS in windows server. I'm currently using grunt to build the app and then have a web.config to point to my index.html in the dist folder.
The problem is that is not finding any vendor.css or main.css, nor any vendor.js or scripts.js files. I'm not sure if there are tags I can include to my web.config so that it knows where to look for these files. Also, I copied all folders within the dist and pasted the into the root directory of the application and it seemed to work, but then it could not find components I'm currently using in the app.
This how my website looks with current setup:
ISS Website
If anyone can help me solve this I would greatly appreciate it. Thanks in advance!

project setup for Angular & webpack

i am trying trying to create a project with webpack, angular and gulp. Webpack creates a bundle file called build.js and an index.html from a template. When the browser enters the webpage i want it to go directly to a login screen by using ui-route.
this is how my directory structure looks like.
Firstly my problem is that the bundle only includes the entry file, app.module.js. I can require the other js files in app.module.js to have them in the bundle to but when this project grows it will be a lot of files to be required in one file. So is it possible to bundle all js files except the once in node_modules folder?
My next problem is that when the build.js and index.html has been created in the dist/build folder i cant seem to find the rest of the html files in the project if they are not in the build folder.
Not sure how your webpack config looks like, but many times the HTML is processed by webpack and might end up in your JS bundle (as a string) that then can be used by Angular.

Resources