Azure Web Static Apps can't read .env with NEXT_PUBLIC prefix - javascript

let say I have .env like this
NEXT_PUBLIC_API_BASE_PATH = value1
this .env is working as expected in my local, but after I deployed to Azure Web Static Apps and also added this .env in configuration
my application seems can't read this .env as I debug it through console it returns the value of undefined.
I already know the mitigation by adding the value through my .yml file and next.config.js, but as I know this solutions is not really good to be implemented in real production scenarion. Is there any answer for this issue yet?

Related

How to still be able to read files from .gitignore?

Hi I'm trying to create a Discord bot using Discord.js and deploy it to Heroku.
I have successfully deploy it to Heroku, but the logs shows an error. Here is where I think the problem is:
app[worker.1]: Error: Cannot find module './config.json'
config.json cant be found because i put the config.json file inside a .gitignore file. This is because i have some credentials (bot token) that i need to protect inside that file. However, the main file needs access to the config.json in order to run.
Is there any way to still protect the contents of the config.json file while still being able to run the program? The GitHub repository is set to private, so should i exclude config.json from .gitignore instead?
If it's just a small side project, and your GitHub repository is private, there should be no issue in leaving the config.json out of your .gitignore. However, for larger or open-source projects, you can use Heroku's config vars, and that should do the trick. I recommend using config vars but if you just want to throw your code up on Heroku, leaving it out of .gitignore should be fine. I would recommend config vars though, they work reliably.
Thanks,
Jackson
You should use environmental variables to save tokens. Then you change your config.json to point to those environmental variables, and not the actual token.
More info on how Heroku does env variables here:
https://devcenter.heroku.com/articles/config-vars
(I'm assuming it's not having issues finding your config because it's looking for config.json when the file is actually named config.js or vice versa)

Auto read local file with html js or reactjs framework

I have researched for many hours to find the way to auto read local file with html and js , but the only way is create input tag in html but user need to select file in their computer and read it - this way doesn't auto read (I use http-server command to run html file).
I know direct access "file://" is blocked by browsers for security reasons or some solution like "--allow-file-access-from-files"
But when i use reactjs and read file from public folder, it's work (app create by npx create-react-app )
Could you tell me the difference between them and give a solution to auto read local txt file with only html,js.
Sorry for my bad English.
Thank you very much
create-react-app is just serving your local files via Webpack, it is the same as using Nginx to serve your local files or using Apache. When you create a build using webpack you are merely guiding your server to serve static content at a particular host.
You may want to refer to Nginx and Express and read how they work.

How to use environmental variables in a static Netlify page

So i have a static Webpage which uses some API. There's app.js file that has API key in it stored in an object property.I need to hide it using Netlify dev. How do I do that? How do I use Netlify dev tools in native js? I most probably need node js installed as well but this topic is not entirely clear to me... Could someone make a step by step tutorial for me?
If it's a static site, it won't be able to directly access the hidden netlify env variables.
If you are hosting the app.js file along with your static site then it will be easy for someone to browse to it and see the API key you are trying to hide.
One solution though is to define a Netlify Function that does the API call, and then the JS in your static site can call that function.
Your Netlify Function will be effectively a backend for your app, and can access the ENV variables you set in the Netlify UI, via process.env.
See this tutorial for a step-by-step guide.
Update re the new gatsby-build information in comments.
You can put variables in a git-ignored .env file, which means they will not end up on git, but will still get pulled in and included in the gatsby production code, which will be visible to the client, so isn't recommended for API access keys. Ideally you should connect via a backend to secure those keys, as in the above original answer.
However, instead of using a .env file, if you are using the Netlify Dev CLI then this will automatically pull down any env vars you have set in the online Netlify settings, and allow you to use those in your local environment.
From the cli docs:
Netlify Dev brings the functionality of your Netlify production environment directly to your local machine. This includes custom headers/redirects and environment variables.

Is it best practice to hide API keys in .env file in React

I am new to React and was learning how to hide API keys gotten from GitHub API and from other APIs. I found out that it is possible to hide keys in .env files and get access to those keys by using REACT_APP and ensure that .env file is added into .gitignore file in order not to be submitted to a server. `The question is Is it considered best practice the way of hiding keys I described above. Secondly, is .env file added to a server even if we add .env file into .gitignore file.
If you are going to be passing the contents of the environment data file to React, which is client-side code, then it isn't likely to be very useful for keeping things secret.
Mostly this will be useful for keeping your various environments separate (e.g. so you don't accidentally use the URL for your test API server in the production deployment of your app).
If you were using this for server-side code, then it would be useful to keep your secrets secret and not publishing them in a git repository (that you might want to allow other people access to).
Whether or not the environment data file would be deployed to your server would depend on your deployment process. If your deployment process consisted of nothing more than checking out your git repository to the live server, then no, it wouldn't be deployed.

use vue-cli output in php project?

When I use vue-cli, I'll automatically create a local server.
My question is: Can I use the vue-cli output in php project (for example, app.js ) ?
What is the local network for? Is it going to help Frontend programmers?
I know, "devDependencies" (which probably includes this local server) did not work effectively in the final file.
thank you
vue-cli gives you a simple HTTP server running on nodejs which is called Node.js static file server. It's main purpose is to help developers at development time.
For production you need a production server like Apache Web Server.
Whether you need PHP or not depends on your application's nature. Many apps require server side rendering. If so, you need PHP. If not, just copy the dist folder's content to Apache Web Server's hosting folder.

Categories