How to upload GULP project to File Manager / CPanel? - javascript

It's my first time using Gulp. I am familiar with React.js, Gatsby, Next.js, but I don't know how to upload Gulp project to Hosting. after gulp build the only logical thing I see is production folder. I have zipped it and uploaded, but the website (hosting) doesn't see it. How to make my project live?

Ok, I figured it out.
gulp build
Zip the production folder
Upload it to your cpanel under public_html folder and unzip it.
Make sure you have index.html! If you don't, you won't be able to see your website. In my case I had homepage.html instead, that was the main problem. Just rename it to index.html.

Related

One of my js files is not being bundled in my production build (dist folder)

I am creating a Vue app (using Vite), and I like to have my .js functions in different files inside a scripts folder. I have started recently so for the time being I only have one .js file appart from the main.js that comes with Vue.
When I build the application to deploy it, it seems that this .js file is not included in the bundle, so the deployed app cannot use it's functions.
How could I make the npm run build command include this local .js file that I am using (and it works when running the app in localhost), so that the deployed app works as expected? Am I missing something in where local files should be put inside the project files tree?
I have checked other questions regarding this, and also the official documentation, but maybe due to my lack of experience with Vue I haven't found the answer or haven't understood it.

Hosting Angular 2 app

I'm new to Angular 2, I know host Angular 1.x on shared hosting like GoDaddy, but I don't have idea how publish Angular 2 application, for example I have this structure folder:
angular2-quickstart
--app
app.component.ts
main.ts
--node_modules
--typings
index.html
package.json
styles.css
systemjs.config.js
tsconfig.json
typings.json
What file i need to upload on ftp?
I don't tried anything because I don't know how to proceed
Thanks in advance!
As a component based language, angular 2 includes some caveats in it's deployment process.
First, the files used in development environment aren't necessarily shipped to production. In short, you'll only need to upload .js, .html and .css files .
Second is that even if your application works deploying only the files mention above, it's advisable to include the following process:
Bundling: Compiling all the .js files into single files. For instance, vendor.js could include all third party libs and bundle.js would include all application .js files. (Bundles are import for performance reasons, but bear in mind that with the arrival of http 2, this process will be abandoned)
Minification: it's a standard process in all web apps, but now you only minify bundled files.
Take a look in this article, as it give some examples of tools that can help you with deployment process.
http://www.ninjaducks.in/hacking/angular-setup/
If you don't have a backend, free hosting sites will usually look for an index.html to begin their job. Hence, your folder structure is correct but you will need to upload the js files instead of the ts files.
I think that one popular workflow is to gulp-typescript your .ts files, and send the resulting .js files into a distribution folder. The many .js files could also be "gulp-concatenated" (gulp-concat) into one file.
Of course you'll need to be sending your html and css files as well.
Since the Angular2 library relies heavily on what's in the node_modules folder as well, you would need to upload your package.json and npm install on the server side. You could try uploading the node_modules but the upload takes a lot of time.
You need to build angular2 project using tools like webpack or angular-cli - which also uses webpack post beta.14 release. Webpack will create a distribution directory - dist - which you can deploy to the server. Webpack bundles all the code into a single file which it puts inside the dist folder. Here's a good resource to understand the code and deployment structure of angular2 app: https://github.com/mirkonasato/angular2-course-webpack-starter
Clone the above directory, run "npm install" to install all dependencies and run "npm run build" you will see the distribution folder - dist - which you can deploy.
Well, you can run ng build in your root application directory. It will create a dist directory containing the app and files. You can put this directory into the page the webserver will look for the index.html

PhoneGap build is not updating all of my files

PhoneGap build is not updating all of my files? I have been using Build for a while, but now the downloaded application seems like not contains the css file.
I tried to delete the application then upload new zip file and rebuild it but same issue appear.
I renamed the file extension .apk to .zip and i opened the file I recognize that the css folder is not in the same root as other folder like .js and i think it is the problem, but i don't why this happened.
Any help??
I fixed the issue by deleting the css folder then rebuild the app and it is working now

How to prepare grunt to prepare dist folder with app.js?

I'm currently playing around with Yeoman Angular Fullstack Generator. That's pretty cool and works as expected. Since it uses grunt, it's possible to run grunt serve dist so that it starts the server with my uglified and concatenated files...
BUT:
Last week I found modulus.io (nodejs cloud hosting like heroku) and they were offering a free evaluation phase. Problem: They expect that my project has an app.js so they can start it with node app.js.
Question:
Do you guys know how can I use grunt to generate a dist folder just for modulus.io, including all contents of the already generated dist folder (currently just frontend code) + all needed server-side javascripts + an appropriate app.js (that uses express and the contents from the dist folders) and the package.json file?
Any help would be appreciated. :) I think a similar task must exist somewhere since you might have this problem on any other cloud hosting platform. Unfortunately I couldn't find a proper solution
Regards,
Sascha
In short, modulus.io is just looking for an entry-point into the application. It can be called whatever you like, so long as in your package.json file you have a line that tells it what to launch, ie. "main": "dist/app.js".
See: https://modulus.io/codex/projects/app-guidelines for more info.
The full stack generator that you are using should have generated all this for you however...?
EDIT: Running a simple grunt command will create a \dist directory that is ready to be uploaded.

Does meteor minify the files in the client/compatibility directory in production?

From this link (http://docs.meteor.com/#structuringyourapp) the client/compatibility directory is the place to directly put client files that aren't smart packages in Meteor.
However, does Meteor still minify the files in this directory in production? i.e., should I put pre-minified or just non-minified libraries in that directory for my application?
This place (though unofficial) is better for Meteor-structure IMHO: https://github.com/oortcloud/unofficial-meteor-faq#where-should-i-put-my-files
I'm afraid I've never tried the compatibility folder in a deployed app so I really don't know.

Categories

Resources