I have recently developed a website, it's NodeJs (on Ubuntu) and running a React app. The problem is, for example, on Chrome; when you right-click on the website and check sources you can see the source codes and all the files. I want to hide all of them.
In this section, I want to hide the source codes (files) in the server.
I tried couple of solutions on the internet but none of them worked.
For example,
I've added "build": "GENERATE_SOURCEMAP=false react-scripts build", in package.json and then I did run pm2 reload (also yarn build etc)
I've created a file called .env and added this line GENERATE_SOURCEMAP=false in it.
None of them has worked. My website is currently active right now and I want to hide source files, how can I hide these source files from sources tab so people can't see the source codes?
After long research, I have found the solution.
Create a file called .env in your project. The name of the file is just .env.
In that .env file put this line GENERATE_SOURCEMAP=false and save.
Then, run npm run build or yarn build.
This will generate a build folder for production. After that, depends on what you are using, run this build file for running the website. For example, I'm using pm2 on my Ubuntu server, so I've used pm2 serve build 3000 --spa (my website is running on port 3000) Also be careful you are in the same path with the build folder.
That's it. Now all the source code files are gone and website works like a charm.
Related
I need the following folder structure:
public
index.html
build
main.js
other.js
I have created simple demo, here is a link to github, so you can check the configs:
https://github.com/ArtemDomochka/dev-server
Problem: dev-server doesn't work
Details: If I will build the project with npm run build everything is good. But whenever I start dev-server with npm run start it doesn't work. May be dev-server changes file structure, but in browser I just get error: Cannot GET /, so it can't even find index.html
Is it possible to fix it?
There is also an interesting observation: If I will build project and then serve it, page will be loaded correctly, but it will not handle code changes in real time
This question already has answers here:
"Cross origin requests are only supported for HTTP." error when loading a local file
(30 answers)
Closed 2 years ago.
I started an p5 project in p5s web editor. Now its getting big and I want to continue the project on my local Linux, but have no idea how to install a preview plug in there. before I used Atom on win 10 and it worked for me. But without the preview plug in I cant just preview the webpage html because of cors. Its a browser game and I have sprite and sound data in the html folder.
I tried an "allow cors" addon for firefox, but that doesnt make any difference.
I tried to start a localhost from terminal, and put an allow origin in the http header but I have no Idea how that goes.
I could might install Atom, but I dont know if the same plugins are working on linux. And I actually want to learn how professional web developers do get around it?
PS: I couldnt find anything that I understand or that solves my problem. I can understand if its not possible to post a solution for the cors error. Tipps for a nice and easy Linux Editor, or link to a tutorial, or solved thread would be great. THX
What you actually need is a web server (started from your terminal, and potentially with a command from your editor which will call the external command) which will serve your files. This has the advantage of being decoupled from your editor and this way you can change your tools or your environment without breaking your development workflow.
One way to do it is to add light-server to your project (There are a lot of alternatives to this tool tho, one of them being serve). To add it to your project you can use the following command:
npm install --save light-server
And then you can run the following command to serve your directory on localhost:4000 by default:
npx light-server -s .
To avoid using npx you can also install the server globally with this (that require to have your permissions properly configured for npm otherwise you'll get an error):
npm install --global light-server
And then you can use the command directly light-server -s .
You could also add the following to your package.json file to make the script easier to use:
"scripts": {
"dev": "npx light-server -s . -w \"**/*\""
},
With that, running npm run dev in your project directory should start the webserver and reload the page each time you modify a file in the project.
Note that this kind of development server is also available in other languages if you need to (for example python). Using a webserver instead of loading directly the page from file:///path/to/index.html in your browser should fix your CORS issues.
I am doing my first angular project and I have to upload it to a Development test server. Problem is that, an Angular project (event in default state) has so many files that it takes a lot of time to upload it.
I investigated and the .gitignore file seems only to be to avoid the commit of the files or folders specified there.
Could you please tell me if there is a way to minimize the number of needed files to upload and install or use them later, in local, in a safe way? Without risks of corrupting the project.
If you are using Angular CLI you can get a production build by doing
npm run -- ng build --prod
in the project directory. This will create a minified, bundled version of your app in the dist folder, ready for upload. You will then need an http-server running to serve these files.
As #yarz-tech suggested, the solution was to remove the node_modules each time I upload it. Then, when someone downloads it and wants to work with it again, must execute npm install. That allows npm to install all the dependencies our project needs, based on what is is specified on the package.json file, which appears not only for Angular projects, but for Node for example.
Thanks to everyone.
I am trying to get up and running with Meteor and seeing what it can offer, while I like it overall, it seems it's a very very rigid system.
I set up a small testing setup using Velocity, it opens a small overlay window on the side which has a class of "velocityOverlay". The overlay is really small and makes error stack traces wrap. All I wanted to do was to edit the css of the "velocityOverlay" and increase the width.
I somehow (after wasting time) managed to find that Meteor is actually putting all the packages in my user directory by default, once I found that, I found the needed css file...
velocity_html-reporter/.0.5.1.aykpxq++os+web.browser+web.cordova/web.browser/packages/velocity_html-reporter/lib/client-report.less.css
And I did a small edit to the width, next thing you know the meteor app crashes when trying to launch using the "meteor" command throwing a "Error: couldn't read entire resource" error. I can't even edit the bootstrap.css file I installed using "ian_bootstrap-3".
Further more, I can't find any way to install packages locally just for my particular project, what if I wanted to modify a package only for my particular project? this is very easy to do in vanilla Node.js, you simply don't use the "-g" when using "npm install".
To add to that, within my project root, there is another ".meteor/local/build/web.browser" folder with most of the global package files replicated again. When does Meteor use which? This is very confusing.
You can run a package locally very easily.
Download it from Github (for example) and put it in the packages/ directory of your application like this /packages/package_name.
Then add it to your application with the same meteor add package_name command as usual.
Meteor will automatically look in the local folder before anywhere else and compile the package with the rest of your code.
This allows you to do any modification you want on the package and test it locally before publishing it to the registry.
Also, folders located in .meteor/local/* are used for building purpose only and are generated automatically by Meteor. So it is not the best place to edit the files!
This worked for me https://atmospherejs.com/i/publishing. mrt link-package didn't work for me, might just be outdated code.
Steps:
Download (or clone) package from GitHub to local dir
Stop meteor if running
2.1. Make sure you have a packages folder: mkdir packages
Locally link your package:
3.1 If you have mrt installed: Run mrt link-package /path/to/package in a project dir
3.2 If you don't have mrt: ln -s /path/to/package packages/package
Then run meteor add developer:package-name, do not forget to change package name
Run meteor in a project dir
From now any changes in developer:package-name package folder will cause rebuilding of project app
Download the package and place it in new package directory in your project root.
open the package.js inside the downloaded package and remove the author's name in the property "name:"
e.g: - name:'dburles:google-maps' to name:'google-maps'
then run
meteor add google-maps
I have seen a few references to this topic, but it's not 100% clear to me.
Inside the top level of a cordova project you have these folders '.cordova', 'merges', 'platforms', 'plugins', 'www'. I would think you edit the top level 'www' folder and it would update the files inside platforms\<platform>\assets\www because editing files directly in this path get overwrote, from what I have read and I experienced this once before deploying an app.
I can't find documentation on this (searching cordova update project just covers updating cordova itself, at least from what I am seeing maybe I'm being blind here).
How do the files in the root 'www' update the project files? I am sure there is a command for this but is it true I have to run an update command every time I make an edit in say Dreamweaver, because when I make an update it obviously doesnt make changes into the directory because it doesnt have anything telling it to.
So what I am asking.
You should edit the html/css/javascript inside the cordova projects root 'www'?
What are some solutions to updating the platform code from the main files?
Edit the content of www folder in main project directory and run cordova build command to copy these files to your platform specific directories. So the process will be like
Edit the content of www folder in project directory.
Debug the changes with any browser or emulator like Ripple.
Run cordova build command to test it in Android emulator or in a real device.
To use cordova command line tools, you need to install cordova command line interface. It can be found here.